Theme Settings

The global controls that shape every section of your store — colors, fonts, layout widths, social links, and more.

Theme Settings are the global controls that apply across the entire store. Configure them once, and every section automatically inherits them — colors, typography, button styles, social media links, and layout widths. Spend time here first; it makes section-by-section customization much faster.

Theme Settings are accessible from any page in the theme editor.

1) Open the theme editor (Online Store → Themes → Customize).

2) Click the gear icon (⚙) in the bottom-left corner of the editor.

3) The right sidebar opens with all Theme Settings grouped into categories. Click each category to expand and configure.

Up to 6 color schemes (scheme-1 through scheme-6). Each scheme has values for background, foreground (text), primary button, secondary button, button text, border, shadow, and links. Sections inherit a chosen scheme to color all their elements consistently. See the Color schemes guide for details.

Set the heading font and body font globally. Pick from Shopify's hosted fonts or upload custom fonts. Adjust the heading scale and weight. See the Typography guide for details.

Control the global page width (e.g. 1200, 1400, 1600 px), grid spacing between elements, and the global UI border radius (used by buttons, cards, and inputs as a default — sections can override). Padding/margin defaults that apply when sections don't specify their own.

Add the URLs of your social media profiles (Instagram, Facebook, TikTok, X (Twitter), YouTube, Pinterest, etc.). The Header, Footer, Announcement Bar, and Email Popup all read from here. Set them once.

Global button border radius (separate from the UI border radius). Sections that don't override this use the value here. Configure once for consistent button styling site-wide.

Upload your store logo (desktop and mobile versions) and set its max width. Used by the Header section, Password page, and Footer brand area. Configure once and the logo appears site-wide.

The small icon shown in browser tabs and bookmarks. Upload a 32 × 32 px or 64 × 64 px PNG/SVG. Visible in the Theme Settings panel under the Logo or Branding category, depending on your Shopify theme.

Customize the checkout page colors, fonts, and logo to match your storefront. Note: detailed checkout customization is available on Shopify Plus plans (Checkout Extensibility).

Configure Theme Settings before sections. Sections inherit from these settings. Setting them up first means you don't have to revisit every section to update colors or fonts.

Plan your color schemes. Sketch out 3–6 schemes that cover your visual hierarchy: a primary scheme (most pages), a secondary (footer or accent sections), an inverse (light text on dark), and an accent (sale banners, promotions). Then assign schemes per section.

Pick web-safe fonts when possible. Shopify-hosted fonts are optimized for fast loading. Custom fonts can slow your store and impact SEO. Stick to system fonts or Shopify's font library unless you have a strong brand reason for custom.

Test your colors for accessibility. Make sure text colors have at least 4.5:1 contrast against their background (WCAG AA). Tools like the WebAIM Contrast Checker make this easy. Accessibility is a Theme Store requirement.

Yes — Theme Settings are global. Every section that uses a color scheme, font, or button style inherits from Theme Settings unless the section explicitly overrides. Changes apply across the whole storefront.

No. Each theme has its own Theme Settings file. Switching themes means reconfiguring Theme Settings on the new theme. Some Shopify plans offer Theme Settings copy via Shopify CLI, but for most merchants it's a manual step.

Theme Settings are not localized — colors, fonts, and other styles apply globally regardless of the active language. Translation only affects text content (settings labels, section text, etc.) configured in Edit default theme content.

To reset, switch the theme's active preset (in the theme library, click the ⋯ menu → Choose theme style). This resets settings to that preset's defaults. Or, restore from a previous theme version via the Shopify Theme Inspector.

The theme editor preview updates within 1–2 seconds of saving. If changes don't appear, click Save at the top-right (or wait a moment for autosave). For the live storefront, hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) to clear cached CSS.