New feature: Place add to cart buttons within product grids

Design help Ecommerce
1

Now you can add an add to cart button within Collection Lists to let customers get to checkout even faster. Simply drag the add to cart button element from the add panel into your list and style as needed, then boom: you’ve done it.


Drag the add to cart element into your Collection Lists to let customers get to checkout faster.

But wait, this unlocks more! If you’re feeling fancy, you can build a modal interaction within a Collection List to create a custom “quick buy” experience.


Advanced example: build a custom “quick buy” modal with interactions.

This example requires some advanced knowledge of interactions, but has the following basic structure. Within the Collection List cell, create a new element for the overlay, and position it absolutely, relative to the larger Collection List so it occupies the full screen — regardless of which cell it is from. Within that element, add all the elements (and of course, an add to cart button) that you’d like to live within your modal.


The structure of elements in this example.

Then, the interactions piece is actually two parts: first, create the interaction that shows the modal on click from the magnifying glass icon (done here by setting display to block and switching opacity from 0 to 100).


A closer look at the “open modal” interaction.

Part two is basically the inverse: create the opposite click interaction for the X icon in the modal, fading opacity back to 0 and resetting the display to none, so you have a way to “reset” the state of the modal to before it was opened.

These two interactions create a loop of sorts that you can use to open and close the modal to your heart’s desire.

10 Likes
2

Absolutely awesome! Thanks Webflow Team :webflow_heart:

1 Like
3

It works perfectly! I was using a( jquery.load #buttonname) to get the button from the detail template which caused a slight flicker and delay (as expected) to parse the results. Now, it’s instant and works exactly as advertised. Thanks team! - Jason

4

This is going to make a big difference. Terrific.

5

Wonderful addition!!

6

A massive thanks to Webflow team for getting this update out so early in the year it’s made a big difference to my project.

7

Amazing, thank you! Can’t wait for the full release.

8

This has been a wonderful solution for me.
I had all of my product templates designed using the CMS before eCommerce was launched, just waiting to turn it on!
Once the shop feature was released, I realized that I had to recreate all of this within the /product/ templates instead. I was bummed.

However, since the release of Add to Cart, I don’t actually need to design eCommerce-specific /product/ Templates at all, I can simply use a reference field in each Product to set which CMS item correlates to the product, and simply use the Add To Cart device on CMS Templates and scope conditional visibility to show only the correlated cart button (in a collections list).

Has anyone else tried this / use this method? What are the problems I’m not realizing using this method?

2 Likes
9

Hello @brjohnson

I just want to check I have this right. When I add a cart to a collection list, it does not have the same options as a product template level cart such as cart type. A grid based cart opens a modal. Can I change a grid cart style?

For your information, I am working on a product page that has both a template level cart and a grid cart. I am testing ideas around having a child / sub product reveal once the the main product is added to the cart.

10

Hey @HammerOz - you’ll actually want to add an Add to cart button to your product grid, not a Shopping cart. The Add to cart button lets you add a specific product to the cart, while the Shopping cart element merely opens up the cart for the shopper to see what they’ve added.

Building the modal can be a bit tricky. I outlined the basics of how it’s built with interactions in my original post - I’d encourage you to do some digging on Webflow University and elsewhere to see how a basic custom modal can be built, then apply that to building a custom modal within each product cell that’s triggered by a “quick view” button. In my example, the magnifying glass is the element that triggers the modal opening, and the X within the modal triggers the modal closing.

11

Thank for the response. yep just some minor cart object confusion going on there for minute :blush:. I have done modals but I have elected for a hide reveal instead. cheers.

12

Love this feature, but really really wish you could quickly remove from cart at the same time. @brjohnson is there any workaround? Creating wishlist item in the meantime.

13

Hmm you can have the cart set so that the it opens when products are added - and the cart itself includes a customizable Remove button. Does that help?

Webflow_-_Boheme
Webflow_-_Boheme1080×986 194 KB

14

Not really unfortunately. I was prototyping a list of bulk items that you could order directly on the homepage, but if you accidentally ordered the wrong thing I was looking for a quick remove button.

15

Hello!

The add to cart in a collection list feature works perfect!
What I can’t make it work is the Modal form on the example.
Not the animation part but the structure and style part.

Can we access the example shown somehow to see how it works?
Thankshanks!

16

Hi,

I know what was my issue and also a great way to learn from others.
What was happening? the positioning was not correct. I changed to Fixed and it made the trick.

How I discovered it? I checked some templates until I found what I was looking for. Then I opened it on the designer and checked the configuration.

Hope it helps

17

This is exactly what I’m looking for, thanks for sharing it!

What I don’t understand is how can I close the modal automatically once the item has been added to the cart.

I tried by adding a the same trigger of the “close button” to the “add to cart” button then the item won’t be added to the cart.

Any idea?

Thank you :slight_smile:

18

Did you ever find a solution for removing the product from the basket?

I would really like it so that when you click add to cart it adds to the cart and then instead of the add to cart button there appears a - and a + button for you to control the number in the cart from the product box itself…

Would be awesome… anyone know if it’s possible with custom code ?

19

Hey @Lux, can you elaborate on how you accomplished the second option of your answer. I’m building an ecom site which will currently only sell 1 product. And I would like to be able to place an “add to cart” button right on the home page. Some have said take your entire page into a product page, but I cant set a product page as a homepage, and adding a redirect just increases load times. I think you’re solution would work for me, just missing a key ingredient.

Thanks!