Consejos para personalizar el tema de tu tienda

Consejos para personalizar el tema de tu tienda

Generales

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.

Shopify usa Liquid que es su lenguaje

 de código abierto, junto con HTML, CSS y JavaScript estándar.

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.

Antes de personalizar

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.

Antes de personalizar un tema, es una buena idea hacer una copia de seguridad para que puedas descartar tus cambios y comenzar de nuevo si es necesario.

Realiza los cambios necesarios en la copia de tu tema. En otro navegador visualiza los cambios.

Si ya personalizaste el tema de tu tienda en línea, entonces puedes buscar comentarios de otros compartiendo una vista previa de tu tema. Puedes crear un enlace que otros puedan usar para acceder a una vista previa de cualquier tema que hayas agregado en tu panel de control de Shopify. No necesitas publicar el tema para poder compartirlo.

Un enlace de vista previa le permite a otros explorar tu tienda online pero les impide acceder a la pantalla de pago. Después de crear un enlace de vista previa, éste permanece activo durante 14 días. Puedes crear enlaces nuevos tantas veces como desees, y la creación de un nuevo enlace no afectará los enlaces de vista previa anteriores.

Puedes agregar hasta 20 temas a tu tienda online, pero solo se puede publicar un tema a la vez. El tema publicado es el tema que los clientes ven cuando visitan tu tienda online. Tu tema publicado aparece en la sección Tema actual de la página Temas, y tus temas no publicados aparecen en la sección Biblioteca de temas.

Si publicas un tema nuevo, tu tema publicado previamente se traslada a la sección Biblioteca de temas. No se pierden los cambios realizados que hayas hecho al tema.

Nota
Si ya tienes 20 temas añadidos a tu administrador de Shopify, entonces tendrás que eliminar uno antes de poder duplicar otro.

Conocimientos básicos

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.

Personalización del tema

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.

Estilo del tema

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.

Deshacer y rehacer cambios

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:

  • agregar, reorganizar y eliminar secciones
  • aplicar colores, fuentes y otra configuración en la pestaña Configuración de tema
  • restablecer un estilo de tema.

Secciones

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.

Estructura de un tema

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:

El contenedor de contenido que aparece en la parte superior de cada página de tu tienda. El encabezado generalmente incluye el nombre de tu tienda, tu logo, navegación por el menú principal e ícono del carrito.


Un menú o una serie de menús que brindan a los clientes una forma de explorar o moverse en tu tienda en línea. La navegación del menú principal está incluida en el encabezado de un tema.


El área en cada página de tu tienda online entre el encabezado y el pie de página. A diferencia del encabezado y el pie de página, que son elementos fijos que permanecen iguales en todas las páginas, el cuerpo de la página es dinámico y tiene contenido que cambia según la página en la que te encuentres.


El contenedor de contenido que aparece en la parte inferior de cada página de tu tienda. El pie de página puede incluir menús, íconos de redes sociales, información de contacto o una suscripción para un boletín informativo.

Tipos de página
Todos los temas incluyen estos tipos de páginas:

La página de contraseña es una página que puedes usar para ocultar tu tienda online temporalmente de tus clientes. Quizá quieras utilizar una página de contraseña antes de abrir tu tienda o mientras estás de vacaciones. En la página de contraseña puedes mostrar la fecha de lanzamiento de tu tienda, los tipos de productos que venderás, la cobertura mediática reciente, o detalles sobre próximas ofertas. La página de contraseña también tiene un campo de correo electrónico que los clientes pueden usar para suscribirse a tus boletines.


La página de inicio es la página principal de tu tienda en línea. Esta es la página predeterminada que se abre cuando un cliente visita tu página web.


Puedes organizar tus productos en colecciones para que sean fáciles de encontrar para los clientes. La página de colección muestra todos los productos que has incluido en una colección determinada.


La página lista de colección muestra todas las colecciones en tu tienda. Esta página se puede encontrar en la URL tu-tienda.com/colecciones


La página del blog incluye el título y la descripción de tu blog, así como extractos y enlaces a los artículos de tu blog.


La página de contacto incluye un formulario que los clientes pueden usar para contactarte.


La página del artículo incluye el contenido de un solo artículo del blog.


En la página del producto se muestra un producto y sus variantes. Incluye imágenes de productos, información de precios, una descripción del producto y un botón Añadir al carrito.


La página del carrito muestra un resumen de todos los productos que un cliente ha agregado al mismo, un subtotal y un precio total del pedido, y un botón de pago que lleva a los clientes a las páginas de pago seguro de Shopify. Cuando no se han agregado productos, la página del carrito vacía muestra un enlace de Seguir comprando que lleva a los clientes de vuelta a ver tus productos.


La página de búsqueda incluye una barra de búsqueda y una lista de resultados de búsqueda.


Solo puedes acceder a las páginas de clientes si tienes cuentas de clientes habilitadas en el área Configuración > Pantalla de pagos del panel de control de Shopify. Incluyen la página de registro del cliente, la página de inicio de sesión del cliente y la página de la cuenta de cliente. La página de cuenta de cliente incluye la dirección de envío del cliente y la información sobre los pedidos existentes.


Una página personalizada es cualquier página que creas en la sección Páginas del panel de control.

Idioma y redacción en los temas

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.

Usa el editor de idiomas

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:

  • General. Texto general y mensajes que incluyen envíos de formularios, suscripciones y búsquedas.
  • Blogs. Todos los elementos que están asociados con leer, publicar y comentar en artículos de blog.
  • Carrito. Contenido y mensajes que se muestran en la página del carrito.
  • Colecciones. Texto relacionado con la creación, visualización, búsqueda y clasificación de colecciones.
  • Contacto. Nombres de campo y mensajes para formularios de contacto.
  • Cliente. Nombres de campos y mensajes para clientes, cuentas y detalles de pedidos.
  • Inicio. Mensajes y etiquetas para el contenido de la página de inicio.
  • Diseño. Contenido que aparece en el encabezado o en el pie de página, como la navegación, el botón del carrito y la información de inicio de sesión del cliente.
  • Productos. Mensajes relacionados con la visualización de productos y la disponibilidad del producto.
  • Tarjetas de regalo. Avisos relacionados con la emisión, el uso y la administración de tarjetas de regalo.
  • Formatos de fecha. El formato utilizado para la fecha.
  • Pantalla de pagos y sistema. Todo el contenido de la pantalla de pago, así como los nombres del sistema, errores y avisos.

Tipos de contenido

Hay tres tipos de contenido básicos que deberías traducir:

  • Texto sin formato
  • HTML
  • Liquid

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.

No necesitas usar HTML o Liquid para la mayoría del texto en tu tienda en línea. Cuando insertas una traducción de un bloque de texto sin formato, todo lo que tienes que hacer es reemplazar el texto con su equivalente en el otro idioma.


Si un bloque de texto contiene HTML, verás los pares de corchetes angulares ( < > ) alrededor de las palabras o frases.

Es importante comprender cómo usar el HTML en el bloque que estás traduciendo. Aunque deberás dejar la mayor parte del contenido en el idioma original inglés, es posible que haya algunas palabras en inglés dentro de las etiquetas HTML que quieras traducir.

Los bloques de texto que contienen HTML generalmente se usan por los siguientes motivos:

  • crear enlaces hacia otra parte de tu tienda en línea o hacia una página web diferente
  • agregar formato al texto.


Un enlace HTML está rodeado de etiquetas que comienzan con  <a href= y terminan con </a>.

Debes traducir sólo el nombre del enlace, y no sus otros componentes. El nombre del enlace es la única parte del enlace que verán tus clientes.

Continue browsing <a href="/collections/all">here.

En este ejemplo, debes cambiar las palabras Continuar, explorar y aquí, con una traducción adecuada.

Nunca traduzcas la dirección de destino en un enlace. La dirección de destino es adonde un cliente se dirige cuando hace clic en el enlace. Siempre se muestra entre comillas y señala una dirección web específica. En el enlace de ejemplo, la dirección de destino es /collections/all.


El HTML se usa a veces para dar énfasis o un estilo adicional a las palabras o frases, o para mostrar símbolos. Debes traducir sólo las palabras a las que el HTML está colocando un estilo, y no los códigos o las etiquetas. Echa un vistazo a los ejemplos para que entiendas mejor qué traducir y qué no debes modificar.

Ejemplos de estilo HTML

En el siguiente ejemplo, las etiquetas <strong> se utilizan para mostrar el texto en negrita:

<strong>On Sale</strong>

En este caso, traducirías sólo las palabras Oferta.

En el siguiente ejemplo, los códigos HTML &larr; y &rarr; se utilizan para generar símbolos de flecha a la izquierda y a la derecha:

&larr; Previous Product

Next Product &rarr;

Aquí, traducirías sólo las frases Producto anterior y Producto siguiente.

En el siguiente ejemplo, las etiquetas HTML <strong> se usan para mostrar el nombre del archivo collection-sidebar.liquid en negrita.

Add a type to your products for this list to build itself. All lists are created in <strong>collection-sidebar.liquid</strong>

El nombre del archivo aquí es un archivo de plantilla Liquid. Debes traducir el nombre del archivo solo si es necesario para que coincida con el nombre del archivo propiamente. Por ejemplo, si creaste tus propios archivos, es posible que necesites cambiar el nombre del archivo en el HTML.

Nunca traduzcas las etiquetas en HTML o los códigos de símbolos. Tu navegador los utiliza aunque tus clientes no puedan verlos.


Nunca traduzcas etiquetas, objetos o filtros de Liquid.

Liquid es el lenguaje de plantillas que controla la apariencia de tu página web en diferentes contextos. El contenido en Liquid siempre va acompañado de los siguientes conjuntos de símbolos:

  • {{ and }} – {% and %} – {%- and -%}

Por ejemplo:

liquid
Posted on {{ date }}

En este ejemplo, traducirías solo el texto alrededor del Liquid, y no {{ date }}.

En el siguiente ejemplo verás un campo de texto con una combinación de texto sin formato, HTML y Liquid:

html
{{ author }} on {{ date }}

Aunque este ejemplo puede parecer complejo, la única parte que necesitarías traducir es la palabra on.

Anatomía de un tema de Shopify

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.

Estructura de archivos del tema

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

Estructura del tema

Un tema de Shopify incluye los siguientes directorios:

Los directorios assets están renderizáados en la carpeta del directorio Assets en el editor del tema. Contiene todos los activos utilizados en el tema, incluidas imágenes, hojas de estilo y archivos javascript.

Use el filtro asset_url para hacer referencia a un activo de tema en sus plantillas.

Puedes acceder a la funcionalidad limitada de Liquid en archivos de activos agregando una extensión .liquid cualquier archivo que no sea un archivo binario. Los casos de uso comunes incluyen archivos JavaScript (.js.liquid) y archivos CSS (.css.liquid). Los archivos con esta extensión tienen acceso a las siguientes funciones:

  • El objeto settings
  • Filtros de liquid.


El directorio config está presenta en la carpeta Configs del editor del tema. Incluye un  archivo settings_schema.json y un archivo settings_data.json.


El directorio de layout se representa como la carpeta de diseños en el editor de temas. Contiene plantillas de diseño de temas, que de forma predeterminada es el archivo theme.liquid . Todas las plantillas de Liquid dentro de la carpeta de plantillas se representan dentro del archivo theme.liquid.

Además de theme.liquid, las tiendas en Shopify Plus también tienen un archivo de diseño checkout.liquid.


El directorio de sections se representa como la carpeta Secctions en el editor de temas. Contiene sections, de un tema, que son módulos de contenido reutilizables que los usuarios del tema pueden personalizar y reordenar.


El directorio de snippets se representa como la carpeta Snippets en el editor de temas. Contiene todos los archivos de fragmentos de Liquid del tema, que son fragmentos de código a los que se puede hacer referencia en otras plantillas de un tema.

Utiliza la etiqueta Liquid render para cargar un fragmento en su tema.


El directorio de templates se representa como la carpeta Templates en el editor de temas. Contiene todas las demás templates de Liquid, incluidas las de las cuentas de los customer accounts.

Política de desarrollo de eCohete

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:

  • Implementar o resolver cambios en código no coordinadas previamente con el equipo de desarrollo.
  • Personalizar o resolver problemas de temas que contengan cambios de código significativos no hechos por nuestros desarrolladores.
  • Instalar, eliminar o modificar aplicaciones externas (aplicaciones no desarrolladas por Shopify).
  • Personalizar o resolver problemas de código de terceros (códigos no desarrollados por Shopify, incluyendo los códigos de expertos y foros)
  • Personalizar o solucionar problemas de contenido agregado vía el Editor Rich text.
  • Agregar nuevas fuentes no coordinadas previamente con el equipo de desarrollo.
  • Editar banners o sliders (incluyendo el tamaño, el recorte y la funcionalidad) no coordinadas previamente con el equipo de desarrollo.
  • Agregar ventanas emergentes no coordinadas previamente con el equipo de desarrollo.
  • Agregar botones adicionales de agregar al carrito en las páginas de producto o páginas de colección no coordinadas previamente con el equipo de desarrollo.
  • Cambiar menús desplegables por botones no coordinadas previamente con el equipo de desarrollo..
  • Ofrecer funciones avanzadas de clasificación y filtros de colecciones no coordinadas previamente con el equipo de desarrollo.
  • Ajustar un tema para que sea más ancho o más estrecho.
  • Convertir un tema no adaptable en uno adaptable a dispositivos móviles.
  • Agregar un desplazamiento infinito (mostrar más productos o contenido a medida que se desplaza en la página)
  • Editar imágenes (incluyendo recorte, ajuste de perfiles de colores, eliminación de fondos, etc.) no coordinadas previamente con el equipo de desarrollo.
  • Agregar o corregir efectos de movimiento a las imágenes de descubrimiento del producto no coordinadas previamente con el equipo de desarrollo.
  • Agregar o corregir etiquetas o emblemas en las páginas de colección
  • Añadir o corregir muestras de color.
  • Implementar cambios que proporcionen información engañosa o falsa a los clientes
  • Trasladar las características de un tema a otro no coordinadas previamente con el equipo de desarrollo.
  • Cambiar o corregir el color de los iconos de pago no coordinadas previamente con el equipo de desarrollo.
  • Editar el código para la pantalla de pago (salvo para Shopify Plus).
  • Servicios de traducción personalizados (incluyendo la Impresora de pedidos y las plantillas de notificación por correo electrónico)
  • Proporcionar, enseñar o acompañar con instrucciones de codificación o comentarios a tu personal.

¿Te resultó útil esta información?


Evalúa nuestro contenido que hemos preparado para ti, ¡nos ayuda a mejorar!