Theme settings

Theme settings are the store-wide choices: colours, type, rhythm, the shape of buttons, cards and fields, how product cards behave, the cart, animations and your social profiles. They apply to every page, and most sections inherit from them rather than repeating them.

Open them with the gear icon at the bottom of the theme editor’s left sidebar.

The style picker at the top of this panel switches preset — see Getting started.

Branding

Setting	What it does
Logo	Used in the header and, unless you override it, in the footer’s Brand block. Without a logo the store name is shown as text.
Logo width	60–320 px. The width on desktop; phones scale it down.
Favicon	Recommended 32 × 32 PNG.

Color schemes

Strata uses Shopify’s colour schemes. Each scheme is a complete palette, and every section chooses a scheme by name — so you edit four palettes rather than hundreds of colours.

Each scheme has:

Role	Used for
Background	The section’s background
Surface (cards, panels)	Cards, panels, inset heroes, drawers
Background gradient	Optional, replaces the solid background
Text	Body text, headings and icons
Muted text	Captions, metadata, help text
Accent	Links, accent buttons, the engraving preview’s accent colour, focus highlights
Accent contrast (text on accent)	Text drawn on top of the accent colour
Border	Card frames, dividers, field borders
Primary button background / Primary button text	The primary button
Secondary button background / Secondary button text / Secondary button border	The secondary button

scheme-1 is the scheme the page itself uses — the body background and the default for the header, footer and most sections. If you want a dark store, make scheme-1 dark (this is exactly what the Halo preset does).

Contrast. Keep Text on Background at 4.5:1 or better, and the same for Accent on Background — the accent renders as link text, so 3:1 is not enough. The shipped schemes in all three presets are checked and pass. If you change them, check again; Shopify’s own editor flags the worst cases, and any contrast checker will do for the rest.

Adding a scheme is fine, but a scheme nobody selects does nothing. After adding one, assign it in the sections that should use it.

Typography

Headings

Setting	What it does
Heading font	From Shopify’s font library.
Heading scale	100–150%. Scales every heading together, on top of the step ratio below.
Heading size steps	Compact (1.15) · Classic (1.22) · Dramatic (1.30). How much bigger each heading level is than the one below it. Dramatic suits short, bold headlines; compact suits text-heavy pages.
Heading weight	Regular to Extra bold. Only the weights your font actually has will look right.
Heading case	Normal or Uppercase.
Heading letter spacing	Tight · Normal · Wide. Tight suits large sans-serif headlines, wide suits uppercase headings.

Body

Setting	What it does
Body font	From Shopify’s font library.
Base size	14–20 px. This is the root of the whole type scale: labels, prices, captions and buttons are all fractions or multiples of it, so moving it by one step moves the entire store, not just paragraphs.

Two fonts is the budget the theme is built for. A third font is a real page-speed cost on mobile.

Layout

Setting	What it does
Container max width	1100–1600 px. The widest the content gets; full-width sections ignore it.
Spacing scale	85–115%. Scales the space inside and between elements across the whole theme. Lower it for dense catalogues, raise it for an airy, editorial feel. It is one of the biggest differences between the presets: Halo runs at 95%, Strata at 100%, Plinth at 115%.
Vertical space between sections	0–120 px. Used by page templates (product, collection, blog…). Home-page-style sections have their own Top / Bottom padding.
Grid gap	8–40 px. The gap between cards in every grid and carousel.

Buttons

Setting	What it does
Corner radius	0–40 px. At the maximum, buttons are fully rounded pills. Badges follow this radius, and so do quantity steppers, so they sit correctly next to buttons.
Vertical padding on desktop / Horizontal padding on desktop	The button’s size on desktop.
Vertical padding on mobile / Horizontal padding on mobile	The same on phones. Buttons never go below 44 px tall, whatever you set.
Label weight	Regular, Medium or Semibold.
Label case	Normal or Uppercase.
Letter spacing	0–4 px. Worth 0.5–1 px with uppercase labels.
Hover effect	Shade deepens the button toward its own label colour, so the pair keeps its contrast in any scheme. Shade and lift also raises it slightly. None keeps it still.

Form fields

Applies to every text field, select and textarea in the theme — search, newsletter, contact form, custom quote, engraving, address forms.

Setting	What it does
Style	Outline (a border) or Filled (a soft tint of the text colour instead of a border).
Border thickness	1–3 px.
Corner radius	0–40 px; at the maximum, fields are pills. Multi-line fields cap it at 16 px so a textarea does not look like a lozenge.
Vertical padding / Horizontal padding	The field’s size.
Checkbox corner radius	0–10 px; 10 is round. Radio buttons are always round.

Cards & images

Setting	What it does
Card style	Minimal — no frame, the photograph is the card. Framed — a thin frame. Layered — the frame plus two offset rules under the bottom edge that separate on hover. Layered is the theme’s signature shape and the Strata preset’s default. Applies to product cards, article cards and content cards.
Card corner radius	0–32 px.
Card padding	8–24 px — the space between the card’s frame and its content.
Image corner radius	0–32 px.
Section panel corner radius	0–40 px. Inset heroes, coloured panels, newsletter and trust bar.
Image loading placeholder	What fills an image’s frame until it has loaded: Blurred preview, Animated skeleton or Solid color. Images then fade in.

Changing Card style never changes a card’s size — the frame is drawn inside the card, so your grid does not reflow.

Product cards

The settings here apply everywhere a product card appears: collections, search, the home page, recommendations, the mega menu.

Setting	What it does
Text alignment	Left or Center.
Color swatches	Hidden, Square or Circle. Shown for the option whose values have swatches, or one named Color. Clicking a swatch shows that variant’s image and price. The shape also applies on the product page.
Hover effect	Zoom the image, Lift the card or None. A 1 px rule is drawn under the title on hover either way.
Show second image on hover	Uses the product’s second photograph. This is the frame the photography plan calls the three-quarter angle.

Card button

Setting	What it does
Card button	None — no button on the card. Quick view — every product opens a panel with the gallery and the variant picker. Add to cart, quick view for options — products with a single variant go straight into the cart, products with options open the quick view. Add to cart, product page for options — the same, but products with options link to their page instead (no quick view anywhere).
Button position	On the image — a full-width button on hover; touch screens show a round button instead. Next to the price.
Quick view opens as	Drawer or Modal. Only used by the two modes that open a quick view.

One setting decides the whole behaviour, so there is no combination that promises a quick view with no button to open it. Adding to cart shows a bag icon, so it never looks like a quick view button.

Badges

Setting	What it does
Sale badge	Hidden, Save percentage, Save amount or Sale.
Show sold out badge
Product tag for the New badge	Default `new`. Tag products with this word to show a New badge. Leave empty to hide. If your store is in another language, use the tag you actually type.
Show made to order badge	For products that are out of stock with “Continue selling when out of stock” on — the ones you make per order.
Products without inventory tracking	Ready to ship or Made to order. Keep this the same as the Production status block on your product page.
Production time	A range like `3-5` or a single number, in days. Leave empty for a badge without a time.
Production time metafield	Product metafield (`namespace.key`) with that product’s own production time. It replaces the time above wherever it is filled in. Default `custom.made_days`.
Forced status metafield	Product metafield holding `made` or `ready` to decide it per product, whatever the stock says. Default `custom.production_status`.

The badge and the product page’s Production status block use the same rule, so a card and a product page can never contradict each other. Full explanation: Made to order.

Cart

Setting	What it does
Cart behavior	Open cart drawer — the cart icon opens a slide-out panel and adding to cart shows it. Go to cart page — the cart icon links to `/cart` and adding to cart goes there.
Free shipping threshold	An order total in your store currency. Shows a progress bar in the cart drawer and on the cart page. Leave empty to hide. Set it to the threshold you actually configured in Settings → Shipping and delivery — the theme does not create the discount.

Animations

Setting	What it does
Enable scroll & hover animations	The master switch. Off means no reveals, no hover motion, anywhere.
Default duration	100–800 ms.
Image reveal	Print — layer by layer or None. How content images appear as they scroll into view. Print builds the image up in layers, the way a 3D printer lays them down. The first image on a page is never hidden, so page speed is unaffected.

Every animation in the theme stops for visitors whose system asks for reduced motion, and inside the theme editor. Details: Print reveal.

Five URL fields: Instagram, Facebook, TikTok, YouTube, Pinterest. Paste the full profile URL. The icons appear wherever a Social block is added — the footer and the footer bottom bar — and only for the networks you filled in.

Strata has no Instagram feed section: a live feed needs an app and an API, which Theme Store rules do not allow a theme to require. The Image gallery section is the intended substitute — your own photographs, each with a caption and a link, which also lets you link a photo to the product in it.