En este artículo, exploraremos cómo destacar la imagen representativa de cada variante de un producto en la página de colección de Shopify sin redundancias de imágenes, especialmente cuando queremos exhibir cada variante de color de manera individual.

Además, aprenderemos a lograr que, al hacer clic en un producto, se seleccione automáticamente la variante correspondiente. También veremos cómo mostrar el valor de la opción junto al título, así como el precio específico de la variante si difiere del precio base del producto.

👋Esta solución se aplica eficazmente a todos los temas gratuitos de Shopify, como Dawn, Sense y Craft. En caso de que estés utilizando un tema premium y desees asistencia personalizada, no dudes en ponerte en contacto con nosotros; estaremos encantados de adaptar esta solución a tu tema específico.

Instrucciones para implementar el código

👉Paso 1: Configura tus productos

Asegúrate de que cada producto tenga múltiples variantes para la opción que deseas mostrar. La posición de la opción (ya sea el primer o segundo lugar) no es relevante. Cada variante debe tener una imagen destacada asociada.

👉Paso 2: Crea el archivo card-variant.liquid

1. Duplica tu tema y selecciona "Editar Código" en tu duplicado.
2. Haz clic en "Agregar un Nuevo Fragmento" (snippets en Shopify) y asigna el nombre del archivo como ".card-variant".
3. Copia y pega el siguiente código en el archivo recién creado:

VISUALIZA EL CODIGO AQUI: Codepen Tasky

👉Paso 3: Edita el archivo main-collection-product-grid.liquid

1. Utiliza la barra de búsqueda y localiza el archivo "main-collection-product-grid".
2. Desplázate hasta la línea 162 y reemplaza el fragmento de código actual:

<li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %} > {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, lazy_load: lazy_load, show_quick_add: section.settings.enable_quick_add, section_id: section.id %} </li>

3. Copia este código nuevo que reemplazara al código que te mostramos arriba en el punto 2:

{%- liquid assign option_chosen = "Color" assign option_index = '' for option in product.options if option_chosen == option assign option_index = forloop.index0 break endif endfor -%} {%- if option_index == '' -%} <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %} > {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, lazy_load: lazy_load, show_quick_add: section.settings.enable_quick_add, section_id: section.id %} </li> {%- else -%} {% assign displayed_values = "" %} {% for variant in product.variants %} {%- liquid assign variant_option = variant.options[option_index] assign valueIsDisplayed = false for value in displayed_values if value == variant_option assign valueIsDisplayed = true break endif endfor -%} {% unless valueIsDisplayed %} {%- assign variant_option_arr = variant_option | append: ';' | split: ';' -%} {% assign displayed_values = displayed_values | concat: variant_option_arr %} <li class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %} > {% render 'card-variant', card_variant: variant, variant_option: variant_option, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, lazy_load: lazy_load, show_quick_add: section.settings.enable_quick_add, section_id: section.id %} </li> {% endunless %} {% endfor %} {%- endif -%}

Ahora, con estos cambios, podrás exhibir cada variante de color de tus productos en la página de colección de Shopify. Si deseas destacar otras opciones, simplemente modifica el valor de la variable "option_chosen".

¿Qué pasa si deseas hacer lo contrario? 

Muchos de nuestros clientes, por una cuestión de stock y organización tienen sus productos variantes separados como productos individuales, pero en los resultados de colecciones desean agrupar esos productos. 

Si este es tu caso, puedes usar esta aplicación que funciona muy bien para este caso puntual:  PL Product Color Swatches

Recuerda publicar la copia de tu tema una vez que estés satisfecho con las modificaciones. ¡Esperamos que estas mejoras en la presentación de variantes enriquezcan la experiencia de tus usuarios!