Wholesale Price Info
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
Wrapper that shows wholesale catalog pricing for the current variant to logged-in wholesale customers.
Wholesale Price Info is a Div Block with the sf-wholesale-price-info attribute. Place it inside a Product Container. It is shown only when the current variant has a wholesale price for the logged-in customer and stays hidden otherwise: for logged-out visitors, for customers without a matching wholesale catalog and for variants the catalog does not discount. The current variant is resolved through the closest product wrapper's Add to Cart Button and the price info re-renders when the variant changes.
The wrapper is the container for the wholesale displayers: Wholesale Price Displayer, Wholesale Compare Price Displayer and Wholesale Savings Displayer. Any labels such as "Your price" or "RRP" are plain designer text elements inside the wrapper, not attributes.
Wholesale pricing requires Customer Account API login through Storesynk OAuth, an active wholesale catalog whose customer group tag matches the customer and the Storesynk wholesale discount function. The displayed price matches exactly what checkout charges. See the guide How to sell wholesale in Webflow with Storesynk for the full setup.
To hide your standard price block while wholesale pricing is active, add Wholesale Hide to it.
Webflow app usage
- Select the Product Container in the Webflow Designer
- In the Storesynk app, open the Store Builder and click Add new
- Find and click Wholesale Price Info
- Select the Product Container again
- Paste the Wholesale Price Info component
The Store Builder component ships with the three displayers preconfigured inside the wrapper. For a custom layout, add a Div Block inside the Product Container, give it the sf-wholesale-price-info attribute and add the displayer attributes to your own text elements.
Webflow app settings
Inner components
Module contents
Available methods
Wholesale Price Displayer
Text element that displays the logged-in customer's wholesale price for the current variant.
Wholesale Price Displayer is a Text Block with the sf-wholesale-show-price attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the customer's formatted wholesale price for the current variant, matching exactly what checkout charges. The price re-renders when the variant changes.
Visibility is handled by the wrapper: the whole Wholesale Price Info block is hidden when the customer has no wholesale price for the current variant, so this displayer never shows a price to logged-out visitors or customers without a matching wholesale catalog.
For the standard storefront price, use the Price component instead.
Wholesale Compare Price Displayer
Text element that displays the strikethrough price the wholesale price is compared against.
Wholesale Compare Price Displayer is a Text Block with the sf-wholesale-show-compare-price attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the formatted compare price for the current variant: the compare-at price (RRP) when the wholesale catalog discounts from compare-at, otherwise the regular pre-discount price. Style the strikethrough on the Text Block itself in the Designer.
The displayer is hidden automatically when there is no compare price to show. Any label next to it, such as "RRP", is plain designer text.
For the standard storefront compare price, use the Compare Price component instead.
Wholesale Savings Displayer
Text element that displays how much the customer saves with their wholesale price, as a percentage or a money amount.
Wholesale Savings Displayer is a Text Block with the sf-wholesale-show-savings attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the savings between the compare price and the wholesale price for the current variant.
The displayer is hidden automatically when there are no savings to show.
Component
contents
Wholesale Price Displayer
Text element that displays the logged-in customer's wholesale price for the current variant.
Wholesale Price Displayer is a Text Block with the sf-wholesale-show-price attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the customer's formatted wholesale price for the current variant, matching exactly what checkout charges. The price re-renders when the variant changes.
Visibility is handled by the wrapper: the whole Wholesale Price Info block is hidden when the customer has no wholesale price for the current variant, so this displayer never shows a price to logged-out visitors or customers without a matching wholesale catalog.
For the standard storefront price, use the Price component instead.
Webflow app usage
The displayer ships preconfigured inside the Wholesale Price Info component in the Store Builder. See Wholesale Price Info for the steps to add it.
For a custom layout:
- Select the Wholesale Price Info wrapper in the Webflow Designer
- Add a Text Block inside it
- Add the sf-wholesale-show-price attribute to the Text Block
Webflow app settings
Wholesale Compare Price Displayer
Text element that displays the strikethrough price the wholesale price is compared against.
Wholesale Compare Price Displayer is a Text Block with the sf-wholesale-show-compare-price attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the formatted compare price for the current variant: the compare-at price (RRP) when the wholesale catalog discounts from compare-at, otherwise the regular pre-discount price. Style the strikethrough on the Text Block itself in the Designer.
The displayer is hidden automatically when there is no compare price to show. Any label next to it, such as "RRP", is plain designer text.
For the standard storefront compare price, use the Compare Price component instead.
Webflow app usage
The displayer ships preconfigured inside the Wholesale Price Info component in the Store Builder. See Wholesale Price Info for the steps to add it.
For a custom layout:
- Select the Wholesale Price Info wrapper in the Webflow Designer
- Add a Text Block inside it
- Add the sf-wholesale-show-compare-price attribute to the Text Block
Webflow app settings
Wholesale Savings Displayer
Text element that displays how much the customer saves with their wholesale price, as a percentage or a money amount.
Wholesale Savings Displayer is a Text Block with the sf-wholesale-show-savings attribute, placed inside the Wholesale Price Info wrapper. Its text is replaced with the savings between the compare price and the wholesale price for the current variant.
The displayer is hidden automatically when there are no savings to show.
Webflow app usage
The displayer ships preconfigured inside the Wholesale Price Info component in the Store Builder. See Wholesale Price Info for the steps to add it.
For a custom layout:
- Select the Wholesale Price Info wrapper in the Webflow Designer
- Add a Text Block inside it
- Add the sf-wholesale-show-savings attribute to the Text Block
Webflow app settings
Display format
percentage (default): shows the percentage saved formatted as -NN%. Used when the attribute value is percentage or empty.
amount: with sf-wholesale-show-savings="amount", shows the money saved, formatted in the store currency.
State management
Related Utilities
