Streaming live at 10am (PST)

New feature: Place add to cart buttons within product grids

#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.

7 Likes
Unable to add products to homepage (Webflow ecommerce)
How can I add a "buy" button to product collection list
#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?

1 Like
#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.