Wholesale Volume Pricing
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
Container that renders the current variant's wholesale quantity break tiers as a volume pricing table.
Wholesale Volume Pricing is a Div Block with the sf-wholesale-volume-pricing attribute. It is the root of the Wholesale Volume Pricing widget and must be placed inside a Product Container. On page load and on every variant change it looks up the wholesale catalog rule matched for the logged-in customer and renders that rule's quantity break tiers for the selected variant.
The whole widget hides automatically when the logged-in customer has no wholesale price for the product or the selected variant has no quantity breaks. Guests and retail customers never see it.
The widget renders in one of two modes:
- Custom row template: when the container holds a Wholesale Volume Pricing Item the item is used as a row template and cloned once per quantity tier. Rows are appended into the Wholesale Volume Pricing List when one exists, otherwise into the container itself.
- Default table: when no row template exists the module injects a ready-styled table with the class
sf-wholesale-volume-table, showing a quantity column and a per-unit price column. Restyle it by targetingsf-wholesale-volume-tablein your site CSS.
Tiers can carry a merchant-defined label in the wholesale catalog (for example "Crate"). When set, the label replaces the default minimum quantity text (for example 24+) in both modes.
For the full setup walkthrough see the wholesale guide.
Webflow app usage
The Store Builder ships a ready-made Wholesale Volume Pricing component with the full row template included.
- Select the Product Container in the Webflow Designer
- In the Storesynk app, click Add New
- Select Wholesale Volume Pricing from the Store Builder list
- Click Copy component
- Select the Product Container again
- Paste the Wholesale Volume Pricing component
To build the widget manually instead, add the sf-wholesale-volume-pricing attribute to a Div Block inside the Product Container. Leave it empty to get the default injected table or add your own row template inside it.
Webflow app settings
Inner components
Module contents
Available methods
Wholesale Volume Pricing List
Optional looping container inside Wholesale Volume Pricing that tier rows are appended into.
Wholesale Volume Pricing List is an element with the sf-wholesale-volume-pricing-list attribute, placed inside a Wholesale Volume Pricing container. It marks the element that cloned Wholesale Volume Pricing Item rows are appended into, typically a table body or a Div Block.
The list is optional. When it is absent, tier rows are appended directly into the Wholesale Volume Pricing container. Use the list when your row template must live inside a specific parent, for example table rows inside a tbody, or when the container holds extra elements (a heading or a note) that should not sit between the rows.
Wholesale Volume Pricing Item
Row template inside Wholesale Volume Pricing, cloned once per quantity tier.
Wholesale Volume Pricing Item is an element with the sf-wholesale-volume-pricing-item attribute. It is the row template of the Wholesale Volume Pricing widget: on render it is cloned once per quantity tier of the matched wholesale catalog rule and each clone's displayers are filled with that tier's values. Rows are appended into the Wholesale Volume Pricing List when one exists, otherwise into the Wholesale Volume Pricing container itself.
The item is optional. When the container holds no item template the module injects the default styled table instead (see Wholesale Volume Pricing).
The item can contain any combination of the tier displayers:
Component
contents
Wholesale Volume Pricing List
Optional looping container inside Wholesale Volume Pricing that tier rows are appended into.
Wholesale Volume Pricing List is an element with the sf-wholesale-volume-pricing-list attribute, placed inside a Wholesale Volume Pricing container. It marks the element that cloned Wholesale Volume Pricing Item rows are appended into, typically a table body or a Div Block.
The list is optional. When it is absent, tier rows are appended directly into the Wholesale Volume Pricing container. Use the list when your row template must live inside a specific parent, for example table rows inside a tbody, or when the container holds extra elements (a heading or a note) that should not sit between the rows.
Webflow app usage
The Store Builder Wholesale Volume Pricing component already includes the list element, so no separate step is needed when you use it.
To add it manually:
- Select the Wholesale Volume Pricing container in the Webflow Designer
- Add the element that should hold the rows (for example a Div Block)
- Add the sf-wholesale-volume-pricing-list attribute to it in the element settings panel
- Place your Wholesale Volume Pricing Item row template inside it
Webflow app settings
Wholesale Volume Pricing Item
Row template inside Wholesale Volume Pricing, cloned once per quantity tier.
Wholesale Volume Pricing Item is an element with the sf-wholesale-volume-pricing-item attribute. It is the row template of the Wholesale Volume Pricing widget: on render it is cloned once per quantity tier of the matched wholesale catalog rule and each clone's displayers are filled with that tier's values. Rows are appended into the Wholesale Volume Pricing List when one exists, otherwise into the Wholesale Volume Pricing container itself.
The item is optional. When the container holds no item template the module injects the default styled table instead (see Wholesale Volume Pricing).
The item can contain any combination of the tier displayers:
Webflow app usage
The Store Builder Wholesale Volume Pricing component ships with a complete row template, so no separate step is needed when you use it. Restyle the pasted row and its displayers freely: the styled row is what gets cloned.
To build a row template manually:
- Select the Wholesale Volume Pricing container (or its Wholesale Volume Pricing List) in the Webflow Designer
- Add the element that represents one tier row (for example a Div Block)
- Add the sf-wholesale-volume-pricing-item attribute to it in the element settings panel
- Add the tier displayers you need inside the row
Webflow app settings
State management
Related Utilities
