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
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.