Symmetry Theme - Add an add to cart button to the products under the Featured Collection module

Shopify Discussion

Topic summary

A Shopify store owner using the Symmetry theme wants to add an “Add to Cart” button directly below products in the Featured Collection module, rather than relying on the default Quick Buy option that only appears on hover.

Initial Solution Provided:

  • Navigate to Theme Settings > Product grid and adjust Quick buy link style
  • Alternatively, insert custom HTML form code (for add to cart functionality) into the product-grid or product-loop file within the theme’s code editor

Follow-up Requests:

  • The original poster wants to customize the button styling to match their store design
  • They prefer the add-to-cart action to keep users on the current page instead of redirecting to the cart page
  • CSS modifications were suggested for styling; custom functionality may be needed for the non-redirect behavior

Ongoing Challenge:
Multiple users report difficulty locating the “product-loop” or “product-grid” files in the Symmetry theme. The expert suggests these might be named differently or located in the snippets folder under product-item-related files, but the exact file remains unidentified. The discussion is ongoing without a definitive resolution for Symmetry theme users.

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

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?

image

2

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.

Thanks

3

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?

image

4

@Ximn

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

1 Like
5

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…

6

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!

7

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!

8

@avaskye which theme

9

This is for the symmetry theme!

10

@avaskye might be any file related to product item or product loop I guess.l into the snippet folder

11

This is all that we have related to product item or product loop. Would it be the same code you provided above as well?

Screenshot 2024-11-04 at 4.18.48 PM.png
Screenshot 2024-11-04 at 4.18.48 PM.png590×682 18.5 KB

12

Well it’s none of these items yeah my code is same