Cómo mostrar variantes en la página de colección en Shopify (Dawn, Horizon y cualquier tema)

02 how to show variants on collection page shopify 980x525 3

Tu página de colección de Shopify muestra una tarjeta por producto. Una chaqueta en seis colores es un solo mosaico con una imagen y un precio. Cinco de esos colores permanecen invisibles hasta que alguien hace clic.

Esta guía explica cómo mostrar variantes en la página de colección como tarjetas independientes — es decir, variantes como productos — en cualquier tema de Shopify, sin editar código del tema y sin duplicar un solo producto. La configuración es idéntica en Dawn, Horizon, Impulse y Debut, así que este único artículo cubre todos los temas.

Qué significa „mostrar variantes en la página de colección”

Todos los temas de Shopify construyen su cuadrícula de colección con el mismo bucle de Liquid: recorre collection.products y renderiza una tarjeta por producto. Las variantes viven un nivel por debajo, así que nunca obtienen su propio espacio en la cuadrícula.

Dividir las variantes le da la vuelta. Cada variante se convierte en su propia tarjeta, con su imagen, su precio, su enlace y su lugar en el orden. La chaqueta pasa a ser seis mosaicos: negro, hueso, óxido, oliva, arena y azul marino, uno junto a otro.

Los comerciantes lo buscan de una docena de formas: mostrar variantes en colección, variantes como productos, dividir variantes, mostrar variantes como productos separados, variantes en la página de categoría. Todas describen el mismo cambio.

Importa sobre todo cuando:

  • El color es el producto. Moda, calzado, cosmética, pinturas, lanas, fundas de móvil. Los clientes escanean la cuadrícula buscando un color; una tarjeta con el color equivocado es una tarjeta que pasan de largo.
  • El tamaño o el peso marca el precio. Velas, café, suplementos, envases, formatos de impresión. Una tarjeta de „49 €” esconde el precio de entrada de 9 €.
  • Dependes de los filtros. Filtra por „oliva” en una cuadrícula normal y obtendrás todos los productos que casualmente existen en oliva, con la mayoría de tarjetas mostrando otra cosa.
  • Llevas tráfico de pago a las colecciones. Cada color que nunca aparece en la cuadrícula es inventario que pagas por esconder.

Tres formas de hacerlo (dos te cuestan caro)

1. Duplicar los productos

La vía obvia: convertir un producto en seis productos reales. Funciona, y es la opción más cara disponible:

  • El inventario se fragmenta en seis registros en lugar de un producto con seis niveles de stock por variante: cada feed, sincronización e integración logística tiene que asumirlo
  • Las reseñas se fragmentan. 60 reseñas en un producto pasan a ser diez en cada uno. Tu mejor página pierde su prueba social.
  • La analítica se fragmenta. Tu informe ya no te dice cómo va la chaqueta, sino cómo van seis productos.
  • Canibalización SEO: seis páginas casi idénticas compitiendo por la misma búsqueda
  • El mantenimiento se multiplica. Cada cambio de precio, cada texto, cada foto: seis veces, para siempre.
  • La página de producto empeora. Los clientes pierden el selector de variantes; cambiar de color pasa de ser un clic a una carga de página.

Estás dañando tu catálogo de forma permanente para resolver un problema de visualización en una sola página.

2. Editar el tema

Un desarrollador reescribe la cuadrícula de colección para que recorra variantes. Más barato y reversible, pero:

  • Hay que repetirlo en los resultados de búsqueda, la colección destacada de la portada, los productos relacionados y cualquier otra cuadrícula
  • La paginación sigue contando productos mientras la cuadrícula renderiza variantes, así que los tamaños de página se desajustan
  • Cada actualización del tema se omite o te cuesta volver a aplicar el parche
  • En los temas más recientes la tarjeta de producto es un árbol de bloques anidados en lugar de un único snippet, lo que complica bastante la intervención
  • Reglas de ocultación, formatos de título, excepciones por colección y muestras pasan a ser código a medida que ahora mantienes tú

3. Dividir en el momento de mostrar

Deja el catálogo exactamente como está — un producto, sus variantes, una página de producto, un bloque de reseñas, un registro de inventario — y cambia solo lo que la cuadrícula renderiza.

Eso es lo que hace Stamp — Show Variants on Collection. Se conecta mediante las incrustaciones de aplicación de Shopify, así que no se edita ningún archivo del tema ni se reescribe ningún dato de producto. Desactívala y la cuadrícula vuelve a la normalidad al instante.

Duplicar productosEditar el temaDividir al mostrar
El catálogo se mantiene intactoNoSíSí
El inventario se mantiene intactoNoSíSí
Las reseñas siguen juntasNoSíSí
Sobrevive a las actualizaciones del temaSíNoSí
Cubre también búsqueda y portadaSíTrabajo extra en cada sitioSí
Reversible con un clicNoNoSí
Tiempo de configuraciónDíasDíasMinutos

La configuración: idéntica en todos los temas de Shopify

Mucha gente espera que esta parte dependa del tema. No es así. Como la aplicación funciona mediante una incrustación de aplicación y no como una modificación del tema, valen los mismos seis pasos: da igual si usas Dawn, Horizon, Impulse o un Debut antiguo.

Paso 1 — Activar el ajuste

Dos interruptores independientes en el panel:

  • Show variants separately — divide las variantes en tarjetas propias. Es el interruptor decisivo.
  • Show product price range — mantiene una tarjeta por producto, pero sustituye el precio único por un rango o un precio „desde”.

Paso 2 — Seleccionar una colección

Elige las colecciones en las que debe funcionar la aplicación. Empieza por una colección con mucho color: así verás el resultado más rápido. El plan gratuito funciona en un número limitado; los planes de pago desbloquean todas las colecciones, incluido un interruptor All collections.

Paso 3 — Seleccionar un tema

Por defecto la aplicación actúa sobre tu tema publicado. En una tienda en producción, duplica primero el tema y selecciona la copia sin publicar en Theme settings: así la vista previa se ejecuta sobre la copia hasta que publiques.

Paso 4 — Elegir el criterio de división

La única decisión que da forma a toda la cuadrícula.

AjusteQué aparece en la cuadrículaUso típico
Show 1st option separatelyUna tarjeta por valor de la primera opción (p. ej. Color)Moda, cosmética
Show 2nd option separatelyUna tarjeta por valor de la segunda opción (p. ej. Size)Velas, café, envases
Show 1st and 2nd combinedUna tarjeta por combinación (p. ej. Azul / 45)Calzado, donde importan ambas
Show all options combinedUna tarjeta por varianteCatálogos pequeños, hecho a medida
Show selected options separatelyUna tarjeta por valor de los nombres de opción que escribasCatálogos mixtos con orden de opciones irregular

El error más habitual es elegir „1st option” cuando el orden de las opciones no es uniforme en el catálogo. Si la mitad de tus productos son Color/Size y la otra mitad Size/Color, usa Show selected options separately y escribe los nombres de opción de forma explícita, incluidas todas las variantes de idioma que use tu tienda: Color, Colour, Talla, Size, Farbe.

El segundo error más habitual es recurrir a „all options combined”. Un producto con 5 colores × 6 tallas se convierte en 30 tarjetas. Divide por el eje por el que tus clientes navegan de verdad y deja el resto a la página de producto.

El asistente de configuración te guía: activar el ajuste Show variants separately, seleccionar una colección, seleccionar un tema y elegir la opción por la que dividir las variantes (puedes especificar qué opción se muestra por separado).

Después de activar la aplicación en tu tema, haz clic en el botón I have done this, abre la vista previa de la colección y mira el resultado.

Paso 5 — Activar la aplicación en tu tema

Ve a Shopify Admin → Tienda online → Temas → Editar tema → Incrustaciones de aplicación, activa Variants on Collection y pulsa Guardar arriba a la derecha del editor de temas. De vuelta en la aplicación, haz clic en I have done this.

El panel muestra un estado App embed: Installed / Not installed, así que no tienes que adivinar si ha funcionado.

Editor de temas de Shopify: activar la incrustación de aplicación Variants on Collection y guardar

Editor de temas → Incrustaciones de aplicación (1) → activar Variants on Collection (2) → Guardar (3). Este es el único cambio en tu tema.

Paso 6 — Ver la página de colección

Abre la colección. Una tarjeta por variante, cada una con su imagen y su precio. Tiempo total: unos cinco minutos.

Cómo hacer que la cuadrícula dividida parezca intencionada

Dividir es la parte fácil. Estos cuatro ajustes deciden si la cuadrícula parece diseñada o rota.

Formato de título

Seis tarjetas que repiten „Field Jacket” seis veces parecen un error. Elige un formato que nombre la variante:

  • Product title – Variant title → „Field Jacket – Oliva”
  • Product title (option1) → „Field Jacket (Oliva)”
  • Variant title → „Oliva”
  • Product title (option1/option2/option3) → especificación completa entre paréntesis
  • Custom title format → {product.title} - {variant.title} o {variant.title} - {variant.options2} para „Oliva – 45,46,47″

Formato de precio

Relevante cuando una tarjeta dividida sigue abarcando varias variantes con precios distintos:

  • From min. price → „desde 48 €”
  • Min. price – Max price → „48 € – 56 €”
  • Regular price → „56 €”
  • Custom price format, con interruptor para mostrar con o sin moneda

Reglas de ocultación

Dividir deja al descubierto cada SKU muerta y cada foto que falta. Tres interruptores lo ordenan:

  • Hide products/variants without images — la mayor mejora de calidad de un solo ajuste. Actívalo antes de enseñarle el resultado a nadie.
  • Hide out of stock — oculta con independencia del ajuste „Seguir vendiendo cuando no haya existencias”
  • Hide unavailable — actúa cuando ese ajuste está desactivado

También puedes excluir productos concretos de la división mediante una etiqueta: útil para packs, tarjetas regalo y productos de una sola variante que deben seguir siendo una única tarjeta.

Mezclar variantes

Por defecto, las variantes divididas de un mismo producto quedan juntas, así que un producto con muchos colores puede ocupar una fila entera. Mix variants las reparte por la cuadrícula. Funciona con los criterios de orden „Featured” y „Best selling”.

Muestras de variantes en las tarjetas de colección

Las muestras son la otra mitad del trabajo: los puntos de color, los recortes de imagen o los botones con texto bajo cada tarjeta. Forma (cuadrada, redondeada, circular), tamaño, altura, grosor y color del borde, alineación y márgenes son totalmente configurables.

El Swatch type decide qué se renderiza: un código de color, una imagen o un botón de texto. La Swatch source decide de dónde sale el valor:

  • Variant — de la propia variante
  • Theme swatch — los colores e imágenes que ya definiste en los valores de opción de producto en el admin de Shopify, con retroceso a „Variant” cuando un valor no tiene ninguno
  • Metafield — un metacampo de variante que asignas tú

Los valores agotados pueden mostrarse con doble aspa, aspa simple o aspecto desactivado, y tú decides en qué superficies aparecen las muestras: página de colección, página de búsqueda, sección seleccionada a mano, sección de más vendidos o sección de productos relacionados.

Una configuración habitual en moda: dividir por Color para que cada color tenga su tarjeta y ejecutar después una muestra de tipo Button sobre Size, de modo que cada tarjeta de color muestre qué tallas quedan. El cliente ve el color, el precio de ese color y las tallas disponibles sin un solo clic.

Ordenar variantes por lo que realmente se vende

En cuanto las variantes son tarjetas, „Best selling” a nivel de producto es la señal equivocada: que la chaqueta oliva venda más que la hueso debería notarse en el orden. Smart sort ordena las variantes por su propio rendimiento de ventas, con las opciones push out of stock down y push new items to top. Se ejecuta manualmente o se programa cada 1 a 4 semanas.

Más allá de la página de colección

La misma división puede aplicarse a cualquier otra cuadrícula de productos de la tienda:

  • Colección destacada de la portada — con límite de visualización y selector de posición
  • Página de resultados de búsqueda — la página de resultados, no el desplegable de sugerencias
  • collections/all — tu página de catálogo general
  • Secciones de selección manual, más vendidos y productos relacionados — como bloques de tema que arrastras a cualquier plantilla

Reglas por colección

Los ajustes generales se aplican en todas partes por defecto; Advanced settings los sobrescribe colección por colección. Dentro de una colección puedes filtrar la lista de variantes por opción 1/2/3, precio, inventario, descuento, etiqueta de producto o hasta cinco metacampos, con condiciones como es igual a, contiene, está vacío y mayor que. Defines si las variantes deben cumplir todas o alguna condición y después ordenas por título, precio o manualmente arrastrando.

Así „Rebajas” puede mostrar solo variantes con descuento divididas por color y sin agotados, mientras tus colecciones editoriales quedan intactas.

Mostrar variantes en la página de colección, tema por tema

La configuración anterior es igual en todas partes. Lo que cambia según el tema es qué división funciona mejor en esa cuadrícula y con qué función propia del tema la combinas.

Temas gratuitos de Shopify 2.0: Dawn · Refresh · Craft · Sense · Studio · Taste · Origin · Colorblock · Publisher · Ride · Spotlight · Crave · Trade · Rise

Colección Horizon: Horizon · Atelier · Dwell · Fabric · Heritage · Pitch · Ritual · Savor · Tinker · Vessel

Temas vintage de Shopify 1.0: Debut · Brooklyn · Narrative · Supply · Venture · Boundless · Minimal · Simple · Express · Jumpstart · Pop

Temas de pago populares: Impulse · Enterprise · Wonder · Pebble · Hyper · Be Yours · Focal · Prestige · Concept · Symmetry

Mostrar variantes en la página de colección en el tema Dawn

Dawn es el tema de referencia de Shopify y el predeterminado en las tiendas nuevas, así que hay más páginas de colección funcionando sobre él que sobre cualquier otro. Su cuadrícula viene de sections/main-collection-product-grid.liquid, que recorre productos y renderiza cada uno mediante snippets/card-product.liquid: un bucle de productos en el que las variantes nunca aparecen. Activa la incrustación Variants on Collection, divide por la 1st option (normalmente Color) y pon Title format en Product title – Variant title. Dos ajustes específicos de Dawn: cambia la proporción de imagen de la tarjeta de producto de „Adapt” a „Square” o „Portrait” para que las filas queden alineadas, y desactiva Show second image on hover: en una cuadrícula dividida puede mostrar otro color y anular el sentido de la división.

Mostrar variantes en la página de colección en el tema Refresh

Refresh pertenece a la familia Dawn, así que la cuadrícula de colección es el mismo bucle de productos y vale la misma configuración de seis pasos. Divide por la 1st option si el color o el sabor marcan tu gama. Si la nomenclatura de opciones se ha ido desviando con los años — a veces Sabor, a veces Flavour, a veces Variedad — sáltate el criterio posicional y usa Show selected options separately con todas las grafías. Combínalo con Hide products/variants without images; Refresh apuesta mucho por la imagen y un mosaico con marcador de posición canta enseguida.

Mostrar variantes en la página de colección en el tema Craft

Craft es un tema de la familia Dawn, así que la configuración no cambia en nada. Los catálogos de Craft suelen crecer producto a producto con el tiempo, por lo que el orden de las opciones rara vez es uniforme: usa Show selected options separately y enumera los nombres de opción de forma explícita en lugar de confiar en „1st option”. Si tus piezas son únicas y con pocas variantes, aquí Show all options combined es seguro: el número de tarjetas se mantiene manejable y cada acabado consigue su propio mosaico.

Mostrar variantes en la página de colección en el tema Sense

Sense sigue la estructura de Dawn, así que la incrustación de aplicación es toda la instalación. Cuando el tono o el aroma es la primera opción, divide por la 1st option para que cada tono tenga su tarjeta: es justo el caso en el que una única tarjeta de producto esconde la mayor parte de la gama. Pon Swatch source en Theme swatch para que las tarjetas divididas reutilicen los valores de color que ya definiste en el admin de Shopify, y usa muestras de tipo Image para todo lo que tenga textura y un color plano representaría mal.

Mostrar variantes en la página de colección en el tema Studio

Studio es un tema de la familia Dawn con una cuadrícula tipo galería: las tarjetas son grandes, así que una división profunda se alarga rápido. Quédate en un solo eje: divide por la 1st option o usa Show selected options separately si ofreces la misma pieza en varios formatos o tamaños. Pon Price format en From min. price cuando una tarjeta dividida siga abarcando varios tamaños, para que no anuncie un precio que el cliente no va a conseguir.

Mostrar variantes en la página de colección en el tema Taste

Taste pertenece a la familia Dawn, así que la configuración es la misma que en Dawn. Si tus opciones son pesos o formatos — 250 g / 500 g / 1 kg — divide por la 2nd option para que cada tamaño tenga su tarjeta y su precio, y pon Price format en Min. price – Max price donde siga habiendo un rango. Añade Hide out of stock para que los tamaños agotados dejen de robar espacio a los que sí puedes servir.

Mostrar variantes en la página de colección en el tema Origin

Origin es un tema de la familia Dawn, así que la incrustación de aplicación es el único cambio. Empieza con la división por la 1st option y Title format: Product title – Variant title. Si uno o dos productos tienen muchas más variantes que el resto y dominan una fila entera, activa Mix variants para repartirlas por la cuadrícula: funciona con los criterios „Featured” y „Best selling”.

Mostrar variantes en la página de colección en el tema Colorblock

Colorblock es un tema de la familia Dawn construido alrededor del color intenso, lo que lo convierte en el caso más claro de toda la lista: si el color es la premisa del tema y tu cuadrícula sigue mostrando una tarjeta por producto, el tema solo hace la mitad de su trabajo. Divide por la 1st option, pon Swatch source en Theme swatch y dale a las muestras un borde gris medio de 1 px para que los valores blancos y pastel sigan siendo visibles sobre el fondo de la tarjeta.

Mostrar variantes en la página de colección en el tema Publisher

Publisher es un tema de la familia Dawn con maquetaciones cargadas de contenido, así que la contención se paga sola. Usa Show selected options separately y nombra una única opción en lugar de combinar dos: una división profunda compite con el contenido editorial de la página. Activa Hide products/variants without images para que cada tarjeta que sobreviva a la división traiga su propia foto.

Mostrar variantes en la página de colección en el tema Ride

Ride es un tema de la familia Dawn: misma configuración, misma incrustación. Cuando tanto el color como la talla determinan la decisión de compra — con equipamiento y material deportivo suele ser así — Show 1st and 2nd option combined da una tarjeta por combinación color/talla. Genera muchas tarjetas, así que combínalo con Hide out of stock y valora Smart sort para que las combinaciones que de verdad se venden vayan delante.

Mostrar variantes en la página de colección en el tema Spotlight

Spotlight pertenece a la familia Dawn y su cuadrícula vive de las imágenes, así que la división tiene que estar respaldada por fotos de variante. Divide por la 1st option y activa Hide products/variants without images antes de mirar el resultado: en una cuadrícula guiada por imagen, un solo mosaico con marcador de posición hunde toda la fila. Pon Title format en Product title (option1) si quieres nombrar la variante sin alargar la tarjeta.

Mostrar variantes en la página de colección en el tema Crave

Crave es un tema de la familia Dawn pensado para navegar rápido, así que controla el número de tarjetas. Divide por la 2nd option cuando el tamaño o el formato marque la decisión y deja las opciones de tipo color a la página de producto. Usa Price format: From min. price para que el formato más pequeño ancle el precio y la tarjeta se lea como punto de entrada y no como techo.

Mostrar variantes en la página de colección en el tema Trade

Trade es un tema de la familia Dawn orientado a catálogos grandes, que es justo donde nombrar las opciones de forma explícita más importa. Usa Show selected options separately y enumera cada nombre de opción y cada traducción; en un catálogo amplio, los criterios posicionales siempre dejan fuera algún segmento. Después, con Advanced settings, da reglas distintas a colecciones distintas en lugar de forzar una sola división sobre miles de SKU.

Mostrar variantes en la página de colección en el tema Rise

Rise es un tema gratuito de la familia Dawn, así que la cuadrícula de colección es el mismo bucle de productos y la misma incrustación resuelve el trabajo. Empieza con la división por la 1st option, Title format: Product title – Variant title y Hide products/variants without images. Si la cuadrícula resultante se hace muy larga en móvil, vuelve a Show selected options separately con una sola opción nombrada en vez de una división combinada.

Mostrar variantes en la página de colección en el tema Horizon

Horizon es el buque insignia gratuito más reciente de Shopify, construido sobre bloques de tema anidados en lugar de secciones y snippets. Su lista de resultados gestiona a la vez la cuadrícula, el estado de los filtros y la paginación, y precarga las páginas contiguas para el scroll infinito: justo por eso bifurcarlo para dividir variantes es mala idea. La incrustación de aplicación evita todo eso. Divide por la 1st option, pon Swatch source en Theme swatch para que las tarjetas divididas hereden los valores de color que tienes en el admin, y usa o el scroll infinito propio de Horizon o el Infinite scroll de la aplicación, no los dos. La vista rápida de Horizon abrirá entonces el color que el cliente ha pulsado en lugar de la variante por defecto.

Mostrar variantes en la página de colección en el tema Atelier

Atelier forma parte de la colección Horizon: aire premium, imágenes a todo ancho y maquetación editorial. Las tarjetas grandes hacen que una división profunda se alargue muy rápido, así que quédate en Show 1st option separately y evita las divisiones combinadas. Pon Title format en Product title – Variant title para que las tarjetas extra parezcan intencionadas y activa Hide products/variants without images: al tamaño de tarjeta de Atelier, un marcador de posición es imposible de disimular.

Mostrar variantes en la página de colección en el tema Dwell

Dwell es un tema de la colección Horizon con tonos suaves y aire de decoración: aquí suele importar más el acabado o el material que un color llamativo. Usa Show selected options separately y nombra la opción explícitamente — Finish, Material, Color — en lugar de fiarte de la posición. Combínalo con muestras de tipo Image para que texturas como roble, nogal o lino se muestren tal cual y no como puntos de color aproximados.

Mostrar variantes en la página de colección en el tema Fabric

Fabric es un tema de la colección Horizon con cuadrículas de imagen grandes pensadas para catálogos amplios: tolera una división densa mejor que la mayoría. Divide por la 1st option y, si tu catálogo abarca de verdad varias estructuras de opciones, usa Advanced settings para dar a cada colección su propia regla en lugar de una división global. Aquí Smart sort compensa especialmente, para que las variantes con más ventas suban en una cuadrícula extensa.

Mostrar variantes en la página de colección en el tema Heritage

Heritage es un tema de la colección Horizon para marcas clásicas y narrativas, donde una cuadrícula ruidosa juega en contra del posicionamiento. Mantén la división en un solo eje: Show 1st option separately. Usa Title format: Product title (option1) para que las tarjetas queden compactas y activa Hide unavailable para que los colores descatalogados desaparezcan de la cuadrícula en silencio en vez de aparecer como callejones sin salida.

Mostrar variantes en la página de colección en el tema Pitch

Pitch es un tema de la colección Horizon para tiendas creativas y con mucho contenido, donde la cuadrícula suele convivir con material editorial. Divide de forma estrecha: Show selected options separately con una opción nombrada. Usa el Display limit de la aplicación cuando lleves la división a una colección destacada de portada, para que una sección diseñada para ocho productos no acabe renderizando cuarenta.

Mostrar variantes en la página de colección en el tema Ritual

Ritual es un tema de la colección Horizon con estética de revista de moda de lujo y tarjetas grandes guiadas por imagen. Divide únicamente por la 1st option: una división combinada multiplica una cuadrícula ya de por sí alta. Pon Price format en From min. price en lugar de un rango si una sola cifra queda más limpia en la maquetación, y usa Hide products/variants without images para que cada tarjeta traiga la fotografía para la que está construido el tema.

Mostrar variantes en la página de colección en el tema Savor

Savor es un tema de la colección Horizon con maquetaciones limpias y centradas en el producto. Cuando el tamaño o el formato determina el precio, divide por la 2nd option para que cada tamaño tenga su tarjeta y su cifra, y pon Price format en Min. price – Max price para todo lo que siga abarcando un rango. Añade Hide out of stock para que la cuadrícula muestre solo lo que puedes enviar hoy.

Mostrar variantes en la página de colección en el tema Tinker

Tinker es un tema de la colección Horizon para herramientas, tecnología y artículos del hogar: catálogos prácticos en los que la opción decisiva suele ser capacidad, longitud o material antes que color. Usa Show selected options separately y nombra esas opciones de forma explícita. Aquí las muestras de tipo Button encajan mejor que los puntos de color, porque los valores tienen nombre y no aspecto.

Mostrar variantes en la página de colección en el tema Vessel

Vessel es un tema de la colección Horizon con una tarjeta limpia y centrada en el detalle. Divide por la 1st option y pon Swatch source en Theme swatch para que las tarjetas divididas hereden los colores e imágenes definidos en tus valores de opción, con retroceso a la variante donde un valor no tenga ninguno. Elige el estilo de agotado Disabled look: en una tarjeta minimalista funciona mejor que un aspa.

Mostrar variantes en la página de colección en el tema Debut

Debut fue el tema por defecto de Shopify antes de Dawn y muchas tiendas siguen usándolo. Es un tema vintage 1.0, así que los bloques de aplicación no están disponibles, pero según la documentación de Shopify: „App embed blocks are supported in vintage and in Online Store 2.0 themes, because they don’t rely on sections or JSON templates.” La división de variantes funciona mediante la incrustación de aplicación, así que aquí sí funciona. Los catálogos de Debut suelen ser lo bastante antiguos como para que la nomenclatura de opciones se haya desviado: usa Show selected options separately e incluye grafías históricas y traducciones.

Mostrar variantes en la página de colección en el tema Brooklyn

Brooklyn es un tema vintage 1.0 construido alrededor de la imagen de marca, lo que hace que los colores ocultos salgan especialmente caros: la imagen es la información de producto. La incrustación de aplicación está soportada en temas vintage, así que la configuración no cambia. Divide por la 1st option y activa primero Hide products/variants without images; los catálogos antiguos tienen la peor cobertura de fotos de variante y la división deja cada hueco al descubierto de golpe.

Mostrar variantes en la página de colección en el tema Narrative

Narrative es un tema vintage 1.0 para catálogos pequeños y narrativos. Con pocos productos y pocas variantes, aquí Show all options combined es seguro: el número de tarjetas se mantiene bajo y cada variante consigue su mosaico. Como Narrative es anterior a los valores de color nativos de Shopify, pon Swatch source en Variant o asigna un metacampo de variante en lugar de esperar algo de Theme swatch.

Mostrar variantes en la página de colección en el tema Supply

Supply es un tema vintage 1.0 para inventarios grandes con filtrado, que es justo donde la división compensa: un filtro de color sobre una cuadrícula sin dividir devuelve productos que en su mayoría muestran otra cosa. Dada la profundidad del catálogo, usa Show selected options separately y combínalo con Hide out of stock para que los filtros no lleven a callejones sin salida.

Mostrar variantes en la página de colección en el tema Venture

Venture es un tema vintage 1.0 para catálogos grandes. Cuando color y talla determinan la decisión, Show 1st and 2nd option combined da una tarjeta por combinación, pero con esta profundidad de catálogo comprueba el resultado en móvil antes de publicar. Usa Advanced settings para aplicar la división agresiva solo a las colecciones que se benefician y deja el resto con una regla más ligera.

Mostrar variantes en la página de colección en el tema Boundless

Boundless es un tema vintage 1.0 con imágenes a pantalla completa y poco texto: las tarjetas son enormes, así que una división profunda produce una página larguísima. Limítate a Show 1st option separately y valora Title format: Variant title para que el texto de la tarjeta siga siendo tan sobrio como pretende el tema. Aquí Hide products/variants without images es prácticamente obligatorio.

Mostrar variantes en la página de colección en el tema Minimal

Minimal es un tema vintage 1.0 con una cuadrícula limpia y centrada en el producto en sus tres estilos. Divide por la 1st option y mantén las muestras discretas: una forma circular en tamaño pequeño con borde fino encaja mejor que fichas grandes. Como Minimal es anterior a los valores de color nativos, alimenta las muestras desde Variant o desde un metacampo asignado.

Mostrar variantes en la página de colección en el tema Simple

Simple es un tema vintage 1.0 con navegación lateral y catálogos profundos. Usa Show selected options separately y nombra tus opciones en lugar de fiarte de la posición: en un catálogo construido a lo largo de años, las suposiciones posicionales se rompen. Activa Hide unavailable para que las variantes descatalogadas dejen de ocupar espacio y usa las anulaciones por colección para que cada categoría tenga su propia regla.

Mostrar variantes en la página de colección en el tema Express

Express es un tema vintage 1.0 para navegar rápido y sin fricción. Divide por la 2nd option donde el tamaño o el formato determine la elección, para que el cliente escoja un artículo concreto directamente desde la cuadrícula. Activa el add to cart button en un plan de pago para que una tarjeta dividida pueda comprarse sin pasar por la página de producto: esa es toda la premisa de este tema.

Mostrar variantes en la página de colección en el tema Jumpstart

Jumpstart es un tema vintage 1.0 para catálogos muy pequeños. Con un puñado de productos, Show all options combined convierte toda la gama en algo navegable sin generar un número inmanejable de tarjetas. Pon Title format en Product title – Variant title para que cada mosaico sea inequívoco y deja activas las reglas de ocultación para que la cuadrícula corta se mantenga limpia.

Mostrar variantes en la página de colección en el tema Pop

Pop es un tema vintage 1.0 con diseño llamativo y catálogos pequeños. Divide por la 1st option para que cada color tenga su mosaico y dale a las muestras un borde visible: los fondos de tarjeta intensos se tragan los valores claros. Como en cualquier tema vintage, la incrustación de aplicación está soportada; solo los bloques de sección arrastrables quedan reservados a Online Store 2.0.

Mostrar variantes en la página de colección en el tema Impulse

Impulse es uno de los temas de pago más instalados de la Shopify Theme Store, listado a 500 $ con un 94 % de valoración. Ya renderiza muestras en las tarjetas de colección, pero una muestra no es una tarjeta: no tiene su propio espacio en la cuadrícula, ni su propio precio, ni su propio lugar en el orden, y no aparece cuando alguien filtra por ese color. Divide por la 1st option y revisa después el cambio de imagen al pasar el ratón; en una cuadrícula dividida, la segunda imagen puede pertenecer a otro color. Como la aplicación funciona como incrustación, Impulse sigue recibiendo sus actualizaciones con normalidad.

Mostrar variantes en la página de colección en el tema Enterprise

Enterprise está listado a 420 $ con un 94 % de valoración y está pensado para catálogos amplios, así que nombrar las opciones de forma explícita es la decisión correcta: usa Show selected options separately y enumera cada nombre de opción y cada traducción. Varía la regla por colección con Advanced settings en lugar de forzar una división sobre todo el catálogo, y activa Smart sort para que las variantes más fuertes encabecen una cuadrícula grande.

Mostrar variantes en la página de colección en el tema Wonder

Wonder está listado a 390 $ con un 99 % de valoración. La configuración es la incrustación de siempre: sin bifurcar el tema, así que su flujo de actualizaciones queda intacto. Divide por la 1st option, pon Swatch source en Theme swatch para que las tarjetas divididas hereden los datos de color que ya mantienes en el admin, y decide entre las muestras del tema y las de la aplicación; ejecutar ambas es peor que ejecutar cualquiera de las dos.

Mostrar variantes en la página de colección en el tema Pebble

Pebble está listado a 400 $ con un 98 % de valoración. Divide por la 1st option y pon Title format en Product title – Variant title para que las tarjetas extra parezcan intencionadas. Si el tema trae su propio „cargar más” o scroll infinito, elige uno: o el del tema o el Infinite scroll / Auto load more de la aplicación, nunca ambos.

Mostrar variantes en la página de colección en el tema Hyper

Hyper está listado a 400 $ con un 99 % de valoración. Cuando ambos ejes determinan la decisión, Show 1st and 2nd option combined da una tarjeta por combinación: la división útil más fina. Combínala con Hide out of stock y Smart sort, porque una división combinada sin jerarquía deja la cuadrícula ordenada por nada en concreto.

Mostrar variantes en la página de colección en el tema Be Yours

Be Yours está listado a 350 $ con un 98 % de valoración. Divide por la 1st option y ajusta el estilo de las muestras de la aplicación al diseño de tarjeta existente: forma, tamaño, grosor y color del borde, alineación y márgenes son configurables, así que las muestras pueden parecer nativas en vez de añadidas. Pon el estilo de agotado en Disabled look si el diseño de tarjeta es más bien minimalista.

Mostrar variantes en la página de colección en el tema Focal

Focal está listado a 320 $ con un 93 % de valoración. Incrustación habitual, división por la 1st option, Product title – Variant title. Aquí merece atención la imagen al pasar el ratón: si la segunda imagen pertenece a otro color, desactiva el cambio o reordena tus imágenes de variante para que la foto de hover corresponda a la tarjeta. Extiende la división a la página de búsqueda en un plan de pago para que las cuadrículas filtradas y buscadas se comporten igual.

Mostrar variantes en la página de colección en el tema Prestige

Prestige está listado a 400 $ con un 91 % de valoración y tiene un aire editorial, con tarjetas grandes y espaciados generosos. Mantén la división plana — solo Show 1st option separately — para que la cuadrícula no se descontrole. Pon Price format en From min. price para una cifra única más limpia y usa Hide products/variants without images para que cada tarjeta traiga la fotografía sobre la que está diseñado el tema. Como no se edita nada del tema, las actualizaciones de Prestige se instalan con normalidad.

Mostrar variantes en la página de colección en el tema Concept

Concept está listado a 400 $ con un 98 % de valoración. Usa Show selected options separately y nombra tus opciones si el catálogo mezcla estructuras; si no, la división por la 1st option es la vía más rápida. Activa el add to cart button de la aplicación en un plan de pago y ajusta su color de texto y de fondo al botón existente del tema, para que las tarjetas divididas conserven el diseño por el que pagaste.

Mostrar variantes en la página de colección en el tema Symmetry

Symmetry está listado a 420 $ con un 94 % de valoración y se usa mucho en catálogos profundos con filtrado lateral: el escenario en el que la división tiene mayor efecto, porque los resultados filtrados por fin coinciden con el filtro. Usa Show selected options separately para ganar fiabilidad en un catálogo amplio, añade Hide out of stock para que los filtros nunca lleven a callejones sin salida y define reglas por colección en Advanced settings.

Otros temas de pago populares

La misma configuración vale sin cambios para Broadcast, Motion, Eurus, Release, Stiletto, Xtra, Palo Alto, Sleek, Allure, Ignite y Monk, y para cualquier otro tema de Shopify. Activa la incrustación, elige la división, define los formatos de título y precio y mira la vista previa.

Por qué una sola configuración funciona en todos los temas

Dos cosas la hacen independiente del tema.

Primero, se instala como incrustación de aplicación de Shopify, no como modificación del tema. La documentación de Shopify es explícita en que las incrustaciones funcionan tanto en temas vintage como en temas de Online Store 2.0, porque no dependen de secciones ni de plantillas JSON. Por eso Debut y Horizon requieren la misma instalación.

Segundo, las tarjetas de variante no son genéricas. La aplicación trabaja con una plantilla por tema: un mapeo del contenedor de tu colección, del elemento de tarjeta de producto, del título, la imagen (incluida la imagen de hover o secundaria), el precio, el precio rebajado y el marcado de las etiquetas. Las tarjetas de variante se clonan de tu tarjeta del tema y se rellenan variante a variante. Tu diseño de tarjeta, tus etiquetas y tu botón se conservan en lugar de sustituirse.

Resolución de problemas

No ha cambiado nada en la página de colección

Comprueba el estado App embed en el panel. Si pone „Not installed”, el guardado en el editor de temas no se ha aplicado: vuelve a abrir Editar tema → Incrustaciones de aplicación, activa Variants on Collection y pulsa Guardar.

Solo se dividen algunos productos

Los nombres de opción no son uniformes en el catálogo. Cambia a Show selected options separately y escribe cada grafía y traducción que utilices.

La cuadrícula está llena de imágenes de marcador de posición

Activa Hide products/variants without images o asigna imágenes a las variantes en el admin de Shopify.

Demasiadas tarjetas

Probablemente estás en Show all options combined. Vuelve a una sola opción o usa Show selected options separately y nombra solo el eje por el que navegan tus clientes.

He cambiado de tema

Activa la incrustación en el tema nuevo y pulsa Enable App en Theme settings. Tus ajustes se conservan. Las actualizaciones de tema no requieren ninguna acción.

Necesito desactivarlo ahora mismo

El interruptor Emergency del panel desactiva la aplicación en la tienda al instante y conserva todos los ajustes. Úsalo en lugar de desinstalar.

Preguntas frecuentes

¿Se duplican mis productos al mostrar variantes en la página de colección?

No. Catálogo, variantes, inventario y páginas de producto quedan intactos. Solo cambia lo que renderiza la cuadrícula, por eso es reversible con un clic.

¿Funciona en mi tema?

Sí. La instalación se hace mediante una incrustación de aplicación de Shopify, soportada tanto en temas vintage 1.0 como en Online Store 2.0: Dawn, Horizon, Debut, Impulse, Prestige y todos los demás.

¿Tengo que editar código del tema?

No. El único cambio es activar una incrustación de aplicación en el editor de temas. No se modifica ningún archivo Liquid.

¿Se romperá con la próxima actualización del tema?

No. Como no se edita ningún archivo del tema, las actualizaciones se instalan con normalidad y no requieren ninguna acción.

¿Puedo mostrar variantes como productos también en la búsqueda y la portada?

Sí. La página de resultados de búsqueda, las colecciones de portada y collections/all son interruptores propios en los planes de pago, además de los bloques de selección manual, más vendidos y productos relacionados.

¿Pueden tener reglas distintas colecciones distintas?

Sí. Advanced settings sobrescribe los valores por defecto colección por colección, incluidos filtros de variante por opción, precio, inventario, descuento, etiqueta o metacampo, y orden manual.

¿Cuánto se tarda en configurarlo?

Unos cinco minutos: activar la incrustación, encender „Show variants separately”, elegir colección, elegir la opción de división, definir el formato de título y ver la vista previa.

Empieza ahora

El plan Build es gratuito y ofrece acceso completo a las funciones, así que puedes dividir una colección real en tu propio tema y valorar el resultado antes de pagar nada. Standard y Advanced desbloquean todas las colecciones, además del botón de añadir al carrito, las colecciones de portada, la página de búsqueda, collections/all y el scroll infinito, ambos con 3 días de prueba gratuita.

Instalar Stamp — Show Variants on Collection y mostrar variantes en tus páginas de colección en unos cinco minutos.

Table of Contents

Create your account