Add to Cart Button Add Different Product

Topic summary

A Shopify developer encountered an issue where “Add to Cart” buttons in a homepage collection slider were adding the wrong product to the cart. Despite adding variant and quantity fields to the form, clicking any of the multiple add-to-cart buttons consistently added the same incorrect product.

Root Cause:
Multiple forms on the same page shared the same ID (add-to-cart-form), causing conflicts.

Solution:
Change the form ID to be unique for each product by appending the product ID: add-to-cart-form-{{product.id}}

Outcome:
The solution successfully resolved the issue, with the original poster confirming it worked.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

i display one collection slider on homepage. i add one form for add to cart firstly i show the error because in form there are not varient or quantity field. Now i add this to form but when i click on add to cart button different product are add. I try this to more than 5 add to cart button on home page and its add different product but different product are same. Always same product are add in cart.


<form action="/cart/add" method="post" class="shappify_add_to_cart_form ajk" enctype="multipart/form-data" data-product-id="{{ product.id }}" id="add-to-cart-form">
<div class="prices">
{% if product.compare_at_price > product.price %}
<span class="compare-price">{{ product.compare_at_price_max | money }}</span>
<span class="price on-sale home-price-on-sale" itemprop="price">{{ product.price | money }}</span>
{% else %}
<span class="price home-price" itemprop="price">{{ product.price | money }}</span>
{% endif %} 
{% if product.tags contains 'cost-per-letter' %}
per letter
{% endif %}
</div>

<div id="product-variants">
{% assign variantCount = product.variants | size %}
{% if product.available %}
{% if variantCount > 1 %}
<select id="product-selectors" name="id" style="display:none">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>

{% else %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% endif %}
{% endif %}
</div>

{% if product.available %}

<!-- <input type="number" id="quantity" name="quantity" value="1" min="1"> -->

{% if product.tags contains 'cost-per-letter' %}

{% else %}

{% endif %}

{% for tag in product.tags %}
{% assign tag_name = tag | split: '-' %}
{% if tag_name[1] == 'days' %}
{% assign days = tag_name[0] %}

{% elsif tag_name[1] == 'day' %}
{% assign day = tag_name[0] %}

{% endif %}
{% endfor %}

{% if settings.display_subtotal and product.available %}
<div class="total-price">
<label>Subtotal: </label><span>{{ product.price | money }}</span>
</div>
{% endif %}

<input type="submit" name="add" class="btn home-button" id="product-add-to-cart" value="Add to Cart">
{% else %}
<input type="submit" name="add" class="btn home-button" id="product-add-to-cart" disabled value="Sold Out">
{% endif %}
</form>

Hi,
To deeper look into your issue, Can you please provide store url and if store is password protected, Please provide store password as well.
Thanks!

https://jkuwqfe5lliv6u82-7645455.shopifypreview.com

Best Seller & New and Trending Section

Change form id from add-to-cart-form to add-to-cart-form-{{product.id}}
Please check if it helps!
Thanks!

Thanks Its Worked