Button to add a product to the cart

Shopify Discussion
1

Hello,

I am trying to create a button that will automatically add a collection to someones cart and then send them to the cart. I pulled the product ID and I don’t think there are any issues with my code, so I am not sure why it isn’t working as hoped.

Here’s my code:

Get the entire MasterDemos library for $45/month .unlimited-collection-button { background-color: #163346; /* Blue background color */ color: #fff; /* White text color */ padding: 18px 20px; /* Spacing inside the button */ font-size: 16px; /* Button text size */ font-weight: bold; /* Bold text */ border: none; /* Remove border */ border-radius: 15px; /* Rounded corners */ cursor: pointer; /* Pointer cursor on hover */ transition: background-color 0.3s ease; /* Smooth color change */ } .unlimited-collection-button:hover { background-color: #1558b3; /* Darker blue on hover */ }

Any feedback would be helpful.

2

Hi @masterdemos :waving_hand: make sure it’s using the variant ID’s not the containing products ID

Forum usage:

Use the code format button for code especially for anything longer than a paragraph.

And labels like “shop performance” are NOT for any arbitrary thing that moves some needle, misuing labels just adds noise for anyone trying to get relevant answers.

For adding an entire collection, sets of productVariants to the cart also see order-form customizations, and see permalinks.

Or look at Dawns variant-list quick-order-list section that uses the updates form submission for the carts api

https://github.com/Shopify/dawn/blob/main/sections/quick-order-list.liquid

https://github.com/Shopify/dawn/blob/main/snippets/quick-order-list-row.liquid

https://github.com/Shopify/dawn/blob/main/snippets/quantity-input.liquid#L23C6-L23C6

3

There are no variants for the product I am trying to add, so no variant ID. Why won’t it work with the product ID?