Hi, I need help adding the “Add to cart” button on homepage and collection page. Tried coding, but it shows the button on top of the product card instead of below. Why is this so hard? It’s a simple button every website on the internet has..
Can you share your store url Add to cart on product card should be by default!
It’s not hard. It’s just theme code. You can always upgrade to a better theme if you want. There are thousands of Shopify themes, and most of them already come with that..
Hi, make sure you place the add to cart button code inside the product card’s container, but after the product info section in your liquid file. Check your CSS too, the button might be positioned absolute or floated, causing it to jump on top. If unsure, share your theme name or the snippet you edited.
I am currently using a paid theme version, however, surprisingly they dont have it
It is easy and it isn’t (that’s why people study programming and it’s a job, etc)…
You have a quick view button there, I think it could be a good idea to add the button just under that.
Try adding:
<button type="submit" name="add" data-add-to-cart="" class="btn btn--full add-to-cart add-to-cart--secondary">
<span data-add-to-cart-text="" data-default-text="Add to cart">
Add to cart
</span>
</button>
Just after this part in your liquid
<button class="quick-product__btn js-modal-open-quick-modal-6108839411892 small--hide" aria-expanded="true">
<span class="quick-product__label">Quick view</span>
</button>
It would then look like this:
<button class="quick-product__btn js-modal-open-quick-modal-6108839411892 small--hide" aria-expanded="true">
<span class="quick-product__label">Quick view</span>
</button>
<button type="submit" name="add" data-add-to-cart="" class="btn btn--full add-to-cart add-to-cart--secondary">
<span data-add-to-cart-text="" data-default-text="Add to cart">
Add to cart
</span>
</button>
You would need to style it and what not, I imagine.
To get it under the product, with the prices, paste that button code from above in this div:
<span class="visually-hidden">Regular price</span>
<span class="grid-product__price--original">Rs. 339.00</span>
<span class="visually-hidden">Sale price</span><span class="sale-price">
from Rs. 299.00
</span>
Let me know how you go.
Hi! Here - vasara-oils.myshopify.com
Let me know if its works
You’re almost there. I guess you’ve pasted it inbetween the spans of the 399 and 299. I would put it under/after the 299. Looking like this:
<span class="visually-hidden">Regular price</span>
<span class="grid-product__price--original">Rs. 339.00</span>
<span class="visually-hidden">Sale price</span><span class="sale-price">
from Rs. 299.00
</span>
<button type="submit" name="add" data-add-to-cart="" class="btn btn--full add-to-cart add-to-cart--secondary">
<span data-add-to-cart-text="" data-default-text="Add to cart">
Add to cart
</span>
</button>
The whole card is linked to product page, you’d have to move the to just before the button.
Sorry, I keep forgetting that the html text won’t show up in my rapid typing!
</a>
Is what is missing from the last sentence.
Another option, is to put the button after the </a> but in the same div as the product card, it might need more styling.
Hi, this happens when the button code is added inside the product image/media wrapper instead of the product information container. Most Shopify themes use separate product-card structures for homepage and collection sections, so the button inherits the wrong positioning and appears on top of the card.
The fix is to place the button inside the correct product-card content block and adjust the theme CSS so it follows the existing layout flow rather than absolute positioning.
Yeah I’ve seen so many issues with the Motion theme. You’re right, it’s actually meant to have the Quick View modal button on hover, which is found in the Theme Settings.
Otherwise, find your product card snippet. Look for the closing tag of grid-product__content and paste this just before that
<div class="grid-product__atc">
{%- if product.variants.size == 1 and product.variants.first.available -%}
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<input type="hidden" name="quantity" value="1">
<button type="submit" name="add" class="btn btn--primary btn--full grid-product__atc-btn">
Add to cart
</button>
</form>
{%- elsif product.available -%}
<a href="{{ product.url }}" class="btn btn--primary btn--full grid-product__atc-btn">
Choose options
</a>
{%- else -%}
<button class="btn btn--primary btn--full grid-product__atc-btn" disabled>
Sold out
</button>
{%- endif -%}
</div>
then add this to your css
.grid-product__atc {
padding: 8px 12px 12px;
}
.grid-product__atc-btn {
width: 100%;
font-size: 1.2rem;
padding: 8px 12px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.grid-product__item:hover .grid-product__atc-btn {
opacity: 1;
transform: translateY(0);
}
Hi, I’d be happy to help you get the “Add to cart” button in the right position.
It’s not that complicated to add an “Add to cart” button, but it can be finicky. Let’s try to troubleshoot why it’s not showing up below the product card on your homepage and collection pages.
By default, Shopify has a layout structure that places the Add to Cart button above the product card. To move it below the card, you can edit your theme’s code.
Here are a few steps to try:
1. Access your theme’s code in the Shopify admin by going to Online Store > Themes > Actions > Edit code.
2. Open the ‘product.liquid’ file, which controls the product card layout.
3. Look for the line of code that starts with `<button id=“AddToCart”`, and you’ll likely find it inside a container or row element. Move that code below the product image or card content element.
4. Save the changes and check your homepage and collection pages to see if the Add to Cart button is now in the correct position.
If you’re not comfortable editing code or don’t want to risk breaking your theme, you can try a more straightforward solution. Some themes have a setting or a section that allows you to customize the layout.
If you’re still having trouble, feel free to share more details about your theme, and I can try to offer more specific help.
If you prefer not to maintain theme code or want a more straightforward solution, an app like Quote Snap can handle the layout customization for you, including hiding or repositioning the Add to Cart button.