Secciones y bloques

Puedes usar secciones del tema a fin de crear el diseño que deseas para tu tienda online. Las secciones están hechas de diferentes tipos de bloques y cada uno tiene una función específica, como texto, botones, imágenes individuales, un collage de imágenes o enlaces.

Las secciones y bloques brindan flexibilidad en la forma en que organizas tu contenido y te permiten controlar el estilo y la sensación de tu tienda online sin la necesidad de editar el código, e incluye las siguientes opciones de personalización:

Puedes reorganizar las secciones en tus plantillas y reorganizar los bloques dentro de las secciones.
Las secciones y bloques pueden tener configuraciones de personalización específicas.
Puedes conectar secciones y bloques compatibles para mostrar información dinámica en tu tienda online a partir de datos personalizados, como agregar instrucciones de cuidado para tus productos. Más información sobre cómo conectar fuentes dinámicas.

Las secciones y bloques que están disponibles en el editor de temas dependen de tu tema y versión del tema. Por ejemplo, tu tema puede tener un bloque de diapositivas que solo puedes agregar a una sección de presentación de diapositivas, y un bloque de texto de encabezado que puedes agregar a todas las secciones de tu tema. Para ver más información sobre qué opciones están disponibles para ti, consulta la documentación de tu tema.

Límites máximos de sección y bloque

Las secciones y bloques tienen las siguientes limitaciones máximas:

Cada plantilla puede tener hasta 25 secciones.
Cada sección puede tener hasta 50 bloques. La cantidad exacta de bloques y la cantidad de cada tipo de bloque que puedes agregar a cada sección dependen de las fuentes de la sección y del bloque, y las especifica el diseñador de temas para tu tema. Por ejemplo, si tu tema tiene una sección de suscripción de correo electrónico, es posible que solo puedas agregar un bloque de formulario de correo electrónico.
Los bloques compatibles con el anidamiento pueden tener hasta 8 niveles de bloques anidados.

En esta página

Fuentes de bloques

Dependiendo de la estructura de tu tema y de las aplicaciones que instalaste, tu tema puede contener una variedad de secciones que aceptan bloques de diferentes fuentes. Cuando agregas un bloque a una sección, todos los bloques disponibles para esa sección se muestran en el selector de bloques. Dependiendo de tu tema y su versión, puedes agregar los siguientes tipos de bloques a las secciones de tu tema:

Los bloques de aplicaciones son bloques que agregan funcionalidad a tu tema. Puedes usar un bloque de aplicaciones para cambiar la posición de las áreas de tu tema agregadas por las aplicaciones instaladas a un área específica de una página en tu tema.
Los bloques de sección son bloques que se definen dentro de una sección específica
Los bloques de temas son bloques que se definen dentro de tu tema y pueden tener una funcionalidad dinámica, como el anidamiento.

Tu tema puede contener algunas secciones que usan bloques de sección y otras que usan bloques de tema. Una misma sección puede aceptar bloques de tema o bloques de sección, pero no una mezcla ambos.

La disponibilidad de bloques de aplicaciones dentro de secciones depende de la funcionalidad de la aplicación y de si la sección admite bloques de aplicaciones.

Bloques de secciones

Los bloques de sección son bloques diseñados para una sección específica. Una sección puede tener límites para los tipos de bloques de sección y limitar el número de cierto tipo de bloque que puedes agregar.

Ejemplo de una sección con bloques de sección

Por ejemplo, imaginemos que tu tema tiene una sección de suscripción de correo electrónico. Puedes usar esta sección para agregar un formulario de suscripción al boletín para que los clientes puedan suscribirse a él. Después de agregar la sección suscripción de correo electrónico, puedes agregar uno de cada uno de los siguientes bloques:

Un bloque de formulario de correo electrónico
un bloque de título;
un bloque de subtítulo

Si agregas el bloque de formulario de correo electrónico y haces clic en + Agregar bloque para agregar otro bloque, el bloque de formulario de correo electrónico ya no se mostrará como opción en el selector de bloques. Esta limitación ayuda a evitar cualquier problema al capturar el correo electrónico del cliente y garantiza que este pueda introducir s dirección fácilmente.

Si agregaste los tres bloques disponibles para la sección Suscripción de correo electrónico, el selector de bloques mostrará un mensaje que indica que se utilizaron todos los bloques disponibles.

Bloques de tema

Los bloques de tema son bloques que se definen dentro de tu tema y pueden tener una funcionalidad dinámica, como el anidamiento. Las secciones que aceptan bloques de tema pueden aceptar una variedad de bloques diferentes, según la estructura de la sección. Una sección que acepta bloques de tema podría aceptar todos los bloques de tema disponibles, un subconjunto específico de bloques o bloques únicos para esa sección. Los bloques de temas también pueden tener los siguientes comportamientos:

Algunos bloques admiten el anidamiento, para que puedas anidar hasta 8 niveles de bloques dentro de otros bloques.
Algunas secciones tienen bloques obligatorios. Puedes personalizar u ocultar estos bloques, pero no puedes reorganizarlos ni eliminarlos.
Algunos bloques se muestran automáticamente en una sección cuando se cumplen ciertas condiciones.

Ejemplo de una sección con bloques de tema

Por ejemplo, tu tema tiene una sección de presentación de diapositivas con bloques de tema.

En la sección de presentación de diapositivas de tu tema, cuando haces clic en + Agregar bloque puedes seleccionar un bloque de diapositivas desde el selector de bloques. No están disponibles otros tipos de bloques. Si intentas agregar un bloque de diapositiva a otra sección de tu tema, como una sección de banner de imagen, diapositiva no estará disponible. Este es un ejemplo de bloque restringido.

Después de agregar un bloque de diapositivas a la sección presentación de diapositivas, puedes hacer clic en + Agregar bloque para agregar bloques adicionales a cualquier bloque de diapositivas en la sección Presentación de diapositivas, como un Encabezado, Imagen, Botón. Estos bloques están anidados en la diapositiva. Este es un ejemplo de un bloque anidado.

Si agregas un segundo bloque de diapositivas a la sección Presentación de diapositivas, el tema agregará automáticamente un bloque de Controles de la presentación de diapositivas. Este bloque muestra botones en los que los visitantes de tu sitio pueden hacer clic para navegar de una diapositiva a otra. Puedes personalizar el estilo de los botones u ocultar los controles, pero no puedes eliminar el bloque. Este es un ejemplo de un bloque obligatorio que se muestra condicionalmente.

Compatibilidad de bloques de tema

Para acceder a bloques de tema, tu tema debe tener secciones compatibles con bloques de tema. Puedes verificar si tu tema admite bloques de tema en el código de tu tema. Si hay un directorio de bloques en la barra lateral del editor Liquid, estás utilizando un tema compatible con bloques de temas. También puedes revisar la documentación de tu tema.

Pasos:

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Junto al tema que desees verificar, haz clic en el botón ... y luego en Editar código.
En la barra lateral, busca la carpeta de bloques.

Personaliza las plantillas de tu tema con secciones y bloques

Cuando abres el editor de temas, la página de inicio de tu tienda se carga de forma predeterminada. Puedes usar el menú desplegable para seleccionar una plantilla diferente, como productos, colecciones, páginas o blogs. También puedes usar la barra de búsqueda del menú desplegable de la plantilla a fin de buscar una plantilla específica. Cuando seleccionas una plantilla, se carga en el editor de temas y cualquier cambio que realices se visualiza de forma previa en el editor.

Agregar una sección

Agrega una nueva sección a cualquier página de tu tienda online.

Pasos:

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Personaliza tu página de inicio o haz clic en el menú desplegable Página de inicio y, luego, selecciona la plantilla a la que deseas agregar una sección.
En la barra lateral, haz clic en + Agregar sección y, luego, sigue uno de los pasos a continuación:
- Selecciona una sección de la lista.
- Usa el campo Buscar secciones para buscar una sección específica y, luego, selecciónala.
Personaliza tu sección nueva. Para ello, sigue cualquiera de los pasos a continuación:
- Edita la configuración y el contenido de tu nueva sección.
- Edita la configuración y el contenido de los bloques predeterminados que se cargan con la sección.
- Haz clic en + Agregar bloque para agregar un bloque nuevo.
Opcional: Para reorganizar el orden de las secciones de tu página, pasa el cursor sobre el nombre de la sección y, luego, haz clic en el ícono ⋮⋮ y arrástralo.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Personaliza tu página de inicio o toca el menú desplegable Página de inicio y, luego, selecciona la plantilla a la que deseas agregar una sección.
Toca Secciones, Agregar sección y, luego, sigue uno de los pasos a continuación:
- Selecciona una sección de la lista y, luego, toca Agregar.
- Toca el ícono de lupa para buscar una sección específica, seleccionala y, luego, toca Agregar.
Personaliza tu sección nueva. Para ello, sigue cualquiera de los pasos a continuación:
- Edita la configuración y el contenido de tu nueva sección.
- Edita la configuración y el contenido de los bloques predeterminados que se cargan con la sección.
- Toca Agregar bloque para agregar un bloque nuevo.
Opcional: Para reorganizar el orden de las secciones de tu página, toca y arrastra la sección.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Personaliza tu página de inicio o toca el menú desplegable Página de inicio y, luego, selecciona la plantilla a la que deseas agregar una sección.
Toca Secciones, Agregar sección y, luego, sigue uno de los pasos a continuación:
- Selecciona una sección de la lista y, luego, toca Agregar.
- Toca el ícono de lupa para buscar una sección específica, seleccionala y, luego, toca Agregar.
Personaliza tu sección nueva. Para ello, sigue cualquiera de los pasos a continuación:
- Edita la configuración y el contenido de tu nueva sección.
- Edita la configuración y el contenido de los bloques predeterminados que se cargan con la sección.
- Toca Agregar bloque para agregar un bloque nuevo.
Opcional: Para reorganizar el orden de las secciones de tu página, toca y arrastra la sección.
Toca ✓.

Editar una sección

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Edita una sección en tu página de inicio. También puedes hacer clic en el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
En la barra lateral, haz clic en el nombre de una sección para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Opcional: Haz clic en bloques individuales para editar los bloques de una sección.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Edita una sección en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
Toca Secciones y, luego, toca el nombre de una sección para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Opcional: Toca bloques individuales para editar los bloques de una sección.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Edita una sección en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
Toca Secciones y, luego, toca el nombre de una sección para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Opcional: Toca bloques individuales para editar los bloques de una sección.
Toca ✓.

Duplicar una sección o bloque

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Duplica una sección o un bloque en tu página de inicio. También puedes hacer clic en el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas duplicar.
Haz clic en la sección o el bloque que deseas duplicar.
En la barra lateral, haz clic en … > Duplicar.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Duplica una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas duplicar.
Toca Secciones y, luego, toca la sección o el bloque que deseas duplicar.
Toca … > Duplicar.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Duplica una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas duplicar.
Toca Secciones y, luego, toca la sección o el bloque que deseas duplicar.
Toca … > Duplicar.
Toca ✓.

Oculta o elimina una sección o un bloque

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Oculta o elimina una sección o un bloque en tu página de inicio. También puedes hacer clic en el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas ocultar o eliminar.
Opcional: Para ocultar una sección o un bloque de tu tienda online, pasa el cursor sobre el nombre de una sección o un bloque y, luego, haz clic en el ícono de ojo.
Opcional: Para eliminar una sección o un bloque de tu tienda online, pasa el cursor sobre el nombre de una sección o un bloque y, luego, haz clic en el ícono de basurero.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Oculta o elimina una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas ocultar o eliminar.
Toca Secciones y, luego, toca la sección o el bloque que deseas ocultar o eliminar.
Opcional: Para ocultar una sección o un bloque de tu tienda online, toca … > Ocultar.
Opcional: Para eliminar una sección o un bloque de tu tienda online, toca … > Eliminar.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Oculta o elimina una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección o el bloque que deseas ocultar o eliminar.
Toca Secciones y, luego, toca la sección o el bloque que deseas ocultar o eliminar.
Opcional: Para ocultar una sección o un bloque de tu tienda online, toca … > Ocultar.
Opcional: Para eliminar una sección o un bloque de tu tienda online, toca … > Eliminar.
Toca ✓.

Trabajar con bloques

Los bloques son módulos personalizables que usas para agregar contenido a las secciones de tus plantillas. Puedes usar bloques para agregar texto, imágenes, enlaces, botones y más.

Los temas de Shopify tienen secciones y bloques que puedes personalizar. Algunas secciones tienen tipos de bloques fijos, lo que significa que solo puedes elegir entre los bloques que el diseñador del tema pone a disposición.

Otras secciones te permiten seleccionar cualquier bloque, pero hay un límite en el número total de bloques que puedes agregar a la sección. Si tu sección alcanza la cantidad máxima de bloques disponibles, la opción Agregar bloque aparece en gris y no puedes hacer clic en ella ni tocarla.

Agregar un bloque

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Agrega un bloque a una sección en tu página de inicio. También puedes hacer clic en el menú desplegable Página de inicio y, luego, seleccionar la plantilla a la que deseas agregar uno.
Busca la sección a la que deseas agregar un bloque, haz clic en Agregar bloque y, luego, sigue uno de los pasos a continuación:
- Selecciona un bloque de la lista.
- Usa el campo Buscar bloques para encontrar un bloque específico y, luego, selecciónelo.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Agrega un bloque a una sección en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla a la que deseas agregar uno.
Toca Secciones y, luego, Agregar bloque en la sección a la que deseas agregar un bloque. A continuación, sigue uno de los pasos a continuación:
- Selecciona un bloque de la lista.
- Toca el ícono de lupa para buscar un bloque específico y, luego, selecciona tu bloque.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Agrega un bloque a una sección en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla a la que deseas agregar uno.
Toca Secciones y, luego, Agregar bloque en la sección a la que deseas agregar un bloque. A continuación, sigue uno de los pasos a continuación:
- Selecciona un bloque de la lista.
- Toca el ícono de lupa para buscar un bloque específico y, luego, selecciona tu bloque.
Toca ✓.

Usa metacampos y metaobjetos con fuentes dinámicas

Puedes usar metacampos y metaobjetos para mostrar información dinámica en tu tienda online. Si tienes un tema compatible con metacampos, puedes conectar un metacampo a una sección o configuración de bloques compatible en el editor de temas.

Por ejemplo, si vendes velas, es posible que desees mostrar las horas de combustión para cada vela disponible en tu tienda. Después de configurar un metacampo de producto para Tiempo de combustión en la sección Datos personalizados de tu configuración del panel de control de Shopify, puedes agregar un bloque de texto a la sección principal de tu plantilla de producto. En el bloque de texto, puedes hacer clic en el ícono Conectar fuente dinámica en la configuración de texto y seleccionar el metacampo Tiempo de combustión. La información de tiempo de combustión entonces se mostrará en tus productos.

Si tienes un tema de Shopify, puedes conectar la mayoría de los metacampos y metaobjetos a él mediante el editor de temas. Si estás usando otros temas o si deseas agregar tipos de datos personalizados que no son compatibles con ellos, puedes editar su código o contratar a un Shopify Partner para que te ayude. Obtén más información sobre cómo contratar a un Shopify Partner.

No todas las secciones o bloques admiten fuentes dinámicas. Consulta la documentación de temas para más información.

Agrega secciones o bloques que pueden usar fuentes dinámicas para mostrar información dinámica en tu tienda online. Las fuentes dinámicas se pueden usar en cualquier plantilla, sección o bloque en el que se muestre recursos compatibles (producto, colección, página, blog y artículo del blog). Tienes que agregar tu metacampo antes de poder conectarlo en las plantillas. Consulta Fuentes dinámicas para obtener más información sobre el uso de metacampos y metaobjetos con fuentes dinámicas en tu tema.

Después de completar el proceso de configuración, sigue los siguientes pasos para conectar fuentes dinámicas a secciones o bloques en tu tema, usando el botón Conectar fuente dinámica:

Pasos:

Escritorio

Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que deseas editar y luego haz clic en Personalizar.
Edita una sección o un bloque en tu página de inicio. También puedes hacer clic en el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
En la barra lateral, haz clic en el nombre de una sección o bloque para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Haz clic en el botón Conectar fuente dinámica del tipo de contenido correspondiente que deseas editar y, luego, conecta tu fuente dinámica.
Haz clic en Guardar.

iPhone

En la aplicación de Shopify, toca el botón ….
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Edita una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
Toca Secciones y, luego, toca el nombre de una sección o un bloque para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Toca el botón Conectar fuente dinámica del tipo de contenido correspondiente que deseas editar y, luego, conecta tu fuente dinámica.
Toca Guardar.

Android

En la aplicación de Shopify, toca el botón ☰.
En la sección Canales de ventas, toca Tienda online.
Toca Gestionar todos los temas.
Busca el tema que deseas editar, y luego toca Personalizar.
Edita una sección o un bloque en tu página de inicio. También puedes tocar el menú desplegable Página de inicio y, luego, seleccionar la plantilla que contiene la sección que deseas editar.
Toca Secciones y, luego, toca el nombre de una sección o un bloque para cargar el contenido en la ventana de vista previa y acceder a la configuración y las opciones que puedes editar.
Toca el botón Conectar fuente dinámica del tipo de contenido correspondiente que deseas editar y, luego, conecta tu fuente dinámica.
Toca ✓.

Más información sobre cómo mostrar metacampos en tu tienda online y cómo mostrar metaobjetos en tu tienda online.

Selector de fuente dinámica

Puedes usar el selector de fuente dinámica para conectar la fuente dinámica correcta directamente en el editor de temas. Revisa las siguientes funciones clave del selector:

Puedes hacer referencia a fuentes dinámicas de varios recursos, si procede. Por ejemplo, si conectas una configuración a un bloque que está conectado tanto a un recurso de producto como a un recurso de página, puedes usar el menú desplegable del selector de fuente dinámica para especificar si deseas buscar metacampos asociados con el recurso de producto o de página.
El selector de fuente dinámica tiene una funcionalidad de búsqueda y filtro para ayudarte a encontrar el metacampo que necesitas.
El selector de fuente dinámica te permite elegir metacampos de categoría. Estos son atributos adicionales que pasan a estar disponibles cuando asignas una categoría de producto a un producto. Acceder a estos metacampos te permite conectar fuentes dinámicas a cualquier campo pertinente del metaobjeto de atributo subyacente.