All things Shopify and commerce
I want to add an "add to cart" button below the product in the featured collection module, as shown in the picture. What can I do?
Hi @Ximn welcome to the Shopify Community,
you can add quick view button on collection page by using default settings follow below steps.
- Navigate to Theme Settings > Product grid
- Click on the Quick buy link style dropdown and select the style to be Button or Whole product.
If no quick buy is required, choose the option disabled.
if you want custom add to cart button follow bellow steps.
- Online Theme
- Edit Code
- find product-grid OR product-loop
- place the below code after price or start rating.
done.
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
Thanks
Hi,
I tried your method and it works.
Can I change the button to the one in the picture so it would fit the style of our store better.
And I hope that customers will not jump to the shopping cart page after adding a purchase, but will still stay on the current page. Can this be achieved?
1- For style you can use any of the default style by using css code remove the class btn from the button hopefully will resolve this issue.
2- For add to cart this is related to some custom funtionality.
Thanks
Hi, im trying to figure out in what liquid file did you paste the code?
It seems I can't find the product-loop or product grid...
Hi, were you able to figure this out? I cannot find product-loop or product-grid either, but I would like to add an "Add to cart" button underneath my products. Thank you!
Hi, if we do not have product-loop or product-grid, how can we add an "Add to cart" button underneath our products? Right now the "Quick buy" button only appears when we hover over our products. We would really appreciate any help! Thank you in advance!
@avaskye which theme
This is for the symmetry theme!
@avaskye might be any file related to product item or product loop I guess.l into the snippet folder
This is all that we have related to product item or product loop. Would it be the same code you provided above as well?
Well it's none of these items yeah my code is same
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025