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.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025