Descripción general de las funciones del editor de temas

Con el editor de temas puedes personalizar áreas del tema, como los colores, y gestionar el contenido con secciones y bloques.

Acceder al editor de temas

Puedes acceder al editor de temas desde el panel de control de Shopify.

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.

2. Junto al tema que quieres editar, haz clic en Editar tema.

Secciones del diseño en el editor de temas

El editor de temas tiene las siguientes secciones:

• La barra de menú contiene botones de navegación a la izquierda para cambiar entre secciones, configuración del tema y aplicaciones incrustadas; el nombre del tema, los menús de mercado y plantilla en el centro; y controles de personalización a la derecha.
• La barra lateral muestra una vista de árbol de todo el contenido de la plantilla que estás viendo en ese momento. Puedes gestionar las secciones y los bloques, las aplicaciones incrustadas y la configuración desde la barra lateral. La barra lateral se puede contraer.
• En la ventana de vista previa se muestra tu tema, que se actualiza automáticamente cuando haces cambios. Puedes activar una vista previa para móviles o usar el inspector de vista previa para gestionar el contenido de una plantilla de tema en la ventana correspondiente.

Barra de menús

La barra de menú muestra la navegación, la información del tema y los controles para personalizarlo.

Navegación de la barra lateral

En el lado izquierdo de la barra de menú, puedes alternar entre las siguientes vistas en la barra lateral:

• para gestionar las secciones y los bloques de tu plantilla actual.
• para gestionar la configuración global de tu tema, como los colores, la tipografía y el diseño.
• para gestionar las aplicaciones que están incrustadas en tu tema.

Para ocultar la barra lateral y obtener una vista previa del tema en ancho completo, haz clic en el botón activo nuevamente para anular la selección. Si ambos paneles están visibles, al hacer clic en el botón activo se contraen ambos simultáneamente.

Detalles del tema, mercado y menús de plantilla

En el centro de la barra de menú, puedes encontrar lo siguiente:

• El nombre del tema y su estado. En tu tema publicado se muestra la etiqueta de estado Activo . En los temas no publicados se muestra la etiqueta de estado Borrador . Haz clic en el nombre del tema para acceder a las siguientes opciones:
  • Usa Editar código para abrir el editor de código.
  • Usa Editar el contenido predeterminado del tema para editar el texto predeterminado del tema.
  • Usa para abrir una vista previa del tema.
  • Usa Ver la documentación para abrir la documentación del tema.
  • Usa para revisar todos los atajos de teclado disponibles en el editor de temas.
  • Usa Obtener soporte para obtener soporte.
• El menú de mercado, para previsualizar y personalizar tu tema para diferentes mercados.
• El menú de plantilla, para navegar entre las diferentes plantillas de página de tu tema.

Accesos directos de personalización

En la barra de menús puedes usar los siguientes controles para personalizar el tema y gestionar los cambios:

• Activa o desactiva Sidekick para ayudarte con las personalizaciones del tema.
• Activa o desactiva el inspector de vista previa.
• Activa el botón de vista previa para obtener una vista previa de tu tema en una pantalla móvil.
• Gestiona la sesión de personalización actual con los controles de deshacer y rehacer.
• Usa el botón Guardar para guardar los cambios.

Si no hay personalizaciones sin guardar que puedas deshacer o rehacer, el botón correspondiente está inactivo.

Barra lateral

La barra lateral muestra una vista de árbol de todo el contenido de la plantilla que estás viendo actualmente. Puedes gestionar las secciones y los bloques y la configuración del tema desde la barra lateral. Para contraer la barra lateral, haz clic de nuevo en el botón de navegación activo en la barra de menú para desactivarla.

Tu tema puede tener una configuración condicional que se muestre en la barra lateral en función de otras opciones de configuración que estén activas. Por ejemplo, si el tema tiene un bloque con una configuración para agregar un video o una imagen, el selector de imágenes o el enlace del video podría ser una configuración condicional que solo se muestre después de haber seleccionado Imagen como el tipo de archivo multimedia.

Modos de la barra lateral

El editor de temas tiene dos modos para aprovechar todo el espacio de la pantalla.

El modo de barra lateral doble es para ventanas de navegador más anchas y pantallas más grandes, y 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 dónde se muestra el panel de configuración en el editor.

Modo de doble barra lateral

Si la ventana del navegador tiene al menos 1.600 píxeles de ancho, tendrás dos paneles. El panel izquierdo contiene la estructura de la página con sus secciones y bloques, y el panel derecho contiene la configuración de la sección o el bloque seleccionados. Para contraer el panel derecho, anula la selección de las secciones.

Para ver el editor de temas en el modo de barra lateral única en una pantalla grande, reduce el ancho de la ventana de tu navegador hasta que el editor cambie al diseño apilado.

Modo de una sola barra lateral

En pantallas más estrechas, el editor usa un diseño apilado. Al hacer clic en una sección o bloque, el panel de configuración se desliza hacia arriba desde la parte inferior de la pantalla en lugar de cubrir la estructura de la página. Puedes arrastrar el divisor para ajustar la división entre la estructura de la página y la configuración, de modo que ambas se mantengan visibles en todo momento.

Vista previa del tema

Puedes obtener una vista previa del diseño móvil de tu tema si haces clic en el botón de la barra de menú. Para regresar a la vista previa de escritorio, vuelve a hacer clic en el botón de la versión móvil.

Para tener una vista previa de tu tema en ancho completo, haz clic en el botón de navegación de la barra lateral activo para contraer la barra lateral. Si ambos paneles están visibles, esto los contrae simultáneamente, lo que te ofrece una vista previa en ancho completo de la tienda online.

Deshacer y rehacer cambios no guardados

Puedes usar los botones y para deshacer o rehacer personalizaciones no guardadas. Después de guardar los cambios, ya no podrás rehacer ni deshacer.

Usar atajos de teclado en el editor de temas

Puedes usar atajos de teclado para navegar y realizar acciones en el editor de temas.