Editar tu tema
Puedes editar tu tema para personalizar el contenido, el diseño, la tipografía y los colores de tu tienda online. Cada tema ofrece secciones y configuraciones que te permiten cambiar la apariencia de tu tienda sin editar ningún código.
En esta página
- Antes de personalizar tu tema
- Editor de temas
- Acceder al editor de temas
- Inspección de vista previa
- Modos de la barra lateral
- Grupos de sección
- Secciones y bloques
- Plantillas
- Edición en línea de datos personalizados
- Ver documentación, solicitar ayuda y revisar la versión de tu tema
- Obtén ayuda para personalizaciones
Antes de personalizar tu tema
Para prepararte para personalizar el tema, completa las siguientes tareas recomendadas:
- Duplica tu tema para crear una copia de seguridad. Así será fácil descartar tus cambios y comenzar nuevamente si fuese necesario.
- Asegúrate de comprender qué nivel de soporte está disponible.
- Leer más sobre los requerimientos y las prácticas correctas para subir imágenes.
Editor de temas
El editor de temas muestra una vista en árbol de todo el contenido de la plantilla que estás viendo actualmente en la barra lateral. Expande un nodo de la sección usando el ícono de expandir ▸ para ver sus bloques, o contráelo usando el ícono de contraer ▾ para ocultarlos. Puedes hacer clic en cualquier sección para ver su configuración.
Acceder al editor de temas
- Desde el panel de control de Shopify, ve a Tienda online > Temas.
- Junto al tema que deseas editar, haz clic en Personalizar.
- Haz clic en Secciones.
Inspección de vista previa
La inspección de vista previa es una nueva función del editor de temas. Te permite navegar a secciones y bloques directamente desde la ventana de vista previa y encontrar la configuración correspondiente de forma más rápida e intuitiva. Con la inspección de vista previa, puedes reordenar, ocultar o eliminar secciones y bloques directamente desde la ventana de vista previa.
La inspección de vista previa está disponible para todos los temas gratuitos de Shopify y está activada de forma predeterminada. Durante la sesión de edición, puedes activarla o desactivarla.
Cuando la inspección de vista previa está activada, puedes hacer clic en cualquier elemento contorneado para abrir la configuración correspondiente. Cuando está activada en un dispositivo móvil, puedes hacer clic en cualquier elemento para seleccionar la configuración correspondiente. También puedes abrir la hoja inferior para editarla con esta configuración seleccionada.
La inspección de vista previa muestra dos bordes diferentes alrededor de las secciones y bloques en los que se haya hecho clic en la ventana de vista previa:
- Línea azul sólida: la sección activa. La configuración correspondiente de la barra lateral se muestra resaltada en gris.
- Línea de puntos azul: un bloque asociado para la sección. Al hacer clic en el elemento en la ventana de vista previa, se abre la configuración del bloque o sección.
Al hacer clic en cualquier parte del sitio web en la ventana de vista previa, se cargan las configuraciones correspondientes en la barra lateral. En un dispositivo móvil, al tocar dos veces se navegará por el sitio como lo haría un cliente.
Agregar secciones y bloques en la inspección de vista previa
Mientras usas el inspector de vista previa, puedes agregar secciones y bloques a tu tema directamente desde la ventana de vista previa. En el móvil, puedes agregar, duplicar, ocultar, mover y eliminar secciones usando el modo de edición en la hoja inferior.
| Herramienta | Descripción |
|---|---|
| Agregar sección | El botón Agregar sección se muestra en las partes superior e inferior de la sección seleccionada. Haz clic en Agregar sección para insertar una nueva sección encima o debajo de la seleccionada. |
| Agregar bloque | El botón Agregar bloque se muestra al pasar el cursor sobre un bloque existente. Para agregar un bloque, haz clic en el ícono +. Aparecerá un menú emergente con el tema y los bloques de la aplicación que se pueden agregar a la sección seleccionada. Haz clic en el bloque que deseas agregar. La ventana de configuración del nuevo bloque se cargará en la barra lateral derecha. |
Herramientas de inspección de vista previa
La inspección de vista previa permite mover, ocultar, duplicar o eliminar secciones y bloques desde el editor de temas.
| Herramienta | Descripción |
|---|---|
| Mover a la posición siguiente/anterior | Puedes mover una sección o un bloque a la posición siguiente o anterior mediante los íconos de flecha de la inspección de vista previa. Si la sección seleccionada está en la parte superior de la página, el botón Mover a la posición anterior se mostrará atenuado. Del mismo modo, si la sección está en la parte inferior de la página, no podrás usar el botón Mover a la posición siguiente. |
| Duplicar sección o bloque | Haz clic en el ícono de copiar para duplicar una sección o bloque y su contenido. |
| Ocultar sección o bloque | Haz clic en el ícono del ojo para ocultar una sección o un bloque. Cuando se oculta una sección o un bloque, no se puede mostrar en la inspección de vista previa. Puedes hacer clic en el botón Deshacer de la barra de inicio o cerrar el panel de configuración para volver a la página de inicio del editor de temas, donde verás las secciones y los bloques ocultos en la barra lateral con el ícono del ojo tachado. Haz clic en este ícono para mostrar la sección o el bloque. |
| Eliminar sección o bloque | Haz clic en el ícono de papelera para eliminar la sección o el bloque seleccionados en la inspección de vista previa. |
Modos de la barra lateral
El editor de temas ofrece dos medios para aprovechar todo el espacio de tu pantalla.
El modo de barra lateral doble es para ventanas de navegador más anchas y pantallas más grandes, mientras que el modo de barra lateral única es para ventanas de navegador más estrechas y pantallas más pequeñas. El modo de barra lateral determina en qué lugar del editor se muestra el panel de configuración.
Modo de doble barra lateral
Si tienes una pantalla de más de 1600 píxeles de ancho y la ventana de tu navegador está completamente expandida o se expande hasta al menos 1600 píxeles de ancho, verás dos barras laterales. La barra lateral izquierda contiene el panel de navegación y la derecha contiene el panel de configuración.
Modo de una sola barra lateral
Los navegadores más estrechos solo tienen una barra lateral con el fin de disponer de espacio para la vista previa del tema. Cuando haces clic en una sección o bloque para editarlo, el panel de configuración se abrirá encima del panel de navegación en la barra lateral.
Grupos de sección
Las secciones se agrupan en las siguientes áreas en cada plantilla de página:
- Encabezado: esto incluye el encabezado, la barra de anuncios y cualquier aplicación o Liquid personalizados.
- Plantilla: incluye secciones que forman el cuerpo principal de la página. Por ejemplo, las secciones de plantillas pueden incluir artículos de blog, collage, listas de colecciones o Liquid personalizado.
- Pie de página: esto incluye el pie de página, suscripción de correo electrónico y cualquier aplicación o Liquid personalizados.
El encabezado y el pie de página se comparten en todas las páginas de la tienda online. Por ejemplo, si agregas un bloque Liquid personalizado al encabezado, este se mostrará en todas las páginas de producto, página de inicio y cualquier otra página. Puedes reordenar las secciones según sea necesario.
Secciones y bloques
En la lista de secciones y bloques, se muestran de forma predeterminada todos los bloques de las secciones de una página.
Las secciones que ocupan el encabezado o pie de página se contraen de forma predeterminada, pero puedes verlas si haces clic en el ícono de expandir ▸, situado junto al nombre de la sección.
Mover secciones y bloques
Puedes mover una sección o un bloque de un área de la página a otra área usando el ícono de ⋮⋮ para hacer clic y arrastrar la sección o bloque y luego soltarla en otra ubicación disponible.
Si intentas mover una sección o bloque donde no está permitida, la sección o bloque volverá a la ubicación original.
Eliminar secciones
Puedes eliminar una sección o bloque de una plantilla desde la pantalla de configuración de cada elemento. El botón Eliminar sección se muestra en la parte inferior de la configuración de una sección.
Pasos:
- En la barra lateral del editor de temas, haz clic en la sección o el bloque que deseas eliminar.
- Haz clic en Eliminar sección o Eliminar bloque.
- Haz clic en Guardar. Si estás editando un tema publicado, haz clic en Publicar para guardar tus cambios y activarlos en tu tienda.
Ocultar bloques
Puedes ocultar cualquier sección o bloque usando el ícono del ojo.
Plantillas
Puedes acceder a todas las plantillas de tu tema desde el selector de página, situado en la barra superior del editor de temas.
Si está empleando un tema de Online Store 2.0, también puede crear una nueva plantilla directamente desde el selector de página haciendo clic en la opción Nueva plantilla.
Vista previa de plantillas con recursos específicos
Cuando visualices una plantilla, podrás obtener una vista previa del aspecto que tendrá con cualquier recurso compatible de tu tienda. Por ejemplo, si estás visualizando una plantilla de producto, puedes probarla con cualquier producto que haya en tu tienda.
Pasos:
- Desde el selector de página del editor de temas, elija la plantilla cuya vista previa desee obtener.
- Desde el panel de navegación, en la sección Vista previa, haga clic en Cambiar.
- En el menú Seleccionar, elija el recurso cuya vista previa desee obtener.
Deshacer y rehacer acciones
Los botones Deshacer y Rehacer se encuentran en la parte superior derecha del editor de temas.
Edición en línea de datos personalizados
Cuando trabajas con datos personalizados para crear páginas de metaobjetos, puedes editar los metacampos y metaobjetos directamente en línea sin tener que navegar al panel de control para realizar cambios. Esto funciona para los metacampos de imagen, video, color, producto, página, colección y texto.
Pasos:
- Selecciona una configuración compatible en el tema al que el metaobjeto haga referencia.
- Selecciona y edita el valor del metacampo en la entrada del metaobjeto desde el panel de configuración.
- Guarda el trabajo y la página de destino se actualizará automáticamente con la información modificada.
Ver documentación, solicitar ayuda y revisar la versión de tu tema
Los enlaces a la documentación de tu tema y a la información de ayuda están en el menú Más ⋯ de la barra de menús. En este menú, también puedes verificar la versión del tema y la información del creador.
Obtén ayuda para personalizaciones
Si necesitas ayuda para realizar cambios en tu tema, puedes contactar al desarrollador de tu tema para recibir ayuda.
Para ver qué otros recursos están disponibles para ayudarte con las personalizaciones de temas, dirígete a la sección Recursos adicionales para soporte de temas.