Los temas de Shopify ya vienen repletos de grandes características que son fáciles de configurar usando el panel de configuración integrado, pero llega un momento en el que se necesita una personalización más avanzada.
Por supuesto, este tipo de personalizaciones no son para los débiles de corazón, requieren conocimiento de HTML y CSS, así como el lenguaje de temas de Shopify, Liquid.
Sin embargo, la excelente documentación de Shopify a menudo sugiere este tipo de cambios e incluso a veces proporcionan el código necesario, por lo que este es un buen concepto para que cualquier propietario de tienda Shopify lo sepa.
Una de las mayores trampas de hacer actualizaciones al código de tu tema Shopify, sin embargo, es que es probable que se sobrescriba, si alguna vez actualizas tu tema en el futuro.
La mayoría de los editores de temas, proporcionan actualizaciones regulares para agregar nuevas características, admitir la compatibilidad de nuevas tecnologías web o corregir errores que se descubren, por lo que mantener tu tema actualizada sin duda tiene sus ventajas.
Vale la pena señalar que, antes de comenzar cualquier personalización avanzada al código, considerar los pros y los contras de hacer este tipo de cambios. ¿Qué tan vital es el cambio que estás pensando en hacer? También considera si hay una manera de realizar el ajuste utilizando una de las configuraciones integradas del tema de una manera que no requiera de código.
Vale la pena sopesar todas estas preguntas ya que, incluso con los consejos contenidos en este documento, siempre hay desventajas en modificar el código sin conocimiento pleno.
Por último, vale la pena recordar que siempre debe guardar copias de seguridad de tu tema en cada etapa. Aunque Shopify ofrece un historial de edición, nunca se sabe si funcionará correctamente y siempre es mejor tener una copia de reserva propia.
Modificar temas requiere al menos conocimientos intermedios de CSS, HTML, liquid y principios de codificación en general, así que asegúrate de sentirte cómodo con esas áreas antes de intentarlo.
Si no, considere que como parte de nuestros servicios es ayudarte a personalizar el tema.
Y, solo para volver a enfatizar este punto, asegúrese siempre de tener una copia de seguridad de sus archivos de tema que sabes que funcionan para que pueda volver a eso si es necesario.
Puedes usar la configuración del tema para realizar cambios en la tipografía, los colores, los enlaces a redes sociales y la configuración de la pantalla de pagos de tu tienda online.
Algunas secciones de tema también te permiten ajustar la configuración del tema relevante para esa sección. Los cambios que realices en la configuración de tu tema dentro de una sección se aplicarán a toda tu tienda online.
Un estilo del tema es una colección de ajustes que elige el diseñador del tema y que puedes aplicar a tu tienda para darle una apariencia pulida. Todos los temas tienen un estilo de tema que se aplica de forma predeterminada. Cuando personalices un tema, reemplaza la configuración del estilo de tema por la tuya propia. Si aplicas un estilo del tema a tu tema, cambiarán los ajustes tales como los colores o la tipografía de la configuración actual.
El botón Deshacer revierte tu cambio más reciente, y el botón Rehacer reintegra un cambio que deshiciste. Al hacer clic en el botón Deshacer más de una vez, continuará deshaciendo tu trabajo, con un cambio a la vez. Los botones Deshacer y Rehacer se encuentran en la barra de herramientas del editor de temas.
Haz clic en el botón Deshacer para revertir los siguientes cambios:
El contenido del tema se crea usando secciones. Las secciones son bloques de contenido personalizables que determinan el diseño y la apariencia de las diferentes páginas en tu tienda online.
Las secciones estáticas son secciones que aparecen en sucursales predeterminadas en tu tienda online. Estas secciones no se pueden eliminar ni reorganizar. Las secciones estáticas pueden incluir encabezados, pies de página, secciones de navegación o secciones de contenido en páginas como páginas de productos y páginas de colección. Por ejemplo, la sección de producto determina el aspecto de cada página de producto en tu tienda online.
Las secciones dinámicas son secciones opcionales que puedes usar para personalizar el diseño de tu página de inicio. En la página de inicio de tu tienda, puedes Agregar, reorganizar y eliminar secciones dinámicas para crear el diseño de la página. Puedes tener hasta 25 secciones dinámicas en tu página de inicio.
Puedes aprender sobre la selección única de secciones de your theme y cómo personalizarlas para que se adapten a tu negocio.
Aunque cada tema es diferente, todos comparten algunas características comunes. Todos los temas te permiten usar los mismos tipos de páginas, y todas las páginas incluyen algunos elementos estándar. Los siguientes elementos de página y tipos de página conforman la estructura de un tema.
Elementos de página
Todas las páginas de un tema incluyen los siguientes elementos de página:
Tipos de página
Todos los temas incluyen estos tipos de páginas:
Puedes personalizar tu tienda en línea cambiando el texto predeterminado. Por ejemplo, puedes cambiar “Carrito” a “Bolsa de la compra”, o “Agotado” a “No disponible”.
Algunos temas ofrecen más de una opción de idioma. Estos temas incluyen traducciones de todo el contenido de texto de tu tienda en línea, como información de contacto e información sobre el carrito y el proceso de pago. Para temas que incluyan varios idiomas, puedes simplemente cambiar el idioma del tema. Si tu tema no tiene el idioma que deseas, puedes crear las traducciones tú mismo.
Puedes revisar y actualizar cualquier idioma de tu tema, independientemente de si creaste la traducción tú mismo o que haya venido con la descarga.
Tendrás que agregar contenido traducido a los bloques de texto cuando estés creando o actualizando las traducciones:
El editor de idiomas tiene pestañas para las siguientes categorías:
Hay tres tipos de contenido básicos que deberías traducir:
Puedes traducir cada fragmento de texto insertando las traducciones en los campos de texto.
No tienes que traducir todos los campos de tu tema. Tus cambios se guardan automáticamente y puedes detener el proceso en cualquier momento. Si deseas hacer cambios, accede a cualquier traducción existente.
Si dejas un campo sin traducir, se utilizará el idioma predeterminado para el tema.
Puedes traducir texto sin formato directamente, pero ten cuidado especialmente al traducir bloques de texto que contengan HTML o Liquid.
Los temas de Shopify se crean como un directorio de archivos de plantilla. Los archivos están escritos en Liquid, el lenguaje de plantillas de código abierto de Shopify basado en Ruby. Liquid te permite mezclar etiquetas estáticas HTML y Dynamic Liquid para crear las páginas requeridas por una tienda en línea Shopify.
Los temas de Shopify están organizados con una estructura de directorios estándar de archivos de plantilla y otros activos, como imágenes, hojas de estilo y scripts.
Los temas siempre deben incluir el conjunto básico de plantillas requeridas, como los archivos que controlan la página de inicio, la página del producto y otros.
Mientras que las aplicaciones se ejecutan en la infraestructura del desarrollador, los temas se ejecutan en los servidores de Shopify. Un tema se distribuye agrupando el directorio del tema como un archivo zip, que luego puede ser cargado por el comerciante en Shopify admin.
Muchos desarrolladores venden sus temas fuera de Shopify Theme Store. Pero, independientemente del método de distribución, los desarrolladores son responsables de proporcionar soporte técnico comercial.
Los temas de Shopify se componen de archivos de plantilla de Liquid, cada uno con un propósito único. Por ejemplo, collection.liquid se usa para mostrar varios productos y product.liquid se usa para mostrar los detalles de un solo producto. Los temas de Shopify también incluyen un archivo settings_schema.json , que es un formulario que facilita al usuario personalizar la apariencia del tema
Un tema de Shopify incluye los siguientes directorios:
Aunque el servicio de desarrollo de eCohete puede ofrecer una amplia gama de personalizaciones básicas y avanzadas, ten en cuenta que para resguardar la integridad e la información y colaborar de la mejor forma, siempre será preferible coordinar previamente con el equipo de desarrollo los cambios y mejoras deseadas. No podemos ofrecer ayuda para las siguientes tareas o supuestos:
