Style the application form
Match the wholesale application form to your brand with colors, field style, corners, spacing and the submit button, and keep it readable.
Open Settings › Application form and switch to Appearance. The Preview shows changes as you make them. Save with Shopify’s save bar.
Your theme’s look or your own colors
On my store, use my theme’s colors and fonts instead is on by default. Leave it on so the form on your store blends in with your theme.
| Setting | On your store | On the hosted page |
|---|---|---|
| Theme colors and fonts on | Your theme’s colors, fonts and button style | Your Button, Text and Background colors |
| Theme colors and fonts off | Your colors, with the form on a background panel | Your colors |
The hosted page always uses your colors, and its button text turns black or white to stay readable. The preview always shows the hosted page. With theme colors on, it says so: “This is the hosted page. On your store, the form takes your theme’s colors and fonts.”
Colors and contrast
Set Button, Text and Background as hex colors, like #1f1f1f. B2B Desk warns you when a combination is hard to read. Warnings don’t block saving, but each one means some applicants will struggle:
- Text on the background below 4.5:1. Use at least 4.5:1 so every buyer can read the form.
- Button text below 4.5:1 on the button color.
- The button color against the background below 3:1, which also makes focus rings hard to see.
Fields, spacing and the button
| Setting | Options | Default |
|---|---|---|
| Field style | Outlined, Filled, Underlined | Outlined |
| Corners | Square, Slightly rounded, Rounded, Pill | Slightly rounded |
| Spacing | Compact, Comfortable, Roomy | Comfortable |
| Button text | Up to 40 characters | “Submit application” |
| Width (button) | Fit the text, Full width | Fit the text |
Field style, corners, spacing and button width apply on your store even with theme colors on.
Each field’s Half width option, set in the field’s editor, puts two fields side by side when the form is wide enough.
Reset appearance puts every appearance setting back to the default, including the button text and the theme colors option.