Theme Settings
Global settings under the paintbrush icon in the theme editor. Every section inherits these — change them once, restyle everywhere.
Color schemes
Changed in 1.1.0. Colour used to be eleven global pickers here, plus a background and text picker on most sections. It is now one control in both places: you build a small set of palettes here, and each section and block picks the palette it wants. If you are upgrading, your saved values are not carried across — see Coming from an earlier version at the end of this section.
A scheme is a complete palette: a background, the text on it, the panels, the borders, the buttons and their hover, and the sale/success/error colours. Nothing in the theme sets a colour on its own any more — it wears a scheme. So changing one scheme here restyles every section using it, everywhere in the store, in one move.
The four you start with
The theme ships four, and the editor labels them by number — Shopify does not allow schemes to be renamed, so it is worth knowing what each one is for:
| Scheme | Is | Used out of the box by |
|---|---|---|
| Scheme 1 | Warm paper. Ink text, ink buttons, terracotta hover. This is the page itself. | Everything not listed below |
| Scheme 2 | The same palette a shade deeper — cream instead of paper — so a section can sit on the page and still read as a panel. | Newsletter, testimonials, utility bar |
| Scheme 3 | Dark. Ink background, paper text, paper buttons. | Hero banner, footer |
| Scheme 4 | Terracotta. Paper text, ink accent. A whole section in the accent colour. | Nothing by default — it is there for you |
There is no cap on how many you keep. Duplicate the closest match and change the two or three colours that differ, rather than building one from white — a scheme with one field left blank falls back to the paper default for that field, which is rarely what you meant.
What is in a scheme
| Group | Fields |
|---|---|
| Surface | Background and an optional Background gradient (set the gradient and it paints over the solid colour); Panels and cards for anything that must lift off the background — testimonial cards, the newsletter field, quick-add panels; Text; Muted text for captions, counts and secondary lines; Borders; and Accent. |
| Buttons | Button background, Button text, Button hover background and Button hover text. Hover belongs to the scheme, so a button on a dark section hovers correctly without you setting anything. |
| States | Sale for sale prices and Save badges, Success and in stock for the inventory indicator and the cart's rewards bar, Error and sold out. |
Default scheme
One picker at the top of this group, and it decides the palette of the page itself — the body, and anything that has not been given a scheme of its own. Change it and the whole store changes underneath your sections.
It is the setting to reach for if you want a dark store: point Default scheme at Scheme 3 rather than editing Scheme 1 to be dark, so you keep the light palette intact to switch back to.
Picking a scheme on a section
Every section that paints a colour has a single Color scheme picker in its settings, where its background and text pickers used to be. Choose a scheme and the whole section — including the buttons and cards inside it — takes that palette.
A handful of colours are deliberately not part of this, because they are not palette colours: the image overlay strength on a hero or slideshow, the transparent-header text colour that has to read against a photograph, the star colour on reviews and the field-note marker. Those stay where they are.
Blocks inherit, unless you say otherwise
Heading, text, eyebrow, button, column, tile and testimonial blocks have no colours of their own. They inherit the scheme of the section they sit in, which is what you want almost always — a heading should match the section around it.
When one block genuinely needs to stand apart, tick Use a different color scheme and a picker appears. A heading or text block given its own scheme becomes a padded panel in that palette; a button block keeps its transparent surround and only the button changes colour.
The checkbox is off by default on purpose. Blocks do not inherit a setting's default the way sections do, so a box that defaulted to "on" would have repainted every block you had already placed.
Coming from an earlier version
Themes update by replacing the theme files, and colour is the one place where 1.1.0 does not map onto 1.0.x — the old global Colors group and the old per-section background/text pickers no longer exist, so their saved values have nowhere to go.
It is a short job. Open Theme settings → Color schemes, put your old Background, Text, Borders, Accent, Sale, Success and Error into Scheme 1, and your old Primary into Button background. Then walk the sections that used to carry their own colours — most stores have two or three — and give each one a scheme. Anything you do not touch renders in Scheme 1, so the store is coherent the whole time you are working.
Typography
Heading and body font pickers (Shopify's font library — weights and styles come from the font you pick), a base size control, a body line height, and a heading scale multiplier that proportionally sizes every heading in the theme.
Product cards
Everything about a product card, in one place, set once for every card in the store — collection pages, search results, featured collections on the homepage and other pages, the product page's recommendation rows, Recently viewed and the 404 page's products all follow it. It gathers what used to sit under Typography and the separate Add to cart on product cards group, plus the card's colour scheme, swatch and size alignment, and the card button's width, alignment and text size.
| Setting | Does |
|---|---|
| Give cards their own color scheme | Off, a card sits on the page with no background of its own. On, every card paints the chosen scheme's background and text with a little inner padding, so cards read as tiles rather than photos on the page. Pick the scheme underneath. |
| Swatch and size alignment | Left, Center or Right for the colour swatch row and the size run, with its own mobile value — set separately from the title, so a centred title can sit over a left-set size run or the other way round. |
| Add to cart on cards | The master switch, the four surface toggles (collections, search, featured collections, recommendation grids). What they do is on the Collection Page chapter. |
| Card button | Shown once the add row is on. Style — Match the product page (the default: whatever the Add to cart buttons group sets, so card and product page stay one control), Outline (quieter across a grid, what the demo uses) or Solid. Button width from 40% to full width; Button alignment appears below full width; Button text size with its own mobile value, 14px out of the box. The button's colours and border are not here — they come from Add to cart buttons, shared with the product page, so a shopper meets the same button wherever they buy. |
| Product title size | 12–24px, 15px out of the box. Worth raising if your cards use large images — a small title under a big photo can look like an afterthought. |
| Product title size (mobile) | 11–22px, set separately because a two-column phone grid has far less room than a four-column desktop one. |
| Card text alignment | Left, Center or Right. Moves the title and the price together, so they always line up with each other. |
| Card text alignment (mobile) | Its own value — centred titles often read better on a narrow phone grid than they do across a wide desktop one. |
| Show colour swatches | The product's colour options as small circles under the price. Clicking one opens the product with that colour selected. Needs swatches set up on the colour option in Shopify's settings; without them the row simply does not appear. Maximum swatches shown caps the row, with the rest summarised as a count. |
| Show size run | The product's sizes in a row under the price — XS S M L XL — with sold-out sizes struck through, so a shopper sees whether their size is available before clicking in. Each size links to the product with that size selected. Size option name tells the theme which option holds sizes (Size, out of the box). Shown only when the option has eight values or fewer, and never for an option that is already shown as swatches. With Add to cart on cards switched on, the swatch row and the size run stop being links and become the card's own picker — see the Collection page chapter. |
Two deliberate exceptions, both in the cart: the recommendation carousel and the drawer's suggestion tiles keep their own fixed text size. Those tiles are narrow and cap their titles at a set number of lines, so a size chosen for a roomy collection grid would break them.
Collection cards (under Typography)
The same two controls again, for the tiles that link to a collection rather than a product — the Collection list section on your homepage and the collections list page at /collections. Set here once, so those two surfaces always match.
| Setting | Does |
|---|---|
| Collection title size | 12–24px, 15px out of the box, with its own mobile value. |
| Card text alignment | Left, Center or Right, moving the collection name and the product count together. Its own mobile value too. |
Kept separate from Product cards rather than folded into it, because the two are genuinely different components: a category tile reads well centred, a product card almost never does. That's also why these default to centred while product cards default to left.
Layout
Fluid (default) uses the full browser width for a modern, edge-to-edge feel. Contained caps content at a maximum width — the width control appears only when Contained is selected. Space between sections is set separately for desktop and mobile, so you can tighten the vertical rhythm on phones without squeezing desktop. Border radius rounds corners theme-wide — cards, inputs, images — so the whole store shares one shape language.
Back to top button
A round button that fades in once a shopper has scrolled about a screen down and takes them straight back to the top. On by default.
It matters most where your pages have no natural end: with Load more or infinite scroll switched on, a collection keeps growing and the footer keeps moving away, so without it the only way back is a long flick.
On product pages it steps aside while the sticky Add to cart bar is showing — both sit along the bottom edge, and the bar is the more important of the two at that moment. Nothing to configure; it simply never overlaps.
It respects the shopper's reduce motion setting: an instant jump instead of a smooth scroll where the operating system asks for one. Nothing else moves on the way — the button gets out of the way and leaves your announcement bar and header exactly as they were.
Buttons
Corner radius, vertical and horizontal padding, font weight (400–700) and an uppercase toggle — applied to every button in the theme.
Hover
Moved in 1.1.0. Hover colours used to live here as two theme-wide pickers. They are now Button hover background and Button hover text inside each colour scheme, which is where they belong: a button on a dark section and a button on a paper one need different hovers, and one global pair could only ever suit one of them.
Every filled button follows its section's scheme — the product page Add to cart, the Add buttons on product cards, cart recommendation tiles and section call-to-actions alike.
Outlined buttons don't use those colours. An outlined button is transparent, sitting on the section background, so a hover pair chosen against a solid button can vanish on it — white text on a black button reads as a clear flip, but the same colour change painted onto an outline on a pale page is invisible. Outlined buttons therefore always hover by filling with their own outline colour and flipping the text, which is guaranteed to show whatever they sit on.
Add to cart buttons
One group for every Add to cart button in the store — the product page's, and the ones on product cards in collections, search results and cart recommendations. Setting them together is the point: a shopper should meet the same button wherever they decide to buy, and there's no way to leave one surface behind by forgetting a second panel.
| Setting | Does |
|---|---|
| Button style | Filled (default) or Outlined. Both take your Buttons settings above for radius, padding, weight and uppercase. |
| Button color | Blank follows the Button background of whichever scheme the button is sitting in, so an Add to cart on a dark section is already right. On the outlined style this is the border and text colour rather than a fill. |
| Button text color | Blank follows the scheme's Button text. |
| Border width | 0–6px. At 0 the filled style has no border and the outlined style keeps its usual hairline — the two have different natural defaults, so 0 means "leave each as it is" rather than "no border on either". |
| Border color | Appears once you set a width. Blank follows the button colour. |
Hover comes from Buttons → Hover above, along with every other button in the theme.
Fit finder
The switch for the Fit finder on every product, the metafield key it reads (leave custom.fit_guide unless your store already uses another), the outside-the-range message, and — the part worth a minute — the measurements the store collects.
Outside-the-range message
The short line a shopper sees when their saved measurements fall a full size outside every size on a product's fit guide. It shows under the card's size run on every product grid (in the same quiet grey as sold out) and on the closed Fit finder's summary line, and in both places nothing is selected — the nearest size is named inside the open block for the shopper to choose, never picked for them. The default is Not in your size range; write it in your own voice if you prefer (Sizes run smaller than this, Check our size guide). Keep it to 30 characters. The card reserves exactly one line for it so the grid stays level, and anything longer is trimmed with an ellipsis. Leave it blank to use the default.
Measurements the store collects
Six slots. Each has a Show switch, a Label the shopper reads, the Fit guide key that must match a field key in your fit guide metafield exactly (chest, waist, hips), a one-line Hint under the box (Around the fullest part, tape level) and a Used for line, which shows in a small tooltip behind an info icon beside the label (Tops, vests and jackets) so a shopper knows why they are being asked before they reach for a tape.
This one list feeds every place a shopper can save measurements — the header's My size panel, and the Find your fit section — so they can never disagree, and switching a measurement on or off is done once. Switch on only what your products fit by: a store with no gloves has no reason to ask for a hand. The first three slots ship on (chest, waist, hips); hand and inside leg are filled in but off, so a glove or trouser store has only a switch to flip. A key no product asks for is stored and simply never used, so a typo costs you a field that fills nothing rather than a broken page. With every slot off, the button, the section's form and the bars all disappear. Nothing here shows on a fresh install until you switch the header's My size button on or add the section — a store with no fit guides asks for nothing.
Social accounts
URLs for Facebook, Instagram, TikTok, X/Twitter, YouTube, Pinterest and LinkedIn. Set ones render as icons in the footer, utility bar and mobile drawer — and feed the Organization structured data's sameAs links, which helps search engines connect your store to its social profiles.
The subsystem groups
Six further groups each control a theme subsystem, most with a master kill switch for app compatibility:
- SEO — structured data, social tags, noindex, and the image quality tuning added alongside them.
- Filtering — collection and search filters.
- Product badges — Sale, Sold out, New and custom tag badges.
- Add to cart on product cards — the option rows and Add button, with per-surface toggles for collections, search, featured collections and the recommendation grids. Off by default.
- Cart — drawer or page, the rewards bar, recommendations and duplicate-line handling.
- Search — the predictive flyout.
See App Integration for when and why to switch each off.
Favicon
Upload a square image at least 256×256 — browsers and Google both use it. Small or non-square favicons are the most common reason Google shows a generic icon next to your listings.
Design it for 32 pixels, not for the size you upload. Shopify scales whatever you supply down to 32×32, and a full logo that looks right at 256 turns to mush at tab size. Use a single letter, monogram or symbol with plenty of weight — not your wordmark. The quickest way to check is to shrink your candidate to 32px on screen and look at it; if you cannot tell what it is, neither can anyone else.