Making an add to cart button NOT on the product's page.

Solved
Tourist
13 0 1

Hello,

I'm looking to make a button that adds a particular product to the cart. Everything I've found so far only applies when you're on the product's page, but I want to be able to add something to the cart even when I'm not on the same page. Could I use a product's id or handle or other attribute to accomplish this? Also I'm using Supply theme.

0 Likes
New Member
8 2 1

Hi there!

Are you looking to do a quick add to cart button on, say, the product collection page? When you hover over the image of the product, you will see an "add to cart" button... is that what you're trying to do?

 

Another option would be to use the BuyButton sales channel through shopify. Screen Shot 2020-01-14 at 3.41.18 PM.png

0 Likes
Tourist
13 0 1

So ultimately what I'm trying to build is a webpage that let's the customer build a bundle from a group of products.

 

I got my front end code finished such that a customer can select the products but I need to find a way to translate that selection into a button that adds all items they selected to their cart.

 

I'm trying to figure out the Liquid logic for adding an item to my cart on a page of mine, separate from any product page or collection page, but still it is a page within my Shopify store. I figured if I could learn how to add one item to the cart, I could write a statement that loops through each bundle item, checks that item's id/handle/whatever identifier is needed, and more dynamically can add that item to the cart if it was checked. Really hoping I don't need to use an app for this since this seems so accomplishable otherwise.

 

The buy button feature seems like a great feature but I don't know enough about it whether it could accomplish this task since it seems more geared for one item per button. I'll take another look at the Embed features to see if there's a way to work with that.

0 Likes
Highlighted
New Member
8 2 1
Can you add me as an authorized user (jreikos@gmail.com ) and I can take a look at the code.

It does seem like it should be accomplishable, so let’s try to figure it out!
0 Likes

Success.

Hi there

 

If you have a background in coding, here the solution:


- Create a Button on your page

- Add an event handler to handle ATC function

- In the ATC function, you must send your product's variant ID and the quantity

- Create an AJAX POST request to /add.js endpoint

 

If not, I highly recommend you to install PageFly app (Free plan available) to build your custom page

With PageFly you can easily create an ATC button on any page that you want

 

Richard | Front-end Dev @ PageFly
- Click 'Like' to let me know you like my answer!
- Are you having problems building Shopify stores? Check out PageFly - An Advanced Page Builder whose goal is to empower anyone to build a perfect store.
1 Like
Tourist
13 0 1

Aha! Thank you Richard. Figured it out and got it working.

0 Likes