Wholesale Volume Pricing List
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
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
Inner components
Module contents
Available methods
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 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
