I want to add "add to cart" for my complimentary product on product pages.

Store Design

Topic summary

A user wants to add an “add to cart” button for complementary products directly on product pages (using Grid theme on oceansoul.net), eliminating the need for customers to navigate away. They also want to remove the “view product” text.

Initial Guidance:

  • Another user suggested following steps for the Debut theme: accessing Shopify Admin > Online Store > Themes > Edit code, then opening the product-card-grid.liquid file in Snippets and pasting specific markup code.

Challenge:

  • The original poster couldn’t locate the product-card-grid.liquid file in their Snippets folder, only finding product.liquid options.

Resolution Path:

  • A third user (namphan) noted this requires extensive Liquid, CSS, and JavaScript modifications and requested collaborator access to implement the changes.
  • Access was granted, and implementation is now in progress.

Status: Ongoing - awaiting completion of custom development work.

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

I want to add a “add to cart” button to my complimentary product so the customer doesn’t have to leave the page to buy both items and also remove the “view product” text at the bottom. Is there a way to do this?

my website is oceansoul.net and I’m using grid theme by pixel union.

here is an example of a product with a complimentary product. https://oceansoul.net/collections/marco-island/products/roseate-spoonbill-charm

thank you in advance.

1 Like
2

Hello,

Just follow the steps for Debut theme for Add to cart button on collection pages.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code

Open Snippets → product-card-grid.liquid File and paste below code at the end of the page.

Thanks!

3

Screenshot 2024-12-06 at 10.46.38 AM.png
Screenshot 2024-12-06 at 10.46.38 AM.png286×338 5.85 KB

Thank you for the response. I am not seeing a product-card-grid.liquid in the snippets folder. I pasted a screenshot of the product.liquid options I have.

4

Hi @tylerklefot ,

This would require a lot of changes to both Liquid, CSS and JS, so it’s hard to test via site link.

Can I send you a collaborator invite? it will help me check everything and guide you

5

yes the code is 1959

thank you

6

Hi @tylerklefot ,

I have sent a request, after access I will check it.

7

thank you it is approved now