Theme Settings
Global settings under the paintbrush icon in the theme editor. Every section inherits these — change them once, restyle everywhere.
Colors
Eleven colours: Primary, Secondary, Accent, Background, Surface, Text, Light text, Borders, Sale, Success and Error. These become CSS design tokens consumed by every section; individual sections can override their own background/text where it makes sense (announcement blocks, testimonials, rich text). Some earn their keep quietly — the cart's rewards bar inherits Accent and Success, sale prices and badges inherit Sale — so restyling the theme restyles those too.
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
How the text on a product card looks, set once for every card in the store — collection pages, search results, the featured collection on your homepage and product recommendations all follow it.
| Setting | Does |
|---|---|
| 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. |
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
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
Hover color and Hover text color, both blank out of the box. Leave them blank and buttons hover the way they always have: a filled button fades slightly, an outlined one fills with your primary colour. Set either and every button in the theme follows it — the product page Add to cart, the Add buttons on product cards, cart recommendation tiles and section call-to-actions alike.
It's deliberately one setting for the whole theme rather than one per button. A shopper who learns that your Add to cart turns a particular colour on the product page should see the same thing happen on a collection card.
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 your theme's primary colour. On the outlined style this is the border and text colour rather than a fill. |
| Button text color | Blank follows your theme. |
| 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.
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 price-row variant dropdown and Add button, with per-surface toggles for collections and search. 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.