Я собираюсь сделать выпадающий список для варианта «цвет» продукта, однако с некоторой ассоциацией со значением параметра отображается образец изображения или jpg.

Я нашел этот урок, чтобы связать образцы цветов с выбором цвета продукта. Однако, это отображает варианты в форме кнопки вместо выпадающего списка по умолчанию.

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

Я возился со сценариями, но так и не смог получить то, что мне нужно. так что здесь я за небольшую помощь.

Вот мой список вариантов:

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

Сгенерированно с помощью :

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

Есть ли способ для меня, скажем, ассоциировать value = "Red" с красным квадратом 20x20 или, скажем, red.jpg?

Вот скриншот для лучшей идеи:

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