Getting started
Theme style
What the Faubourg style sets, and how to give your store its own voice from there.
Faubourg ships with one theme style, also called Faubourg: a complete, consistent combination of fonts, letter case, spacing, and control shape. It's the look your store has as soon as you install the theme. From there, a handful of theme settings are enough to give your store another voice.
What the Faubourg style sets
Faubourg is understated and contemporary: a single typeface family, sentence case, restrained headings, and pill-shaped controls. The table below is read directly from the theme files.
| Setting | Faubourg |
|---|---|
| Heading font | Jost |
| Body font | Jost |
| Heading weight | Regular |
| Heading case | Sentence case |
| Interface case | Sentence case |
| Heading scale | Restrained |
| Product grid gutter | Tight |
| Control shape | Pill |
| Field style | Underline |
| Option style | Text |
The style also sets the rest of the theme settings: three monochrome color schemes (see Colors), a 14px reading size, a wide page with a 28px page margin, standard density and control size, thin icons, and a cart drawer.
Restore the style
The style is still listed in the theme editor. Applying it again puts the theme settings back to the Faubourg values.
Open theme settings
In the editor, click the gear icon. Theme style is the last group in Theme settings.
Choose Faubourg
Click Theme style, select Faubourg, then click Change style. The preview updates immediately.
Save
Click Save.
Find your own voice
A voice comes mostly from three settings that work together: the Heading font, the Heading case, and the Interface case. Control shape, field and option styles, and the product grid gutter then finish the look. Change them in Theme settings; every section follows.
Two combinations to start from:
| For | Change these settings |
|---|---|
| An editorial look: serif headings, more room | Typography: Heading font Cormorant, Heading scale Expressive. Layout: Product grid gutter Airy. Buttons and fields: Control shape Soft, Field style Underline. |
| A graphic look: capitals and square lines | Typography: Heading font Montserrat Medium, Body font Montserrat, Heading weight Medium, Heading case Capitals, Interface case Capitals. Layout: Product grid gutter Hairline. Buttons and fields: Control shape Square, Field style Outline, Option style Boxes. |
A few rules hold whatever you choose, and keep your store consistent:
- Capitals are always letter-spaced. As soon as you set headings or the interface in capitals, letter spacing is adjusted automatically, and headings are set slightly smaller so they take up the same room.
- The heading font names things; the body font makes things work. Page titles, section titles, and product names use the heading font; buttons, fields, prices, navigation, and body copy use the body font.
- Headings are never bold. Their weight is the one you choose in Heading weight.
To go further, see Typography and Buttons and fields.
Faubourg 1.1.0