Cart Upsells
Upsell products based on cart content
Cart upsells is a very handy features that is basically a reactive Product alert system that will recommend you products based on the latest product added to the cart. Like the other recommended products you can also choose manual recommendations using the app Search & Discovery.
All plans
This Add-On is included in all plans.
How to Setup [Webflow]
Create a Cart Upsell Listing
To display cart upsells, create a dynamic product listing.
Add a Flex or Grid element
Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing.
Design the Product Template item
Copy and paste the Product Custom Element inside the flex/grid element you created.
Product Custom Element
Copy Element
Inside the Product Custom Element you can insert any static Webflow element.
For all the dynamic elements you can use inside the Product Custom Element with attributes or with other specific custom elements refer to the elements documentation
Add the data-id attribute
To retrieve the correct data from Shopify, add the necessary data-id attribute.
[Optional] Limit the number of products
By default the dynamic queries explained before will fetch 3 products. You can override this limit by adding another custom attribute to the Product Custom Element
E.g to fetch 10 products you can add:
Note that max 10 products can be effectively show
Use Conditional visibility for the listing
To further enhance your design you can use conditional visibility attributes
Has Cart Upsells
Apply the following custom attribute on the element that you want to appear only and exclusively when there is at least 1 cart upsell
How products are recommended?
The products you will see in the Cart Upsell listing are the recommended and complementary of the latest product added to the cart, so you can slightly modify them by using the app Search & Discovery