Lista desplegable de colores de Swatch / Variant para productos shopify
Lo que intento hacer es hacer una lista desplegable para la variante de 'color' del producto, sin embargo, con algún tipo de asociación con el valor de la opción, se muestra una muestra de imagen o jpg.
Encontré este tutorial para asociar muestras de color con la selección de color del producto. Sin embargo, esto muestra las variantes en forma de botón en lugar del desplegable predeterminado.
http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products
He estado jugando con los scripts pero nunca logré obtener lo que necesitaba. Así que aquí estoy por un poco de ayuda.
Aquí está mi lista de variantes:
<select id="product-select-option-1" class="single-option-selector">
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
generado por :
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
¿Hay alguna manera de que ... diga, asocie value = "Red" con un cuadrado rojo de 20x20 o, red.jpg?
Aquí hay una captura de pantalla para una mejor idea:
