How to Sell Wholesale in Webflow with Storesynk

Wholesale is one of the fastest ways to grow a store: bigger orders, repeat buyers and predictable revenue. With Storesynk you can run your entire wholesale channel on the same Webflow site as your retail store. Approved wholesale customers log in and instantly see their negotiated prices everywhere prices appear: product pages, collection lists and the cart. Everyone else keeps seeing your normal retail prices, and every wholesale widget hides itself automatically for them.

The best part is that what your wholesale customers see is exactly what they pay. Storesynk computes wholesale prices the same way checkout charges them, so the price on the product page, the price in the cart and the price at checkout always match. No duplicate sites, no password-protected clone of your store, no spreadsheet order forms.

In this guide you will set up customer groups and pricing catalogs in the Storesynk app, add a wholesale application form to your site, display wholesale prices and volume tiers on your product pages and gate content so only wholesale customers see it.

Prerequisites

Before you start, make sure you have the following in place:

• Storesynk engine 2.3.0 or newer installed on your Webflow site. If you are just getting started, follow the installation guide first.
• Customer accounts with the callback login flow. Wholesale pricing is tied to the logged-in customer, so your site needs Storesynk's callback auth flow: customers start logging in from your Webflow site, sign in on Shopify's secure login screen and are sent back to your site, where Storesynk completes the session. That return trip is how Storesynk knows who is logged in and can price the storefront for them. Your account pages can live in Webflow or on the Shopify-hosted customer portal, either works once the callback flow is set up. The setup is covered in How to use passwordless Shopify customer accounts in Webflow with Storesynk.
• The Storesynk app with a wholesale catalog and customer group. We will create both together in step ① below.

① Set up customer groups and catalogs in the Storesynk app

Everything on the pricing side lives in the Storesynk app and is built from two pieces. A customer group describes who your wholesale buyers are, and a wholesale catalog describes the pricing they get. You can create them in either order and link them at any time.

1. Open the Storesynk app and go to the Wholesale section.

[SCREENSHOT: The Wholesale section of the Storesynk app with the customer group and catalog lists visible]

2. Create a customer group for each kind of buyer, for example "Retailers" or "Distributors". Every group has its own tag, and that tag is what identifies the group's members in Shopify: it is added to customers automatically when you approve their application in step ② and you can also add it by hand in your Shopify admin for buyers you onboard yourself. Tag matching is case-insensitive. The group also carries its own application settings, which we will use in step ②.

[SCREENSHOT: Customer group creation in the Storesynk app with the group tag and application settings visible]

3. Create a wholesale catalog and assign your customer group to it. The catalog holds everything about pricing; the group decides who gets it.

4. Choose the discount rule. You can take a percentage off the current price, or a percentage off the compare-at price. The compare-at option is handy for RRP-style pricing: keep your recommended retail price in the compare-at field in Shopify and discount from there, so wholesale buyers always see their price next to the RRP.

[SCREENSHOT: Catalog creation in the Storesynk app showing the assigned customer group and the discount rule options]

5. Optionally add quantity break tiers. Each tier sets a deeper discount from a minimum quantity upward, and you can give a tier a label of your own, for example "Crate" instead of "24+". These labels are what the volume pricing table on your site will display in step ④.

[SCREENSHOT: Quantity break tiers in the catalog editor with a custom tier label filled in]

6. Optionally add order value discounts: a deeper percentage that kicks in when the cart subtotal crosses a threshold you set, so bigger orders earn better rates. They are applied at checkout based on the whole cart and only ever improve the buyer's rate.

7. Optionally set order limits: a minimum quantity, a maximum quantity or a quantity increment per product. Limits count across all variants of a product, so two units of one variant and four of another together satisfy a minimum of six. They are enforced at checkout, where buyers see a clear message if their order falls outside them.

[SCREENSHOT: Order value discounts and order limits in the catalog editor]

8. Set the product targeting: all products, specific collections or specific products. This controls which products the catalog's discount applies to.

9. Save the catalog and make sure it is active. If a customer belongs to groups that match more than one catalog, the catalog with the lowest priority number is shown.

That is the whole pricing setup. The moment a customer carrying a group tag logs in on your Webflow site, Storesynk resolves their catalog and reprices the storefront for them.

② Add the wholesale application form

Most stores do not hand out wholesale pricing to just anyone. The wholesale application form lets prospective buyers apply from your Webflow site, and lets you review and approve them per customer group in the Storesynk app.

1. In the Webflow Designer, open the Storesynk Webflow App and go to the Store Builder. Add the Wholesale Application Form component to the page where you want applications to land, for example a "Become a stockist" page. The component is a native Webflow form with the email field and submit button already wired up.

2. Pick the customer group the form applies to in the component's settings. Every application submitted through the form lands in that group's queue.

[SCREENSHOT: The Wholesale Application Form component settings in the Designer with the customer group selector open]

3. Customize the fields. The email field is prefilled and read only for logged-in customers, while guests can type their email freely. Add any extra fields your review process needs (company name, VAT number, expected order volume) as custom fields: each one stores its answer under a property name you choose, for example Company Name. Checkboxes are stored as Yes or No and radio groups store the checked option's value.

4. Style the form's success and error messages. The form uses Webflow's native form states, so you edit them exactly like any other Webflow form: select the form, switch to the success and error states in the Designer and style away.

5. Review the group's application settings in the Storesynk app: turn collecting applications on or off and decide whether guests can apply. By default an applicant must be logged in to submit, which keeps every application linked to an existing customer account. If you want to accept applications from visitors who do not have an account yet, allow guest submissions in the group's application settings.

[SCREENSHOT: The application settings on a customer group in the Storesynk app, showing the guest submission option]

6. Publish your site and submit a test application.

When an application comes in, you review it in the group's applications queue in the Storesynk app. Approving it immediately adds the group's tag to the customer in Shopify. The next time that customer logs in on your site, they see wholesale prices everywhere.

[SCREENSHOT: A customer group's applications queue in the Storesynk app with a submitted application and the approve action visible]

If you prefer to build the form from scratch for a fully custom layout, the Wholesale Application Form reference covers every part of it, including the submit button and email field.

③ Show wholesale prices on your product pages

With a catalog live and customers tagged, wholesale prices already flow into your standard Price elements, the cart and checkout. The Wholesale Price Info widget goes a step further: it gives wholesale customers a dedicated price block that can show their price, the price they are being discounted from and how much they are saving. It only renders for logged-in wholesale customers, so retail shoppers never see it.

1. In the Designer, open the Storesynk Webflow App, go to the Store Builder and add the Wholesale Price Info component inside your product wrapper, typically right next to your existing price block.

2. The component comes with three displayers you can keep, restyle or delete:

• The Wholesale Price Displayer renders the customer's wholesale price.
• The Wholesale Compare Price Displayer renders the price they are being discounted from (the RRP or the regular price, depending on your catalog's discount rule). It hides itself when there is no compare price to show.
• The Wholesale Savings Displayer renders the saving as a percentage by default and can show the money saved instead. Its reference covers the display options.

3. Labels like "Your price" or "RRP" are plain text in the Designer. Edit them like any other text element; Storesynk only fills the displayer elements.

4. Hide your standard price while wholesale pricing is active. Add Wholesale Hide to your regular price block (the element or wrapper holding your Price and Compare Price). Storesynk hides it whenever the wholesale price is showing and restores it for everyone else, so retail visitors see your normal price block and wholesale customers see theirs.

5. Publish your site, log in with a tagged test customer and check a targeted product page. You should see the wholesale block instead of the retail price.

Wholesale prices respect your store's currency and formatting settings. If your price formatting needs adjusting, see How to change your price and currency formatting in Webflow.

④ Add volume pricing tables

If your catalog has quantity break tiers, a volume pricing table shows wholesale buyers exactly what larger orders unlock: buy more, pay less per unit. Like every wholesale widget, it hides automatically for non-wholesale visitors and it also hides itself on variants that have no tiers.

1. From the Store Builder, add the Wholesale Volume Pricing component inside your product wrapper, usually below the price info block from step ③.

2. Inside the component you design one template row, the Wholesale Volume Pricing Item, and Storesynk clones that row for each tier. Within the row you can use:

• The tier quantity displayer. If you gave a tier a label in the catalog (like "Crate"), that label shows here instead of the raw quantity.
• The tier price displayer for the tier's per-unit price.
• The tier compare price displayer for the pre-discount price.
• The tier discount displayer for the tier's discount.

3. Style the template row once and every tier inherits it. Delete any displayer you do not want; only the elements you keep are filled.

4. Prefer zero setup? Add the Wholesale Volume Pricing component and delete the template row inside it. Storesynk injects a ready-made default table for you, which you can restyle from your site CSS. The Wholesale Volume Pricing reference covers the styling hook.

5. Publish and check a product with tiers while logged in as a wholesale customer.

The Wholesale Volume Pricing reference documents the full element tree, from the list and item down to each displayer.

⑤ Show and hide content for wholesale customers

Wholesale stores usually need more than prices: a "Wholesale hub" link in the navbar for stockists, an "Apply for a wholesale account" banner for everyone else. Storesynk's visibility attributes handle this with tag values.

You may already know sf-auth and sf-unauth from How to hide elements when user is logged out. Both accept a customer tag as their value:

• sf-auth="wholesale" shows the element only to logged-in customers carrying the wholesale tag.
• sf-unauth="wholesale" shows the element to everyone who does not carry that tag: guests, retail customers, everyone outside your wholesale group.

Use your customer group's actual tag as the value; it is the same tag from step ①.

A classic pattern for the application page from step ②: put your "Apply for wholesale" call to action inside an element with sf-unauth="wholesale" and a "You already have wholesale access" message (or the wholesale hub itself) inside an element with sf-auth="wholesale". Approved customers stop seeing the pitch and start seeing their prices, all on the same page.

⑥ Cart, checkout and finishing touches

Here is the part you do not have to build: checkout. When a wholesale customer is logged in, Storesynk attaches their identity to the cart automatically, so Shopify applies the same wholesale discount at checkout that the customer saw on your site. There is nothing to configure. The Add to Cart Button, cart and checkout all work exactly as they do for retail customers, just at wholesale prices. Display and checkout stay in sync by design because both are priced from the same catalog.

Checkout is also where the catalog's order rules from step ① land. If the cart subtotal crosses an order value discount threshold, the deeper rate is applied automatically. If a product's quantity falls outside the catalog's order limits (below the minimum, above the maximum or off the increment, counted across the product's variants), checkout blocks the order with a clear message telling the buyer what to fix. Consider stating your limits as plain text near the quantity selector so buyers know them before they reach checkout.

Two finishing touches worth knowing about:

No flash on first paint. Storesynk keeps the wholesale widgets hidden until it has worked out what the visitor should see, so nothing flashes while prices load. When the engine finishes, it stamps the _sf-wholesale-ready attribute on the body element. No setup is needed; the attribute is there as a hook if you want a custom loading treatment in your site CSS.

Logout just works. When a wholesale customer logs out, or you revoke their access, prices and every wholesale widget revert to the public retail state automatically. No reload needed.

Publish your site. Your wholesale channel is live: buyers apply on your site, you approve them in the Storesynk app and from their next login they shop your Webflow store at their own prices.

Troubleshooting

Wholesale prices never appear. Wholesale pricing requires the callback login flow. Without it, customers may be signed in to Shopify but Storesynk never receives the session on your site, so it cannot tell who is logged in. Set up the flow described in How to use passwordless Shopify customer accounts in Webflow with Storesynk.

A tagged customer sees retail prices. Check that the tag on the customer in Shopify matches the catalog's customer group tag exactly. Matching is case-insensitive, so casing does not matter, but a typo, an extra space or a different word entirely will not match. Also confirm the catalog is active and that its product targeting covers the product you are looking at.

A customer was approved but still sees retail prices. Approval adds the tag immediately, but a customer who was already logged in when you approved them needs to log in again to pick up their new wholesale status.

Catalog changes do not show up right away. Wholesale prices are cached for the customer's session. After changing a catalog, have the customer log out and back in (or start a fresh session) to see the updated pricing.

A widget is invisible. That is usually correct behavior: every wholesale widget hides itself for visitors without wholesale access, and the volume pricing table also hides on variants with no tiers. Log in with a tagged test customer on a targeted product before assuming something is broken.