Para este tutorial, usaremos la versión 12.0.0 del tema Dawn, ¡pero no te preocupes! Ya sea que prefieras Fresh, Sense, Spotlight o Craft, la base del código sigue siendo consistente, lo que hace que esta personalización sea accesible para una variedad de usuarios de Shopify.
👉Instalación del tema: (en el caso de que actualmente estés usando otro y vayas a migrar a Dawn)
Navega a tu panel de administración de Shopify y dirígete a la sección Tienda en línea. Aquí, instalaremos el tema Dawn (o el tema que elijas). Si quieres ver todos los themes, acá te dejamos el link oficial
![](https://cdn.shopify.com/s/files/1/0552/0526/5564/files/02_480x480.jpg?v=1701192747)
Como cambiar el código liquid del theme:
Antes de continuar, duplica tu tema y crea una copia de seguridad para evitar contratiempos durante el proceso.
Accede al editor de código yendo a Temas > Editar código. Usando la barra de búsqueda, busca "variant" y abre el archivo "product-variant-options.liquid". Reemplaza las líneas especificadas (alrededor de las líneas 62 a 65) con el código proporcionado en la publicación del blog.
Ir a product-variant-options.liquid Buscar el siguiente código:
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value -}} <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span> </label> |
👉Reemplazar con este código:
{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-image: url({{ product.variants[forloop.index0].image | img_url: '' }});height:40px;width:40px;background-size: cover;" ></label> {% else %} <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value -}} <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span> </label> {% endif %} |
Guardar los cambios.
Consejos de personalización:
¿Quieres ajustar el tamaño de esos círculos de muestra de color? Es muy sencillo. Sumérgete en el código proporcionado y modifica el ancho y el alto en la sección CSS en línea para que coincida con tus preferencias de tema.
Puedes pedir nuestra ayuda con esta tarea.
Toques finales:
Guarda tus cambios, pero antes de actualizar, ten un poco de paciencia. Espera uno o dos minutos para permitir que los cambios surtan efecto. Luego, actualiza la página de tu producto y listo, tus muestras de color ahora son imágenes variantes dinámicas, lo que agrega una capa adicional de encanto a sus listados de productos.