Theme settings apply across the whole shop. Open them in the theme editor from Theme settings (the brush icon). The names below are the ones you see there.
Changing the Theme style resets these to the new style's values. Note any colors or fonts you have tuned before you switch.
Brand
| Setting | Type | What it does |
|---|
| Favicon | Image | Shown in the browser tab. 32 x 32px works well. Choose an image from your files. |
| Social sharing image | Image | Used when a link to your store is shared. 1200 x 628px works well. Choose an image from your files. |
Typography
Fonts
| Setting | Type | What it does |
|---|
| Heading font | Font | A font from the Shopify font library. |
| Accent font | Font | Used for the emphasised, italic words in headings. A font from the Shopify font library. |
| Body font | Font | A font from the Shopify font library. |
Scale
| Setting | Type | What it does |
|---|
| Body size | Slider | From 14 to 20 px, 16 px to start. |
| Heading scale | Slider | Sizes every heading together, from the largest down to the smallest. From 100 to 140 %, 115 % to start. |
| Heading letter spacing | Slider | From -4 to 2 /100 em, -2 /100 em to start. |
| Heading case | Choice | Choose As typed, Uppercase. As typed to start. |
Colors
| Setting | Type | What it does |
|---|
| color_schemes | color_scheme_group | — |
Brand colors
| Setting | Type | What it does |
|---|
| Default color mode | Choice | Shoppers can still switch with the light and dark toggle in the header. Choose Dark, Light. Light to start. |
Dark mode
| Setting | Type | What it does |
|---|
| Background | Color | #111113 to start. |
| Card / surface | Color | #1A1A1E to start. |
| Body text | Color | #FAFAFA to start. |
| Accent (gold) | Color | Badges, borders, the slideshow divider and handle. #D4AF37 to start. |
| Heading gradient start | Color | #FFFFFF to start. |
| Heading gradient end | Color | Set both heading colors the same for a flat, single-color heading. #D4AF37 to start. |
Light mode
| Setting | Type | What it does |
|---|
| Background | Color | #FAFAFA to start. |
| Card / surface | Color | #FFFFFF to start. |
| Body text | Color | #1C1C1E to start. |
| Accent (gold) | Color | #80601A to start. |
| Sale tag color | Color | Optional. The color of the “-20%” and “Save $10” tags. Leave empty to use a tone of the accent that suits the palette. |
| Heading gradient start | Color | #111111 to start. |
| Heading gradient end | Color | #B8860B to start. |
Pixie dust animations
| Setting | Type | What it does |
|---|
| Enable button hover pixie dust animation | On / off | On by default. |
| Primary sparkle particle color | Color | #D4AF37 to start. |
| Secondary glow particle color | Color | #FADADD to start. |
Animations
| Setting | Type | What it does |
|---|
| Reveal sections on scroll | On / off | On by default. |
| Hover effect | Choice | Affects cards and buttons Choose None, Vertical lift, 3D lift. None to start. |
| Scroll reveal intensity | Choice | How far sections travel as they arrive. Ignored for visitors whose device asks for reduced motion. Choose Subtle, Balanced, Dramatic. Balanced to start. |
| Zoom images on hover | On / off | Product images ease in slightly inside their frame when the cursor rests on them. On by default. |
| Pictures while scrolling | Choice | Pictures open like a curtain as they arrive and drift inside their frame as you scroll. Browsers that cannot do this show the page as it is. Choose Off, Gentle, Cinematic. Gentle to start. |
| Reading progress line | On / off | A thin line at the top of the screen that fills as the visitor scrolls down the page. Off by default. |
| Tickers follow the scroll | On / off | Scrolling ribbons speed up while the page is scrolled and settle back afterwards. On by default. |
| Smooth mouse wheel | On / off | Eases each step of a mouse wheel into a glide. Touch, trackpads and the keyboard scroll as normal, and it is off for visitors who ask for reduced motion. On by default. |
| Magnetic buttons | On / off | Buttons lean gently toward the mouse pointer and spring back when it leaves. Off on touch screens and for visitors who prefer reduced motion. On by default. |
Layout
| Setting | Type | What it does |
|---|
| Page width | Choice | Choose Narrow, Wide. Wide to start. |
| Page margin | Slider | From 10 to 100 px, 24 px to start. |
| Spacing scale | Slider | Adjusts the space inside and between every section at once. From 80 to 150 %, 100 % to start. |
Corners
| Setting | Type | What it does |
|---|
| Input corner radius | Slider | From 0 to 24 px, 2 px to start. |
| Button style | Choice | The wipe fills the button from both ends on hover. It uses the same colors as the plain style, so it changes the movement rather than the palette. Choose Plain, Wipe. Wipe to start. |
| Button shape | Choice | Choose Use the corner radius, Pill. Use the corner radius to start. |
| Button corner radius | Slider | From 0 to 40 px, 2 px to start. |
| Media corner radius | Slider | From 0 to 40 px, 0 px to start. |
Motion
| Setting | Type | What it does |
|---|
| Speed | Choice | Choose Quick, Measured, Slow. Measured to start. |
| Setting | Type | What it does |
|---|
| Instagram | Link | A link to any page. |
| Facebook | Link | A link to any page. |
| TikTok | Link | A link to any page. |
| Pinterest | Link | A link to any page. |
| YouTube | Link | A link to any page. |
| X | Link | A link to any page. |
