Cart & PDP Upsell
Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
This module can be used on both product pages and cart pages to display recommended upsell products to increase average order value.
It's outermost element is a Div Block with the sf-upsell-products attribute.
Webflow app usage
In the Shopyflow app:
- Click Add New
- Select Cart & PDP Products from the list
- Configure the source and display logic settings
- Click Copy component
- Paste the component inside your product Buy Module or Cart Module
Webflow app settings
Source
Select the source of the upsell products:
- Shopyflow Upsell Products metafield - Uses Shopyflow's custom metafield to define upsell products
- Shopify Search & Discovery App metafield - Uses Shopify's Search & Discovery App metafield
Display Logic (only when used inside the cart)
Control when to show upsell products in the cart:
- Show upsell products of all cart items - Displays upsell products for all items currently in the cart
- Show upsell products of the last cart item - Displays upsell products only for the most recently added cart item
- Show upsell products of the first cart item - Displays upsell products only for the first item in the cart
Inner components
Module contents
Available methods
Upsell Products List
Contains the list of the Upsell Products Items. Upsell Products List is a Div Block with the sf-upsell-products-list attribute. By default it will show upsell products based on the configured source and display logic. You can use limiter utility attribute to control the number of upsell products displayed in your list.
Upsell Products List Item
Contains the product information for each upsell product item. Upsell Products List Item is a Div Block with the attribute sf-upsell-products-list-item.
Shopyflow requires you to have at least one Upsell Products List Item component including the children components to be used as a template. The Upsell Products List Item template is cloned and iterated for all the upsell products and appended into Upsell Products List.
Add All to Cart Button
Adds all displayed upsell products to the cart with a single click. Add All to Cart Button is a Div Block with the sf-add-all-to-cart attribute.
When clicked, this button will add all the upsell products currently displayed in the Upsell Products List to the cart at once, making it easy for customers to purchase multiple recommended products together.
Component
contents
Upsell Products List
Contains the list of the Upsell Products Items. Upsell Products List is a Div Block with the sf-upsell-products-list attribute. By default it will show upsell products based on the configured source and display logic. You can use limiter utility attribute to control the number of upsell products displayed in your list.
Webflow app usage
Webflow app settings
Upsell Products List Item
Contains the product information for each upsell product item. Upsell Products List Item is a Div Block with the attribute sf-upsell-products-list-item.
Shopyflow requires you to have at least one Upsell Products List Item component including the children components to be used as a template. The Upsell Products List Item template is cloned and iterated for all the upsell products and appended into Upsell Products List.
Webflow app usage
Webflow app settings
State management
Related Utilities
