Theme settings
Buttons and fields
One grammar for everything shoppers touch: height, shape, fields, options, and icons.
Everything shoppers interact with — buttons, fields, product options, the quantity selector — shares the same height, the same outline, and the same kind of label. Open Theme settingsButtons and fields to set this shared grammar.
| Setting | Values | What it does |
|---|---|---|
| Control sizeFR: Taille des contrôles |
| The height of every button, field, option and quantity selector. |
| Control shapeFR: Forme des contrôles |
| Applies to buttons, outlined fields, options and quantity selectors. Images, cards and panels keep square corners. |
| Field styleFR: Style des champs |
| Every field in the theme follows this style. |
| Option styleFR: Style des options |
| How product options such as sizes are shown. Colors and variant pictures always show as swatches; long lists fall back to a dropdown. |
| Switch to a dropdown aboveFR: Passer en liste déroulante au-delà de | From 4 to 30Default: 12 | — |
| Icon weightFR: Épaisseur des icônes |
| — |
Control size
| Size | Height |
|---|---|
| Compact | 44px |
| Standard | 48px |
| Large | 52px |
Even at the compact size, no control is shorter than 44px on a touch screen.
Control shape
- Square: square corners.
- Soft: corners rounded by 6px.
- Pill: fully rounded ends.
The shape applies to buttons, outlined fields, boxed options, and the quantity selector. Color swatches are round with the Pill shape and square otherwise. Images, cards, panels, and drawers always keep square corners.
Field style
- Underline: only the bottom edge of the field is drawn.
- Outline: the field has a full outline that follows the control shape.
Every field in the theme follows this setting: search, newsletter, contact, comments, order note, price filters, gift card recipient, quantity. When a shopper hovers over a field, its edge darkens; when the field has focus, a thin line inside doubles that edge, so focus never looks like hover.
Option style
This setting controls how named product options, such as sizes, are displayed:
- Text: values are written side by side; the selected value is underlined.
- Boxes: each value sits in a box as tall as the controls; the selected value is outlined.
- Dropdown: one dropdown menu per option.
Whatever this setting:
- colors and patterns defined as swatches in Shopify always display as swatches (see Color swatches);
- an option whose variants each have their own image displays as thumbnails of those images;
- a named option with more values than Switch to a dropdown above (12 by default) switches to a dropdown.
Buttons
There's no global button style: a button's style expresses what it commits the shopper to.
| Style | For | Example |
|---|---|---|
| Solid | The main action on a screen | Add to cart, Checkout |
| Outlined | A genuine alternative | Browse the collection when a product is sold out |
| Underlined | A next step with no commitment | View all, Read more |
For a button you place yourself (the Button block, the link in the Image with text section), you choose the style. Solid button colors come from the accent and accent text of the section's color scheme.
Icon weight
Thin draws icons with a 1px stroke, Regular with a 1.5px stroke. Every icon in the theme (cart, search, account, menu, arrows, social media) follows this setting.
Faubourg 1.1.0