Resumen de Bloques
Guía completa de todos los bloques de tema disponibles y sus opciones de personalización.
Bloques Disponibles
La aplicación proporciona 3 bloques de aplicación y 1 incrustación de aplicación para tu tema de Shopify. Usa la incrustación de la aplicación una vez (recomendado), luego añade los bloques a las plantillas donde quieras que aparezcan.
Bloque Breadcrumbs (Bloque de aplicación) — navegación breadcrumbs para páginas de colección y producto
Bloque de subcategorías (Texto debajo) (Bloque de aplicación) — cuadrícula/carrousel de subcolecciones con título debajo de la imagen
Bloque de subcategorías (Texto superpuesto) (Bloque de aplicación) — cuadrícula/carrousel de subcolecciones con título superpuesto en la imagen
Breadcrumbs & Categories (Incrustación de aplicación) — carga estilos/scripts globales (recomendado)
Bloque Breadcrumbs
Añade este bloque a las plantillas de producto y/o colección para mostrar una ruta de breadcrumbs clicable. Soporta visualización responsiva y múltiples estilos de separadores.
Diseño y Tipografía
Ancho máximo del bloque (
page_width) — ancho máximo del contenedor en pxTamaño de fuente (
font_size) — tamaño del texto de breadcrumbsTamaño del icono separador (
separated_icon_size) — tamaño del icono divisorEspaciado del separador (
separated_size) — espacio alrededor del divisorAlineación del texto (
text_align) — izquierda/centro/derecha
Relleno
Arriba y abajo (
padding_block) — relleno verticalIzquierda y derecha (
padding_inline) — relleno horizontal
Opciones de visualización
Resaltar el elemento actual (
bold_current_item_on_breadcrumb) — enfatiza el último elemento breadcrumbEfecto al pasar el cursor (
hover_effect) — Ninguno / Subrayado / Escalar / Brillo / Rebote / BalanceoHabilitar desplazamiento horizontal en móvil (
scroll_on_mobile) — desplazamiento en lugar de ajuste en pantallas pequeñasOcultar nombre del producto en breadcrumbs (
hidden_product_name_on_breadcrumb) — oculta el título del producto en páginas de producto
Colores
Fondo (
background_color) — color de fondo del bloqueTexto (
text_color) — color del texto
Personalización avanzada
Símbolo divisor de breadcrumb (
trail_divider_style) — elige un divisor: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash
Etiqueta del ítem
Configura las etiquetas que se muestran en la ruta breadcrumb (usa el idioma de tu tienda).
Tipo de visualización de inicio (
home_display_type) — Texto / Icono de inicio (Clásico) / Icono de inicio (Contorno)Página de inicio (
label_home) — etiqueta para el ítem de inicioPágina de lista de colecciones (
label_list_collections) — etiqueta para la página de lista de coleccionesPágina de catálogo (
label_catalog) — etiqueta para el ítem de catálogo (usa---para ocultar; consulta la nota en la configuración)Enlace personalizado de catálogo (
custom_catalog_link) — URL personalizada opcional (por defecto/collections/all)
Bloque de subcategorías (Texto debajo)
Muestra subcolecciones como una cuadrícula o un carrusel. Este diseño muestra el título de la colección (y opcionalmente el conteo de productos) debajo de la imagen.
General
Ancho máximo del bloque (
page_width) — ancho máximo del contenedor en pxHabilitar carrusel en escritorio (
enable_desktop_slider) — habilita comportamiento de deslizador en escritorioReproducción automática (
autoplay_mode) — modos de auto-desplazamiento / auto-deslizamiento (ver abajo)Habilitar navegación (
slider_enable_navigation) — muestra flechas/puntos de navegaciónEspaciado vertical (
vertical_spacing) — espacio entre el encabezado y el deslizador/cuadrículaEncabezado (
title) — texto del encabezado de la secciónRelación de imagen (
image_ratio) — Adaptar a imagen / Cuadrado / Retrato / Paisaje / CírculoTipo de ajuste de imagen (
image_fit_type) — Cubrir / ContenerRadio del borde de la imagen (
image_border_radius) — no aplicable cuando la relación de imagen es CírculoNúmero de columnas en escritorio (
columns_desktop)Espaciado entre tarjetas (
card_spacing_desktop) — espacio entre tarjetas de categoríaDiseño del contenido (
content_layout) — Normal / Superposición / Texto debajo / Texto debajo con bordeAlineación del texto (
text_alignment) — izquierda/centro/derechaMostrar el conteo de productos (
show_product_count)Habilitar texto en mayúsculas (
enable_uppercase_text)Truncar títulos largos (
truncate_title) — limita títulos a 5 palabrasInvertir diseño (Texto arriba, Imagen abajo) (
reverse_image_position)
Reproducción automática (auto-desplazamiento / auto-deslizamiento)
Solo aplica cuando Habilitar carrusel en escritorio está activado.
Apagado (
none)Lento – 50px/s (
slow_scroll_50) — auto-desplazamiento continuoRápido – 100px/s (
slow_scroll_100) — auto-desplazamiento continuoCada 3 segundos (1 ítem) (
slide_3s) — desliza un ítem a la vezCada 3 segundos (Todos los ítems visibles) (
slide_3s_page) — desliza una página completa
Colores
Text (
colors_text)Background (
colors_background) — solo se usa cuando el diseño de contenido es Superposición
Diseño móvil
Número de columnas en tablet (
columns_tablet) — 2/3/4Número de columnas en móvil (
columns_mobile) — 1/2Habilitar deslizamiento en tablet y móvil (
swipe_on_mobile)
Tamaño de fuente del título de la colección
El tamaño de fuente del recuento de productos se ajusta automáticamente según el tamaño de fuente del título de la colección.
Escritorio (
font_size_desktop)Tablet (
font_size_tablet)Móvil (
font_size_mobile)
Bloque de subcategorías (Texto superpuesto)
Muestra subcolecciones como una cuadrícula o un carrusel con el título (y opcionalmente el recuento de productos) sobre la imagen.
General
Ancho máximo del bloque (
page_width) — ancho máximo del contenedor en pxHabilitar carrusel en escritorio (
enable_desktop_slider) — habilita el comportamiento de deslizador en escritorioReproducción automática (
autoplay_mode) — modos de auto-desplazamiento / auto-deslizamiento (ver abajo)Habilitar la navegación (
slider_enable_navigation) — muestra flechas/puntos de navegaciónEspaciado vertical (
vertical_spacing) — espacio entre el encabezado y el deslizador/cuadrículaEncabezado (
title) — texto del encabezado de la secciónRelación de imagen (
image_ratio) — Adaptar a imagen / Cuadrado / Retrato / Paisaje / CírculoTipo de ajuste de imagen (
image_fit_type) — Cubrir / ContenerRadio del borde de la imagen (
image_border_radius) — no aplicable cuando la relación de imagen es CírculoNúmero de columnas en escritorio (
columns_desktop)Posición del contenido (
content_position) — Arriba / Centro / AbajoAlineación del texto (
text_alignment) — Izquierda / Centro / DerechaMostrar el recuento de productos (
show_product_count)Habilitar texto en mayúsculas (
enable_uppercase_text)Dirección del diseño del contenido (
content_layout_direction) — Línea única (fila) / Apilado (columna)
Reproducción automática (auto-desplazamiento / auto-deslizamiento)
Solo se aplica cuando Habilitar carrusel en escritorio está activado.
Desactivado (
none)Lento – 50px/s (
slow_scroll_50) — auto-desplazamiento continuoRápido – 100px/s (
slow_scroll_100) — auto-desplazamiento continuoCada 3 segundos (1 elemento) (
slide_3s) — desliza por un elementoCada 3 segundos (Todos los elementos) (
slide_3s_page) — desliza por una página
Diseño móvil
Número de columnas en tablet (
columns_tablet) — 2/3/4Número de columnas en móvil (
columns_mobile) — 1/2Habilitar deslizamiento en tablet y móvil (
swipe_on_mobile)
Tamaño de fuente del título de la colección
El tamaño de fuente del recuento de productos se ajusta automáticamente según el tamaño de fuente del título de la colección.
Escritorio (
font_size_desktop)Tablet (
font_size_tablet)Móvil (
font_size_mobile)
Color del texto del encabezado
Color Text (
colors_text)Color overlay text (
colors_overlay) — color de superposición para legibilidad
Integración de la app
Se recomienda la integración de la app porque carga CSS/JS global usado por los bloques (por ejemplo: script de reproducción automática para Subcategorías, ayudantes i18n opcionales y CSS personalizado configurado en la app).
Actívalo en Theme editor → App embeds
Manténlo activado para asegurar que todos los bloques funcionen correctamente
Agregar bloques a tu tema
Ve a tu administrador de Shopify
Navega a Tienda online › Temas
Haz clic en "Personalizar" en tu tema activo
Agrega bloques de la app donde quieras que aparezcan
Personaliza la configuración y guarda
Configuración del bloque
Todas las configuraciones listadas arriba se configuran en el Editor de Temas de Shopify cuando seleccionas el bloque. La mayoría de las configuraciones son responsivas (escritorio/tableta/móvil).
Mejores Prácticas
Agregar Breadcrumbs a las plantillas de producto y colección
Usar bloques de subcategorías en las páginas de colección
Hacer que el estilo del bloque coincida con tu tema
Probar en dispositivos móviles
Previsualizar antes de publicar