Wholesale Application Form
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
Form wrapper that turns a Webflow Form Block into a wholesale account application handled by Storesynk.
Wholesale Application Form is a Container with the sf-wholesale-application-form attribute. It wraps a native Webflow Form Block and marks it as the wholesale application. The Wholesale module takes over the form's submission: it collects the fields inside the wrapper, posts the application to the Storesynk app and shows Webflow's native success block (.w-form-done) or error block (.w-form-fail) based on the result. Style those blocks in the Designer as you would for any Webflow form.
The attribute's value is the tag of the customer group the form applies to. Every application submitted through the form lands in that group's queue in the Storesynk app. When you add the form from the Store Builder, picking the group in the component's settings fills the value for you.
Pressing Enter inside the form submits through the Storesynk handler, so keyboard submission behaves the same as clicking the Wholesale Application Submit Button. Forms injected after page load (for example by Finsweet) are bound automatically.
Who can apply depends on the visitor:
- Logged-in customers: identity comes from the customer session. The email field is prefilled with the account email and made read only.
- Guests: the email field stays editable and its value is submitted as the applicant email. Whether guest applications are accepted is controlled per customer group, in the group's application settings in the Storesynk app.
When an application is approved in the Storesynk app, the customer immediately receives the group's tag and sees wholesale prices on their next login. See How to sell wholesale in Webflow with Storesynk for the full setup and Login Form for customer authentication.
Webflow app usage
- Open the Storesynk Webflow App and go to Store Builder.
- Add the Wholesale Application Form component to your page. It comes with the form wrapper, email field, submit button and success and error blocks already wired.
- Pick the customer group the form applies to in the component's settings.
- Add any extra inputs you want to collect as custom fields.
- Style the form, the success block and the error block in the Designer as usual.
To build the form manually instead, add a Div Block with the sf-wholesale-application-form attribute, set its value to the customer group's tag, place a Webflow Form Block inside it and add the inner components listed above.
Webflow app settings
Inner components
Module contents
Available methods
Wholesale Application Submit Button
Button that submits the wholesale application form through Storesynk with validity checks, a loading state and Webflow's waiting text.
Wholesale Application Submit Button is an Action with the sf-submit attribute. Add it to the submit button or submit input inside the Wholesale Application Form wrapper. On click the module checks the form's validity (invalid forms show the browser's validation messages and do not submit), sends the application to the Storesynk app and then shows Webflow's native success or error block based on the result. Pressing Enter anywhere in the form routes through this button too.
While the request is in flight the button guards against double submits and swaps its label for Webflow's waiting text, the button's data-wait setting in the Designer. The label is restored when the request finishes.
For the general-purpose form submit component used outside the Wholesale module, see Form Submit Button.
Loading
Class Name: sf-loading
Applied To: The submit button
Added while the application request is in flight and removed when it completes. The class is unstyled by default, so style it as you like (for example lower the opacity or show a spinner). While present, further clicks are ignored.
Wholesale Application Email Field
Email input for the wholesale application, prefilled and read only for logged-in customers and editable for guests.
Wholesale Application Email Field is a Form Field with the sf-email attribute. Add it to the email input inside the Wholesale Application Form wrapper. Its behavior depends on the visitor:
- Logged in: the input is prefilled with the account email and made read only. The applicant's identity comes from the customer session, so the field is display only.
- Guest: the input stays editable and its value is submitted as the applicant email. Whether guest applications are accepted is controlled per customer group, in the group's application settings in the Storesynk app.
Customer sessions come from Storesynk's customer accounts. See the Login Form component and How to use passwordless Shopify customer accounts in Webflow with Storesynk.
Wholesale Application Custom Field
Collects any input inside the wholesale application form into the application under a merchant-defined property name.
Wholesale Application Custom Field is a Form Field with the sf-custom-field attribute. Add it to any input inside the Wholesale Application Form wrapper: text fields, text areas, selects, checkboxes or radio buttons. When the form is submitted, the input's value is collected into the application under the property name set in the attribute value.
Input types are handled as follows:
- Checkboxes are stored as
YesorNo. - Radio groups store the value of the checked option.
- All other inputs store their current value.
Merchants see these fields on the application in the Storesynk app, so use clear property names (for example Company Name, VAT Number or Expected Monthly Volume).
Component
contents
Wholesale Application Email Field
Email input for the wholesale application, prefilled and read only for logged-in customers and editable for guests.
Wholesale Application Email Field is a Form Field with the sf-email attribute. Add it to the email input inside the Wholesale Application Form wrapper. Its behavior depends on the visitor:
- Logged in: the input is prefilled with the account email and made read only. The applicant's identity comes from the customer session, so the field is display only.
- Guest: the input stays editable and its value is submitted as the applicant email. Whether guest applications are accepted is controlled per customer group, in the group's application settings in the Storesynk app.
Customer sessions come from Storesynk's customer accounts. See the Login Form component and How to use passwordless Shopify customer accounts in Webflow with Storesynk.
Webflow app usage
- Add the Wholesale Application Form component from the Store Builder in the Storesynk Webflow App. It includes this field already configured.
- To wire an input manually, select the email input inside the Form Block and add the
sf-emailattribute. - Set the input's type to Email and mark it required so browser validation runs before submission.
Webflow app settings
Wholesale Application Custom Field
Collects any input inside the wholesale application form into the application under a merchant-defined property name.
Wholesale Application Custom Field is a Form Field with the sf-custom-field attribute. Add it to any input inside the Wholesale Application Form wrapper: text fields, text areas, selects, checkboxes or radio buttons. When the form is submitted, the input's value is collected into the application under the property name set in the attribute value.
Input types are handled as follows:
- Checkboxes are stored as
YesorNo. - Radio groups store the value of the checked option.
- All other inputs store their current value.
Merchants see these fields on the application in the Storesynk app, so use clear property names (for example Company Name, VAT Number or Expected Monthly Volume).
Webflow app usage
- Add the Wholesale Application Form component from the Store Builder in the Storesynk Webflow App.
- Add an input to the Form Block for each extra piece of information you want to collect.
- On each input, add the
sf-custom-fieldattribute with the property name you want it stored under, for examplesf-custom-field="Company Name". - Mark inputs required in the Designer where needed. Browser validation runs before the application submits.
Webflow app settings
State management
Related Utilities
