Personalizar tu tienda online con el editor de temas
Puedes utilizar el editor de temas para personalizar las áreas de tu tema, como los colores, y gestionar el contenido de tu tema con secciones y bloques. El editor de temas tiene las siguientes secciones:
- La barra de menú muestra herramientas con las que puedes descubrir más información sobre tu tema, navegar a diferentes plantillas de tu tema, como páginas de productos, ajustar la visualización del tamaño de la pantalla y gestionar tus acciones de personalización.
- El menú de la barra lateral muestra una vista de árbol de todo el contenido de la plantilla que estás viendo actualmente en la barra lateral. Puedes gestionar secciones, bloques y configuraciones desde el menú de la barra lateral.
- La ventana de vista previa muestra tu tema y se actualiza automáticamente cuando realizas cambios. Puedes seleccionar diferentes opciones de visualización en la barra de menús para previsualizar tu tema en diseños de escritorio o móviles. También puedes activar el inspector de vista previa para gestionar el contenido de una plantilla de tema en la ventana de vista previa.
En esta página
- Acceder al editor de temas
- Barra de menú
- Ver la documentación, solicitar ayuda y revisar la versión de tu tema
- Obtén ayuda para personalizaciones
- Usar accesos directos del teclado en el editor de temas
- Plantillas
- Vista previa de plantillas con recursos específicos
- Inspección de vista previa
- Ver diferentes tamaños de la pantalla en el editor de temas
- Menú de la barra lateral
- Secciones y bloques
Acceder al editor de temas
Puedes acceder al editor de temas desde tu panel de control de Shopify.
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Junto al tema que deseas editar, haz clic en Personalizar.
Barra de menú
La barra de menú contiene información sobre tu tema, un menú para acceder a más información y diferentes áreas de tu tema y controles para personalizar tu tema.
La barra de menú muestra la siguiente información adicional y opciones de navegación:
- Utiliza el botón
para volver a tu panel de control de Shopify. - Revisa el nombre de tu tema.
- Revisa el estado de tu tema. Tu tema publicado muestra la etiqueta de estado Live. Los temas no publicados muestran la etiqueta de estado Borrador.
- Utiliza el menú
para acceder a las siguientes opciones adicionales:
- Utiliza el 
Editar código para abrir el editor de código.
- Utiliza 
Editar el contenido del tema predeterminado para editar la redacción predeterminada de tu tema.
- Utiliza el 
para abrir una vista previa de tu tema.
- Utiliza el 
Ver documentación para abrir la documentación de tu tema.
- Utiliza el 
para revisar todos los atajos de teclado disponibles para el editor de temas.
- Utiliza el 
Obtén ayuda para obtener ayuda.
Puedes acceder a diferentes plantillas y diseños de mercado con el siguiente menú:
Puedes utilizar los siguientes controles de la barra de menús para personalizar tu tema:
- Activar o desactivar Sidekick.
- Activar o desactivar el inspector de vista previa.
- Cambia el tamaño de la pantalla con los controles de tamaño de la pantalla.
- Gestiona tu sesión de personalización actual con los controles deshacer y rehacer.
- Utiliza el botón Guardar para guardar tus cambios.
Ver la documentación, solicitar ayuda y revisar la versión de tu tema
Puedes ver la información disponible sobre tu tema, como la versión del tema y la información del desarrollador, así como enlaces a la documentación del tema e información de soporte en el menú de la barra de menús.
Obtén ayuda para personalizaciones
Si necesitas ayuda para realizar cambios en tu tema, puedes contactar a su desarrollador para obtener 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.
Usar accesos directos del teclado en el editor de temas
Puedes utilizar atajos de teclado para navegar y realizar acciones en el editor de temas.
| Categoría | Acción | Atajo en Windows | Atajo en macOS |
|---|---|---|---|
| General | Deshacer |
CTRL + Z
|
⌘ + Z
|
| Rehacer |
CTRL + Y
|
⌘ + Y
| |
| Guardar |
CTRL + S
|
⌘ + ⇧ + S
| |
| Ver todos los atajos |
CTRL + /
|
⌘ + /
| |
| Herramientas | Inspección de vista previa |
CTRL + SHIFT + |
|
⌘ + ⇧ + |
|
| Modo de vista previa |
⊞ + CTRL + |
|
⌘ + ⌃ + |
| |
| Sidekick |
CTRL + .
|
⌘ + .
| |
| Navegación | Secciones |
⊞ + CTRL + Z
|
⌘ + ⌃ + 1
|
| Configuración del tema |
⊞ + CTRL + Z
|
⌘ + ⌃ + 2
| |
| Aplicaciones integradas |
⊞ + CTRL + Z
|
⌘ + ⌃ + 3
| |
| Secciones y bloques | Ocultar y mostrar |
CTRL + SHIFT + H
|
⌘ + ⇧ + H
|
| Eliminar |
SHIFT + ⭠
|
⇧ + ⌫
| |
| Seleccionar anterior |
SHIFT + ←
|
⇧ + ▲
| |
| Seleccionar siguiente |
SHIFT + →
|
⇧ + ▼
| |
| Abrir elemento seleccionado |
SHIFT + ENTER
|
⇧ + ▼
| |
| Expandir todas las secciones |
CTRL + SHIFT + O
|
⌘ + ⇧ + O
| |
| Contraer todas las secciones |
CTRL + SHIFT + P
|
⌘ + ⇧ + P
|
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
Puedes obtener una vista previa para ver cómo luce tu plantilla 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.
Todavía tienes que asignar la plantilla al recurso en el panel de control de Shopify.
También puedes buscar plantillas y recursos usando la barra Búsqueda en el selector de página, en la herramienta Agregar sección o Agregar bloque, o en Aplicaciones integradas.
Pasos:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Junto al tema que deseas editar, haz clic en Personalizar.
En el menú de plantillas, selecciona la plantilla de la que deseas obtener una vista previa.
Desde el menú de la barra lateral, en la sección Vista previa, haz clic en Cambiar.
En el menú Seleccionar, elija el recurso cuya vista previa desee obtener.
Inspección de vista previa
El inspector de vista previa te permite navegar a secciones y bloques directamente desde la ventana de previsualización y encontrar la configuración correspondiente de forma más rápida e intuitiva. Con el inspector de vista previa, puedes reordenar, ocultar o duplicar secciones y bloques directamente desde la ventana de vista previa.
El inspector de vista previa está disponible para todos los temas gratuitos de Shopify y está activado de forma predeterminada. Puedes hacer clic en el botón 
para activar o desactivar el inspector de vista previa durante la sesión de edición.
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.
El inspector de vista previa muestra uno de los dos bordes siguientes alrededor de las secciones y bloques sobre los que se hace clic en la ventana de vista previa:
- La línea azul sólida indica la sección activa. La configuración correspondiente en el menú de la barra lateral aparece resaltado en gris.
- La línea azul punteada indica el bloque asociado para la sección. Puedes hacer clic en el elemento de la ventana de vista previa para abrir 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
Al utilizar el inspector de vista previa, puedes agregar secciones y bloques a tu tema directamente desde la ventana de vista previa. Para utilizar el inspector de vista previa desde la aplicación de Shopify, mantén presionada una sección para gestionarla.
| 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, mueve el cursor sobre el botón  . 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
Puedes mover, ocultar, duplicar o eliminar secciones y bloques en el editor de temas con el inspector de vista previa.
| Herramienta | Acción | Descripción |
|---|---|---|
 | Mover a la posición anterior | Haz clic en este botón para mover una sección o bloque a la posición siguiente o a la anterior mediante los iconos de flecha del inspector de vista previa. Si la sección seleccionada se encuentra en la parte superior de la página, el botón aparecerá atenuado. Del mismo modo, si la sección se encuentra en la parte inferior de la página, no podrás utilizar el botón  . |
| Mover a la posición siguiente | |
 | Duplicar sección o bloque | Haz clic en este botón para duplicar una sección o bloque y su contenido. |
 | Ocultar sección o bloque | Haz clic en este botón para ocultar una sección o un bloque. Cuando una sección o bloque está oculto, no podrás mostrarlo en el inspector de vista previa. Para mostrarlo, puedes hacer clic en el botón  de la barra de menú o en el botón del menú de la barra lateral situado junto a la sección o el bloque. |
 | Eliminar sección o bloque | Este botón elimina la sección o bloque seleccionado en el inspector de vista previa. |
Ver diferentes tamaños de la pantalla en el editor de temas
Puedes ver diferentes tamaños de pantalla en tu editor de temas. Puedes cambiar el editor de temas para que muestre los tamaños de escritorio, móvil o pantalla completa para asegurarte de que tus ediciones de temas son óptimas para diferentes tamaños de pantalla y para comprobar diseños alternativos para escritorio y móvil. Haz clic en el siguiente botón en la barra de menú para cambiar el tamaño de la pantalla:
- Haz clic en el botón
para el escritorio. - Haz clic en el botón
para dispositivos móviles. - Haz clic en el botón
para verla en pantalla completa.
Deshacer y rehacer acciones
Puedes utilizar los botones y 
para deshacer o rehacer personalizaciones no guardadas. Después de guardar los cambios, ya no podrás rehacerlas ni deshacerlas.
Si no hay ninguna personalización sin guardar para rehacer, deshacer o ambas, entonces el botón correspondiente aparece en gris.
Menú de la barra lateral
El menú de la barra lateral muestra una vista de árbol de todo el contenido de la plantilla que estás viendo actualmente en la barra lateral. Puedes gestionar secciones, bloques y configuraciones desde el menú de la barra lateral.
Modos de la barra lateral
El editor de temas ofrece dos modos 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.
Para ver el editor de temas en modo de una sola barra lateral en una pantalla grande, reduce la ventana del navegador hasta que el panel de configuración se coloque encima de la barra lateral de navegación o desaparezca.
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.
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 componen el encabezado o pie de página están contraer por defecto. Puedes hacer clic en el botón 
junto al nombre de una sección para mostrar su contenido.
Grupos de sección
Las secciones se agrupan en las siguientes áreas para cada plantilla de página de tu tema:
- El área Encabezado incluye tu encabezado, barra de anuncios y cualquier aplicación o Liquid personalizado.
- El área Plantilla incluye secciones que conforman el cuerpo principal de tu página. Por ejemplo, las secciones de plantillas pueden incluir artículos de blog, collage, listas de colecciones o código Liquid personalizado.
- El área Pie de página incluye el pie de página, el suscriptor de correo electrónico y el código Liquid personalizado o las aplicaciones que tenga.
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, la página de inicio y cualquier otra página.
Expandir y contraer secciones y bloques
Expande un nodo de sección con el botón para ver sus bloques o contráelo con el botón 
para ocultar los bloques. Puedes hacer clic en cualquier sección para ver su configuración.
Mover secciones y bloques
Puedes mover una sección o un bloque de un área de la página a otra utilizando el botón 
para hacer clic y arrastrar la sección o el bloque y, a continuación, soltarlos en otra ubicación disponible.
Si intentas mover una sección o bloque a un sitio que no lo permite, la sección o bloque volverán a la ubicación original.
Eliminar secciones y bloques
Puedes eliminar una sección o bloque de una plantilla de las dos formas siguientes:
Mueve el cursor junto al nombre de la sección y, a continuación, haz clic en el botón
: 
Haz clic en el nombre de la sección y, a continuación, haz clic en Eliminar sección en la información de configuración de la sección:
Pasos:
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Junto al tema que deseas editar, haz clic en Personalizar.
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 estas editando un tema publicado, haz clic en Publicar para guardar tus cambios y activarlos en tus tienda.
Ocultar secciones y bloques
Puedes ocultar cualquier sección o bloque usando el botón :
