Global theme settings

01 / Foundation

Layout and spacing

Theme settings → Layout controls the shared geometry used throughout the storefront. Start here so sections feel related instead of individually styled.

Page width

Choose the maximum content width used by contained sections.

Page margin

Set the minimum outer margin, including a true zero-margin option.

Section spacing

Define the default vertical rhythm between major modules.

Grid gap

Control spacing between product and editorial cards from 0 px upward.

Collection grid colour

Choose the surface visible between product cards independently from the section palette.

Button style and radius

Choose square, soft or pill actions and a global corner radius.

02 / Identity

Colours and surfaces

Configure the global background, text, muted, accent, sale and border colours before choosing section-specific palettes. Glass sections use these values as fallbacks.

• Check text and button contrast in every colour combination.
• Reserve the sale colour for commercial states instead of decorative copy.
• Use transparent and glass surfaces only when the underlying media keeps navigation legible.

03 / Type

Typography

Sartelle starts from Work Sans and keeps separate Shopify font pickers for primary and display typography. Minimal headings use a controlled neo-grotesque rhythm; editorial mode can introduce a more expressive display face.

Body scale

Adjust supporting copy without changing navigation and labels.

Heading scale

Set the global relationship between small and large titles.

Minimal or editorial headings

Choose the default voice while retaining section-level heading sizes.

Product information

Keep cards readable even when campaign headings are intentionally large.

04 / Commerce

Product cards, swatches and search

Product-card settings are shared by collections, recommendations and editorial product rows. Configure media ratio, fit, information order, hover media, product video and visible options once, then refine individual sections only when needed.

• Split keeps title and price side by side; Stacked, centred and right-aligned cards place each field on an independent row.
• Map colour names and swatches before enabling colour display.
• Use explicit quick-shop settings for high-variant products.
• Configure predictive search labels, popular searches and result types.
• Choose drawer or page cart and verify the behavior in both mobile and desktop navigation.

05 / Advanced

Animation, currency and custom CSS

Motion respects reduced-motion preferences. Currency formatting follows Shopify Markets, while the theme setting controls presentation details. The optional layout grid exposes its own guide colour. Custom CSS should be limited to small merchant overrides.