Mam zamiar zrobić listę rozwijaną dla wariantu „kolor” produktu, jednak z jakimś skojarzeniem z wartością opcji wyświetlana jest próbka obrazu lub jpg.

Znalazłem ten samouczek, aby powiązać próbki kolorów z wyborem koloru produktu. Jednakże wyświetla to warianty w formie przycisku zamiast rozwijanego menu.

http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products

Zajmowałem się skryptami, ale nigdy nie udało mi się uzyskać tego, czego potrzebowałem. więc jestem tu po pomoc.

Oto moja lista wariantów:

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

wygenerowane przez :

{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}  
</option>
{% endfor %}

Czy jest jakiś sposób, aby ... powiedzieć, wartość skojarzona = "Czerwony" z czerwonym kwadratem 20x20 lub powiedzieć, czerwony.jpg?

Oto zrzut ekranu dla lepszego pomysłu:

http://i.imgur.com/XgW2qHa.png