Secciones y bloques

Con las secciones del tema puedes crear el diseño que quieras para la tienda online. Las secciones se componen de distintos tipos de bloques, y cada uno cumple una función específica, como texto, botones, imágenes individuales, un collage de imágenes o enlaces.

Las secciones y los bloques te dan flexibilidad para organizar el contenido y te permiten controlar el estilo y la apariencia de la tienda online sin tener que editar código, incluidas las siguientes opciones de personalización:

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

Las secciones y los bloques disponibles en el editor de temas dependen del tema y de la versión del tema. Por ejemplo, el tema podría tener un bloque Diapositiva que solo puedes agregar a una sección de Presentación de diapositivas, y un bloque de texto Encabezado que puedes agregar a todas las secciones del tema. Para obtener más información sobre las opciones disponibles, consulta la documentación del tema.

Límites máximos de secciones y bloques

Las secciones y los bloques tienen los siguientes límites máximos:

• Cada plantilla puede tener hasta 25 secciones.
• Cada plantilla puede tener hasta 1.250 bloques sumando todas las secciones. La cantidad exacta de bloques, y cuántos de cada tipo puedes agregar a cada sección, depende de las fuentes de secciones y bloques y la define quien diseñó el tema. Por ejemplo, si el tema tiene una sección de Suscripción por correo electrónico, es posible que solo puedas agregar un bloque de Formulario de correo electrónico.
• Los bloques que admiten anidación pueden tener hasta ocho niveles de bloques anidados.

Fuentes de bloques

Según la estructura del tema y las apps que tengas instaladas, el tema puede incluir varias secciones que aceptan bloques de diferentes fuentes. Cuando agregas un bloque a una sección, en el selector de bloques se muestran todos los bloques disponibles para esa sección. Según el tema y su versión, puedes agregar a las secciones del tema los siguientes tipos de bloques:

• Los bloques de app son bloques que agregan funcionalidad al tema. Puedes usar un bloque de app para reubicar en un área específica de una página las partes del tema que agregaron las apps instaladas.
• Los bloques de sección son bloques definidos dentro de una sección específica.
• Los bloques de tema son bloques definidos dentro del tema y pueden tener funcionalidad dinámica, como anidación.

El tema puede incluir algunas secciones que usan bloques de sección y otras secciones que usan bloques de tema. Una misma sección puede aceptar bloques de tema o bloques de sección, pero no una combinación de ambos.

La disponibilidad de bloques de app dentro de las secciones depende de la funcionalidad de la app y de si la sección puede aceptar bloques de app.

Bloques de sección

Los bloques de sección son bloques diseñados para una sección específica. Una sección puede limitar los tipos de bloques de sección y la cantidad de un tipo de bloque que puedes agregar.

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

Por ejemplo, el tema tiene una sección de Suscripción por correo electrónico. Puedes usarla para agregar un formulario de suscripción al boletín, de modo que los clientes puedan suscribirse al boletín. Después de agregar la sección de Suscripción por correo electrónico, puedes agregar un bloque de cada uno de los siguientes tipos:

• un bloque de Formulario de correo electrónico
• un bloque de Encabezado
• 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 muestra como una opción en el selector de bloques. Esta limitación ayuda a evitar problemas durante la captura del correo electrónico del cliente y garantiza que el cliente pueda ingresar su dirección de correo electrónico con facilidad.

Si agregaste los tres bloques disponibles de la sección de Suscripción por correo electrónico, el selector de bloques muestra un mensaje que indica que ya se usaron todos los bloques disponibles.

Bloques de tema

Los bloques de tema son bloques definidos dentro del tema y pueden tener funcionalidad dinámica, como anidación. Las secciones que aceptan bloques de tema pueden admitir una variedad de bloques, según la estructura de la sección. Una sección que acepta bloques de tema puede admitir todos los bloques de tema disponibles, un subconjunto específico de bloques o bloques exclusivos de esa sección. Los bloques de tema también pueden presentar los siguientes comportamientos:

• Algunos bloques permiten anidar otros bloques hasta ocho niveles.
• Algunas secciones tienen bloques obligatorios. Puedes personalizarlos u ocultarlos, pero no puedes reordenarlos 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, el tema tiene una sección de Presentación de diapositivas con bloques de tema.

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

Después de agregar un bloque Diapositiva a la sección Presentación de diapositivas, puedes hacer clic en Agregar bloque para agregar más bloques dentro de cualquier bloque Diapositiva de la sección Presentación de diapositivas, como un Encabezado, una Imagen o un Botón. Estos bloques quedan anidados dentro del bloque Diapositiva. Este es un ejemplo de un bloque anidado.

Si agregas un segundo bloque Diapositiva a la sección Presentación de diapositivas, el tema agrega automáticamente un bloque Controles de presentación de diapositivas. Este bloque muestra botones que permiten navegar de una diapositiva a otra. Puedes personalizar el estilo de los botones u ocultar los controles, pero no puedes quitar ni eliminar el bloque. Este es un ejemplo de un bloque obligatorio que se muestra de forma condicional.

Compatibilidad de los bloques de tema

Para acceder a los bloques de tema, el tema debe tener secciones que los admitan. Puedes verificar si el tema admite bloques de tema en el código del tema. Si en la barra lateral del editor de Liquid hay una carpeta blocks, usas un tema que admite bloques de tema. También puedes consultar la documentación del tema.

Pasos:

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

2. Junto al tema que quieres revisar, haz clic en el botón y luego en Editar código.

3. En la barra lateral, busca la carpeta blocks.

   

Personalizar las plantillas del tema con secciones y bloques

Cuando abres el editor de temas, se carga de forma predeterminada la página de inicio de la tienda. Puedes usar el menú desplegable para seleccionar otra plantilla, como productos, colecciones, páginas o blogs, o usar la barra de búsqueda en el menú desplegable de plantillas para buscar una plantilla específica. Cuando seleccionas una plantilla, esta se carga en el editor de temas y los cambios que hagas se previsualizan en el editor.

Agrega una sección

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

Pasos:

Edita una sección

Reordena una sección o un bloque

Puedes cambiar el orden de las secciones en las plantillas de página y reorganizar los bloques dentro de esas secciones. Además, puedes mover bloques compatibles entre diferentes secciones. Por ejemplo, si la página de inicio tiene dos secciones Presentación de diapositivas, puedes arrastrar un bloque Diapositiva de una presentación a la otra.

No puedes mover un bloque a otra sección si el tipo de bloque no es compatible o si la sección ya alcanzó el límite de bloques. Si intentas mover una sección o un bloque a una ubicación no válida, volverá a su posición original.

También puedes usar el inspector de vista previa para reordenar secciones. Más información sobre cómo usar el inspector de vista previa en el editor de temas.

Pasos:

Duplicar una sección o un bloque

Puedes duplicar una sección o un bloque para crear una copia idéntica de esa sección o de ese bloque.

Después de duplicar un bloque, el nuevo bloque se agrega a la misma sección. Si quieres mover el bloque a una sección nueva o cambiar el orden de los bloques, puedes rearrange the block. También puedes copy a block, and then paste it directly into a different section instead.

Copiar y pegar bloques

Si quieres usar el mismo bloque en varias secciones, puedes copiarlo y pegarlo en otra sección. También puedes copiar y pegar un bloque dentro de la misma sección, o puedes optar por duplicate the block. Un bloque duplicado conserva toda la configuración y el contenido del bloque original.

Pasos:

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.

3. Para copiar y pegar un bloque en la página de inicio, selecciónalo directamente o usa el menú desplegable Página de inicio para elegir la plantilla específica que contiene la sección o el bloque que quieres editar.

4. Haz clic derecho en el bloque que quieres duplicar y luego haz clic en Copiar.

5. En la misma sección u otra, haz clic derecho dentro de la sección y luego haz clic en Pegar.

6. Haz clic en Guardar.

Ocultar o eliminar una sección o un bloque

Cambiar el nombre de una sección o un bloque

De forma predeterminada, el título de una sección o un bloque en el menú lateral del editor de temas y en los detalles de configuración se establece según el tipo de bloque o sección, como "Colección" o "Texto".

Para los bloques, si la configuración del bloque incluye un campo de texto, como un encabezado o una descripción, ese texto también se agrega al título en el menú lateral. Si hay más de un campo de texto, se agrega el primer campo que tenga contenido. Cuando cambias el texto del campo, el título del bloque se actualiza para incluir el texto actualizado. El nombre de una sección o un bloque no puede quedar en blanco.

Por ejemplo, agregas una sección Multicolumna a la plantilla de la página con bloques de Columna. El bloque de columna tiene un ajuste de Encabezado con el texto predeterminado Columna y un ajuste de Descripción con el texto predeterminado Combina texto con una imagen para destacar el producto, la colección o la publicación de blog que elijas.. El título predeterminado de la sección es Multicolumna. El título predeterminado del bloque Columna es Columna - Columna. Si quitas el texto del ajuste Encabezado, el título del bloque se actualiza a Columna - Combina texto con una imag...

Puedes cambiar el nombre de cualquier sección o bloque a un nombre personalizado desde la configuración de la sección o el bloque en el menú lateral del editor de temas.

Pasos:

Trabajar con bloques

Los bloques son módulos personalizables que usas para agregar contenido a las secciones de las 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 bloque fijos, lo que significa que solo puedes seleccionar entre los bloques que el diseñador del tema pone a disposición de esa sección.

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

Usa la búsqueda para encontrar un bloque por su nombre o selecciona un bloque en el menú desplegable del selector de bloques. Es posible que los bloques del tema estén organizados en categorías en el selector de bloques, como Colección para los bloques con un selector de colecciones o Multimedia para los bloques de imagen y video.

En el selector de bloques se muestra una vista previa del bloque para que puedas revisar cómo se verá antes de agregarlo.

Agrega un bloque

Usa metacampos y metaobjetos con fuentes dinámicas

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

Por ejemplo, si vendes velas, quizá quieras mostrar el tiempo de combustión de cada vela disponible en la tienda. Después de configurar un metacampo de producto para Tiempo de combustión en la sección Datos personalizados de la configuración del panel de control de Shopify, puedes agregar un bloque de texto a la sección principal de la plantilla de producto. En el bloque de texto, haz clic en el botón en la opción de texto y selecciona el metacampo Tiempo de combustión. Ahora se mostrará la información del tiempo de combustión en los productos.

Si tienes un tema de Shopify, puedes conectar la mayoría de los metacampos y metaobjetos al tema usando el editor de temas. Si usas otros temas o quieres agregar tipos de datos personalizados que el tema no admite, puedes editar el código del tema o contratar a un Shopify Partner para que te ayude. Más información sobre cómo contratar a un Shopify Partner.

No todas las secciones ni todos los bloques admiten fuentes dinámicas. Revisa la versión de la arquitectura del tema y las opciones de personalización disponibles en el editor de temas para determinar si el tema admite fuentes dinámicas.

Puedes mostrar información dinámica en la tienda online agregando secciones o bloques que puedan usar fuentes dinámicas. Las fuentes dinámicas se pueden usar en cualquier plantilla, sección o bloque que muestre recursos compatibles, como productos, colecciones, páginas, blogs y artículos del blog. Debes agregar el 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 el tema.

Cuando completes la configuración, sigue los pasos a continuación para conectar fuentes dinámicas a secciones o bloques del tema usando el botón .

Pasos:

Más información sobre mostrar metacampos en la tienda online y mostrar metaobjetos en la tienda online.

Selector de fuentes dinámicas

Con el selector de fuentes dinámicas puedes conectar la fuente dinámica correcta directamente desde el editor de temas. Revisa las siguientes características clave del selector de fuentes dinámicas:

• Puedes usar como referencia fuentes dinámicas de distintos recursos, cuando aplique. Por ejemplo, si conectas un ajuste a un bloque que está vinculado tanto a un recurso de producto como a uno de página, puedes usar el menú desplegable del selector de fuentes dinámicas para especificar si quieres buscar metacampos asociados al recurso de producto o al de página.
• El selector de fuentes dinámicas incluye funciones de búsqueda y filtro para ayudarte a encontrar el metacampo que necesitas.
• El selector de fuentes dinámicas te permite elegir metacampos de categoría. Son atributos adicionales que se habilitan cuando asignas una categoría de producto a un producto. Al acceder a estos metacampos, puedes conectar fuentes dinámicas a cualquier campo pertinente del metaobjeto de atributo subyacente.