Theme settings
Every global setting in ECOM, grouped exactly as they appear in the theme editor. Open Customize → Theme settings to follow along.
Theme settings change everywhere in the store. Section-specific settings live inside each section instead — those are covered on Homepage & sections.
Colors
Colors split into Brand (the editorial accent palette) and Neutrals (the surfaces and text). Most stores only change the brand accent — the neutrals are designed to read well as-is.
| Accent | The single color that defines your store: buttons, links, focus rings, badges, highlights. Pick a color that looks good on both the panel background and the light card surface. |
| Text on accent | Color used for text laid over the accent (e.g. on primary buttons). Usually white or a very dark neutral. |
| Accent wash | A subtle tint of the accent used in hover states and soft sections. Should be a desaturated, semi-transparent version of the accent. |
| Background | The main page background. Default is near-white for an editorial feel. |
| Panel / alt | Used for alternating section backgrounds (e.g. the Editorial split). Pick a slightly different tone from Background. |
| Card surface | Product card and small-component surface. Usually pure white or the lightest neutral. |
| Text | Primary body text color. Default is a near-black for high readability. |
| Secondary text | Sub-headings, captions, metadata. Lighter than Text. |
| Muted text | Disabled states, footnotes, very small print. |
| Borders | Card borders, divider lines, input outlines. Subtle by design. |
Typography
ECOM uses two fonts: one for headings, one for body. The editorial look comes almost entirely from the heading font choice.
| Heading font | Used for all h1–h6, hero text, section titles. A distinctive serif (Playfair Display, EB Garamond, DM Serif Display) gives the editorial feel. A geometric sans (Söhne, Inter, Manrope) gives a cleaner, modern look. |
| Body font | Used for all running text, navigation, buttons, and product copy. Pick something neutral and highly readable at small sizes (Inter, Manrope, Source Sans). |
Layout
| Page width | Maximum width of content blocks (in px). The default (~1280px) suits most stores. Smaller values create a more focused, magazine-like feel. |
| Corner radius | Roundness applied to buttons, cards, inputs, and image frames. 0 = sharp/architectural, 16+ = soft/friendly. ECOM's default sits between the two. |
Cart
These settings control the slide-in cart drawer that appears when someone clicks the cart icon or adds a product to cart.
| Show free-shipping progress bar | Toggle. When on, the cart drawer displays a progress bar with the amount remaining to qualify for free shipping. |
| Free-shipping threshold | The qualifying total, in your store currency's major units (e.g. 50 = $50, not $0.50). The bar fills as the cart subtotal approaches this number. |
| Cart drawer upsell collection | Products from this collection are recommended below the cart contents. Pick higher-margin or impulse items. |
Product card
Controls how every product card renders — on collection pages, in the Featured collection, search results, etc.
| Image hover effect | One of three options: Lift (card raises slightly), Zoom (image scales), or Crossfade (swaps to the second product image). All are performant. |
| Enable quick add | Toggle. When on, hovering a product card reveals an "Add to cart" button that bypasses the product page (uses the first available variant). |
| Show rating stars | Toggle. Requires the reviews.rating and reviews.rating_count metafields to be set — see Metafields setup. |
Demo content
| Show demo images when empty | Toggle. When on (default), placeholder imagery shows in any empty section. When off, empty sections render as true empty states. Turn off before launch if you want empty sections to look bare instead of polished. |
Social media
Each filled URL adds an icon to the footer. Leave fields blank to hide individual icons. Order in the footer matches the order below.
| Instagram URL | Full URL (e.g. https://instagram.com/yourshop). Required for the Instagram icon. |
| TikTok URL | Full URL to your TikTok profile. |
| Pinterest URL | Full URL to your Pinterest profile. |
| YouTube URL | Full URL to your channel. |
| X (Twitter) URL | Full URL to your profile. |
Branding
| Logo image | Your store logo. Upload an SVG if possible (crispest at any size); otherwise a 2x PNG. |
| Logo width | Display width in px. Leave blank for the responsive default. Useful for unusually wide or square logos. |
| Favicon | Square image used as the browser-tab icon and bookmarks. Minimum 32×32; 192×192 recommended. |