RETINA - how to use color swatches AND drop down for product with 2 variants ?

Highlighted
New Member
3 0 0
I have a product with two variants and want to use color swatches for color (variant 1) and dropdown for product height (variant 2) how would I go about doing this in Retina theme? I'm assuming some change in product-form.liquid ?

Thanks,
Steve
0 Likes
Highlighted
Shopify Partner
1023 214 463

@stephanholly 

 

Follow all steps as per this link https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

If you want to display color options as swatch and other options as drop down then use following code for step 2 in "Include swatch.liquid in product.liquid" instruction:

{% if product.available and product.variants.size > 1 %}
 {% include 'swatch' with 'Color' %}
{% endif %}

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
New Member
21 0 0

I have question related to the answer.

 

I've followed this tutorial and can't figure out how to split variants to radio Color Swatches and Dropdown options (size).

 

Code for my product page variants:

<select id="product-select" name="id"> 
            {% for variant in product.variants %}
              {% if variant.available %}
                <option value="{{ variant.id }}">
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                </option>
              {% else %}
                <option value="{{ variant.id }}">
                  {{ variant.title }} - sold out
                </option>
              {% endif %}
            {% endfor %}            
</select>       
{% if product.available and product.variants.size > 1 %}
     {% render 'swatch' with 'Color' as swatch %}
{% endif %}

The actual frontend output:

 

variants.png

 

What I try to achieve is to remove Colors from dropdown list and then make them work separately as radio buttons.

 

0 Likes