Product Page Colors as Swatches & Size as Dropdown

AsadBaig
Shopify Partner
43 1 2

Hey Community, I'm working on product options and i want to show my colors and buttons and size as dropdown. I'm using dawn theme default radio and select selectors. When i add only single option(color or size) it works good as color shows in buttons and size shows in dropdown. But when i use both options in my product page both options didn't work and my "add to cart button" shows unavailable. I have attached my code of variants. Please let me know if anyone can help

{%- when 'variant_picker' -%}
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.show_variants == true -%}
                  {%- for option in product.options_with_values -%}
                    {% if product.options.size > 1 -%}
                    {% if option.name == 'Color'%}
                      <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ option.name }}</legend>
                          {%- for value in option.values -%}
                            <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="{{ product_form_id }}" {% if option.selected_value == value %}checked
                              {% endif %}><label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </fieldset>
                        <script type="application/json">
                          {{ product.variants | json }}
                        </script>
                      </variant-radios>
                    {% else %}
                      <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        <div class="product-form__input product-form__input--dropdown">
                          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                            {{ option.name }}
                          </label>
                          <div class="select">
                            <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}">
                              {%- for value in option.values -%}
                                <option value="{{ value | escape }}">
                                  {{ value }}
                                </option>
                              {%- endfor -%}
                            </select>
                            {% render 'icon-caret' %}
                          </div>
                        </div>

                        <script type="application/json">
                          {{ product.variants | json }}
                        </script>
                      </variant-selects>
                    {%- endif -%}
                  {% endif %}
                  {% endfor %}
                {% endif %}
                {%- endunless -%}
Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
Replies 4 (4)
AsadBaig
Shopify Partner
43 1 2

Hey @Elite1, thanks for recommendation but she's marketing expert i need answer from developer who know about custom liquid development.

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
Lucid_Polygon
Shopify Partner
349 63 91

I think that's because you are using if and else meaning either if will show or else will show.

Instead use two if conditions one to check if it is colour and another to check if it is not colour

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
AsadBaig
Shopify Partner
43 1 2

I'm closed to the answer. As updateoption() function is not complete but i tried to change it still get undefined in console.

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/

maapaa02
Shopify Partner
3 0 0

try to use this code this will work perfectly

{%- unless product.has_only_default_variant -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input {% unless forloop.first %}hidden{% endunless %}">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
data-handle="trigger-input"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} data-update-url="false">
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown {% if forloop.first %}hidden{% endif %}">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
data-handle="trigger-select"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}

<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}"
>
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>

<script>
for (let i = 0; i < 3; i++) {
$('input[data-handle="trigger-input"][name="Color"]').click((e) => {
const value = e.currentTarget.value;
$('select[data-handle="trigger-select"][name="options[Color]"]').val(value )
});
}
$('select[data-handle="trigger-select"][name="options[Size]"]').change((e) => {
const value = e.currentTarget.value;
$(`input[type="radio"][name="Size"][value="${value}"]`).trigger("click")
});
</script>