Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
no matter what variant the customer chooses, the default (first) one gets added to cart and we have to ask each customer by phone on what size they wanted.
I did not alter the code of the product template in the sections related to variants or ATC but I did on elements below it (ie. product suggestions with metafields).
We use Cozy theme and the one add-on that might interfere would be "Product Filter & Search".
Browser console shows no related errors.
Attached is the full product-template.liquid file.
• URL to check is: https://www.locapica.com/collections/rochii-de-seara/products/rochie-de-seara-electra-midi-petrecuta...
• Default variant is smallest size (ie. 36)
• I have hidden the second variation element (color) in CSS as we only have one per product and we just use it for the products filter
Relevant snippets for assist:
• Button type variants list:
{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<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">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
• Add to cart:
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<div class="product-form__buttons">
<button id="AddToCart"
type="submit"
name="add"
class="btn product-form__submit button button--full-width {% if product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
><i class="mdi mdi-cart-outline"></i>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
<button id="comtel" class="btn product-form__submit button button--full-width button--secondary">
<a href="tel:0767866566" alt="Comandă telefonic" title="Comandă telefonic">Comandă telefonic: <span>0767 866 566</span></a>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{%- endif -%}
<div class="btn notify_btn{% if product.selected_or_first_available_variant.available == true %} hide{% endif %}" id="notify" data-toggle="modal" data-target="#notify-content"><i class="mdi mdi-email-outline"></i><span>{{ 'products.product.notify_me' | t }}</span></div>
</div>
•
Hello @Attrexx ,
1) Why variant code is outside the scope of form tag.
2) Compare your variant change functionality with the theme preview. I mean check a product in the theme demo and notice if there is a change in URL when variant changes. I think variant ID changes in the URL when variant changes.
Thanks
Theme preview option changing does not alter the URL.
Theme preview shows same code structure as our site (like I said, we did not alter it).
https://theme-cozy.myshopify.com/collections/fashion/products/exercita-tionem-ulam-1
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025