Editar tu tema

Enlaces destacados

1. Editar tu tema
2. Documentación de Shopify sobre el editor de temas
3. Duplicar tu tema
4. Documentación de Shopify sobre la asistencia para temas
5. Subir imágenes
6. Temas
7. Editor de código
8. Editar el texto predeterminado del tema
9. Vista previa del tema
10. Documentación del tema

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Usa el editor de temas de Shopify para ajustar el contenido, el diseño, la tipografía y los colores de tu tema Align sin editar código. Las secciones y los ajustes te permiten adaptar tu tienda mientras trabajas en una vista previa en directo.

Antes de personalizar tu tema

Prepárate antes de realizar cambios importantes para poder experimentar con confianza.

1. Duplica tu tema para crear una copia de seguridad. Si es necesario, puedes descartar los cambios y volver a empezar desde la copia.
2. Revisa el nivel de asistencia disponible
3. Revisa los requisitos y las prácticas recomendadas para subir imágenes

Consejo

Duplica Align antes de realizar cambios importantes en el diseño o el contenido, especialmente cuando edites tu tema publicado.

Acceder al editor de temas

El editor de temas muestra una vista de árbol del contenido de la plantilla que estás viendo. Selecciona una sección o un bloque para abrir sus ajustes. Usa ▸ para expandir una sección y ▾ para contraerla.

1. En el administrador de Shopify, ve a Online Store > Themes
2. Junto al tema Align que quieres editar, haz clic en Customize.

Usar la barra de menús

La barra de menús proporciona información sobre el tema, herramientas de navegación y edición, y controles para guardar.

Usa la barra de menús para:

1. Volver al administrador de Shopify y revisar el nombre y el estado del tema. Un tema publicado aparece como Live; los temas no publicados aparecen como Draft.

2. Abrir el menú de acciones para:

   • Usar Edit code para abrir el editor de código
   • Usar Edit default theme content para editar el texto predeterminado del tema
   • Abrir una vista previa del tema
   • Usar View documentation para abrir la documentación del tema.
   • Revisar los atajos de teclado disponibles.
   • Usar Get support para obtener asistencia

3. Cambiar entre mercados y plantillas

4. Activar o desactivar Sidekick o el inspector de vista previa

5. Cambiar la vista previa con los controles de tamaño de pantalla, usar los controles para deshacer y rehacer y guardar los cambios.

Ver la documentación, la asistencia y los detalles del tema

Abre el menú de la barra de menús para ver los detalles del tema, incluida su versión y la información del desarrollador. El mismo menú proporciona enlaces a la documentación del tema y a la información de asistencia.

Obtener ayuda con las personalizaciones

Para obtener ayuda sobre cómo usar o personalizar Align, empieza por la documentación de Company XYZ y contacta con el servicio de asistencia de Company XYZ. Para preguntas sobre el administrador de Shopify, la facturación, la cuenta o la plataforma, usa las opciones de asistencia de Shopify. También puedes consultar las indicaciones de Shopify sobre cómo contactar con el desarrollador del tema para obtener asistencia y los recursos adicionales para obtener asistencia sobre temas

Usar atajos de teclado

Los atajos de teclado pueden acelerar las tareas habituales de navegación y edición 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	Inspector de vista previa	CTRL • SHIFT • │	⌘ • ⇧ • │
	Modo de vista previa	⊞ • CTRL • │	⌘ • ⌃ • │
	Sidekick	CTRL • .	⌘ • .
Navegación	Secciones	⊞ • CTRL • Z	⌘ • ⌃ • 1
	Ajustes del tema	⊞ • CTRL • Z	⌘ • ⌃ • 2
	Inserciones de aplicaciones	⊞ • 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

Elegir y previsualizar plantillas

Usa el selector de páginas de la barra superior para acceder a las plantillas de tu tema Align.

Con un tema compatible, puedes crear una plantilla directamente desde el selector de páginas seleccionando New template.

Previsualizar una plantilla con un recurso específico

Puedes previsualizar una plantilla compatible con cualquier recurso coincidente de tu tienda. Por ejemplo, puedes previsualizar una plantilla de producto con distintos productos para comprobar cómo se muestra su contenido. Aun así, debes asignar la plantilla al recurso en el administrador de Shopify.

Puedes buscar plantillas y recursos desde la barra Search del selector de páginas, Add section, Add block o App embeds.

1. En el administrador de Shopify, ve a Online Store > Themes
2. Junto al tema Align que quieres editar, haz clic en Customize.
3. En el menú de plantillas, selecciona la plantilla que quieres previsualizar.
4. En la sección Preview del menú lateral, haz clic en Change.
5. En el menú Select, elige el recurso que quieres previsualizar.

Usar el inspector de vista previa

El inspector de vista previa te permite seleccionar secciones y bloques directamente en la vista previa para encontrar rápidamente sus ajustes. También puedes reordenar, ocultar o duplicar secciones y bloques desde la ventana de vista previa.

Cuando el inspector de vista previa está activo, selecciona un elemento delimitado para abrir sus ajustes. En un dispositivo móvil, selecciona un elemento y abre la hoja inferior para editar sus ajustes.

El contorno indica lo que has seleccionado:

1. Una línea azul continua identifica la sección activa. Sus ajustes aparecen resaltados en gris en la barra lateral.
2. Una línea azul de puntos identifica un bloque asociado con la sección seleccionada. Selecciónalo para abrir los ajustes del bloque o de la sección.

Al seleccionar un área en la vista previa, sus ajustes se cargan en la barra lateral. En un dispositivo móvil, toca dos veces para navegar por el sitio como lo haría un cliente.

Añadir secciones y bloques desde la vista previa

Puedes añadir secciones y bloques directamente desde el inspector de vista previa. En la aplicación de Shopify, mantén pulsada una sección para gestionarla.

Herramienta	Description
Add section	El botón Add section aparece encima y debajo de la sección seleccionada. Selecciónalo para insertar una sección encima o debajo de la sección actual.
Add block	El botón Add block aparece cuando pasas el cursor sobre un bloque. Mueve el cursor sobre el botón, elige un bloque de tema o de aplicación disponible y edita el bloque nuevo en la barra lateral derecha.

Gestionar elementos desde la vista previa

Usa el inspector de vista previa para mover, ocultar, duplicar o eliminar secciones y bloques.

Comprobar distintos tamaños de pantalla

Cambia la vista previa entre los tamaños de escritorio, móvil y pantalla completa para comprobar cómo funcionan los cambios en distintos diseños. Usa los botones de tamaño de pantalla de la barra de menús para seleccionar escritorio, móvil o pantalla completa.

Deshacer y rehacer cambios

Usa los botones undo y redo para revertir o restaurar las personalizaciones no guardadas. Después de guardar, ya no podrás deshacer ni rehacer esos cambios. Los botones aparecen atenuados cuando no hay cambios disponibles para deshacer o rehacer.

Trabajar con la barra lateral

La barra lateral muestra una vista de árbol del contenido de la plantilla actual. Úsala para gestionar secciones, bloques y sus ajustes.

Modos de la barra lateral

El editor usa una o dos barras laterales según el ancho de pantalla disponible.

1. El modo de doble barra lateral se usa en pantallas más anchas. El panel de navegación aparece a la izquierda y el panel de ajustes a la derecha.
2. El modo de barra lateral única se usa en ventanas del navegador más estrechas para conservar más espacio para la vista previa. El panel de ajustes se abre sobre el panel de navegación al seleccionar una sección o un bloque.

Modo de doble barra lateral

Cuando la pantalla y la ventana del navegador completamente expandida tienen al menos 1600 píxeles de ancho, el editor muestra dos barras laterales.

Para usar el modo de barra lateral única en una pantalla grande, reduce el ancho de la ventana del navegador hasta que el panel de ajustes se superponga a la barra lateral de navegación o desaparezca de ella.

Modo de barra lateral única

En ventanas del navegador más estrechas, el editor muestra una barra lateral para dejar más espacio para la vista previa. Selecciona una sección o un bloque para abrir sus ajustes sobre el panel de navegación.

Gestionar secciones y bloques

La barra lateral muestra las secciones y los bloques de la página actual. Los bloques se muestran de forma predeterminada, mientras que las secciones de encabezado y pie de página aparecen contraídas de forma predeterminada.

Entender los grupos de secciones

Cada plantilla de página organiza las secciones en estas áreas:

1. Header incluye el encabezado, la barra de anuncios y cualquier aplicación o Liquid personalizado.
2. Template contiene el contenido principal de la página, como publicaciones del blog, collages, listas de colecciones o Liquid personalizado.
3. Footer incluye el pie de página, el registro para recibir correos electrónicos y cualquier aplicación o Liquid personalizado.

Los cambios en el encabezado y el pie de página se aplican a las páginas de toda la tienda. Por ejemplo, el Liquid personalizado añadido al encabezado aparece en las páginas de productos, la página de inicio y otras páginas.

Expandir y contraer elementos

Selecciona el botón situado junto al nombre de una sección para mostrar u ocultar su contenido. Selecciona una sección o un bloque para abrir sus ajustes.

Mover secciones y bloques

Arrastra una sección o un bloque mediante el controlador ::: y suéltalo en una ubicación disponible. Si la ubicación no permite ese elemento, este vuelve a su posición original.

Eliminar secciones y bloques

Puedes eliminar una sección o un bloque de cualquiera de estas formas:

1. Pasa el cursor junto al nombre de la sección y selecciona el botón de eliminar.

   

2. Selecciona la sección y, en sus ajustes, elige Remove section.

   

Para eliminar un elemento de la barra lateral:

1. En el administrador de Shopify, ve a Online Store > Themes
2. Junto al tema Align que quieres editar, haz clic en Customize.
3. En la barra lateral, selecciona la sección o el bloque que quieres eliminar.
4. Haz clic en Remove section o Remove block.
5. Haz clic en Save. Si estás editando un tema publicado, haz clic en Publish para guardar los cambios y publicarlos en tu tienda.

Ocultar secciones y bloques

Selecciona el botón 👁️ para ocultar una sección o un bloque.

Notas de uso

1. Protege el punto de partida. Crea una copia del tema antes de experimentar con cambios importantes.
2. Previsualiza el contenido relevante. Prueba las plantillas con los productos, las colecciones u otros recursos que mostrarán.
3. Comprueba los diseños adaptables. Revisa las vistas previas de escritorio y móvil antes de guardar o publicar.
4. Recuerda las áreas compartidas. Los cambios en el encabezado o el pie de página afectan a las páginas de toda la tienda.
5. Guarda de forma intencionada. Deshacer y rehacer solo funcionan con cambios no guardados.