Branding

Branding is the look of your forms: colors, fonts, sizes and the button style. You set it once for every form and can refine it per form and per theme block.

Three levels

Each setting is resolved on its own, in this order:

1. The theme block - what you set on the Form block (or the Popup forms app embed) in the theme editor wins.
2. The form - the Branding tab in the form editor.
3. Your shop branding - Settings > Branding, for every form: inline blocks, popups and direct link pages.
4. Your theme - anything left empty uses your theme's own style.

So a form can change only its button color and still take everything else from the shop branding. Popups and direct link pages have no block of their own with these settings per form, so for them the form's branding and the shop branding decide (the Popup forms app embed has a few colors of its own, see Popups).

Shop branding

Open Settings, tab Branding. A sample form next to the settings shows the result live; what you leave on Theme shows neutral there and takes your theme's style on your store.

Colors

Hex colors like #1a1a1a. An empty color uses your theme's.

Text, Labels, Field background, Field text, Field border, Button background, Button text, Errors and required marks, Popup background and Popup overlay.

Button

Button style is Theme button (your theme's own button) or Custom (the two button colors and the button corner radius).

Typography

• Heading font - the form title, headings and step titles.
• Body font - labels, fields, texts and the button.

Each can be Theme font (inherit), one of your uploaded fonts, a system font (System default, Arial, Helvetica, Georgia, Verdana, Times New Roman, Trebuchet MS, Monospace) or a font from the Google Fonts list.

Shape

Text size, Field corner radius, Field border width, Button corner radius and Space between fields.

Reset to theme defaults puts every color, both fonts and the shape settings back to your theme's defaults. Uploaded fonts are kept, and nothing changes on your store until you save.

Google Fonts

A Google font is loaded from Google Fonts on your storefront, which means your visitors' browsers connect to Google. If you do not want that, upload the font as a custom font; it is then served from our CDN instead.

Custom fonts

Under Custom fonts, select Add font files and pick one or several files.

• Formats: .woff2, .woff, .ttf or .otf. .woff2 loads fastest.
• Up to 2 MB per file and up to 10 fonts per shop.
• Give each font a Name and choose what to Use for: Headings and body, Headings only or Body only. Name and use are saved as you change them.
• Only upload fonts you are licensed to use on your website.

Uploaded fonts appear in the font lists under Your fonts. If you delete a font, or change its use so that it is no longer allowed where it is selected, that selection goes back to the default: the shop branding to the theme font, a form's own branding to the shop branding.

Branding per form

In the form editor, open Form settings, tab Branding. The settings are the same as in the shop branding, and each one is optional: leave a value empty (Brand default) to use your branding from Settings. Reset to brand clears all of the form's own values.

The editor's preview shows the form with the shop branding and the form's own branding applied.

The theme block wins

On the Form block in the theme editor:

• A color you fill in wins for this block. Leave it empty to use the form's branding, then the shop branding, then your theme.
• Button style is From the app (form or branding) by default; Theme button or Custom override it for the block.
• Spacing, corner radius and border width come from the app unless you check Override shape and spacing; then the block's four sliders apply.
• Maximum width, alignment and padding are layout and always come from the block.

See Add a form to your theme for all block settings.

Next steps

• Add a form to your theme - the block and its settings.
• Popups - popup colors and the overlay.
• The form editor - the Branding tab.