Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I received this website and they told me to fix this issue.
Clicking on a variant will display the first variant when adding it to the cart. I don't know what they did, but they say they didn't change in the last few days. The theme is Boost
This is happening on all the products: https://cocoandduckie.com/products/qudo-13mm-tondo-crystal-deluxe-silver-topper
Here is the main-product.liquid: https://codeshare.io/Bd6K7y
Solved! Go to the solution
This is an accepted solution.
I'd try to replace this:
<form method="post" action="/cart/add" class="custom-cart-form">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<label for="quantity">Quantity:</label>
<select id="quantity" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
{%- form 'product', product, id: product_form_id, class: form_class -%}
With this:
{%- form 'product', product, id: product_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" data-product-select />
<label for="quantity">Quantity:</label>
<select id="quantity" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="submit" value="Add to cart" class="btn">
Whoever added the quantity drop-down has created an extra form and removed required elements from the main cart form...
There are other possible improvements, but start with this.
This is an accepted solution.
I'd try to replace this:
<form method="post" action="/cart/add" class="custom-cart-form">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<label for="quantity">Quantity:</label>
<select id="quantity" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
{%- form 'product', product, id: product_form_id, class: form_class -%}
With this:
{%- form 'product', product, id: product_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" data-product-select />
<label for="quantity">Quantity:</label>
<select id="quantity" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="submit" value="Add to cart" class="btn">
Whoever added the quantity drop-down has created an extra form and removed required elements from the main cart form...
There are other possible improvements, but start with this.
Thanks for taking the time to solve my problem, now it works!
I was testing most of the products, and seems to work perfectly! Thanks again.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025