> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/theme-settings.md). # Theme settings Theme settings are Showcase's global controls — they apply to every page. In the theme editor (**Online Store → Themes → Customize**), click the **Theme settings** icon at the bottom of the left sidebar. Here's every group, every setting. ## Favicon * **Favicon image** — the tiny icon in the browser tab. Upload a square image; Shopify scales it down to 32 × 32px. A simple mark or monogram reads better than a full logo at this size. ## Colors Six colors drive the whole theme. Section-level colors (story backgrounds, cart drawer colors) sit on top of these. * **Background** (default `#FFFFFF`) — the base page background, used on non-story pages (cart, blog, search, account…) and behind content. * **Text** (default `#000000`) — body and heading text on that background. * **Accent** (default `#E30613`) — the highlight color: sale prices, the free-gift tag, accent buttons. Showcase ships with a bold red; swap in your brand color. * **Text on accent** (default `#FFFFFF`) — text sitting on accent-colored elements. Keep the contrast strong. * **Borders** (default `#E5E5E5`) — hairlines: card borders, dividers, input outlines. * **Highlight** (default `#131313`) — used for active states and subtle highlights (active pills, focus glows). 💡 Story panels set their own per-screen text color (`Auto`/`Light`/`Dark`) — the global Text color doesn't need to work on top of your background videos. ## Typography * **Font style** — one dropdown, four complete looks: | Option | The look | | -------------------------------------- | ------------------------------------------------------------------ | | `Luxury (Marcellus + Inter)` (default) | Serif headings, clean sans body — jewelry / high fashion | | `Futuristic (Space Grotesk)` | Geometric sans throughout — techwear / modern streetwear | | `Monospace (Supreme style)` | Typewriter mono everywhere — raw, drop-culture | | `Sans-serif` | Neutral Helvetica-style system sans — fastest loading (no webfont) | Luxury and Futuristic load their fonts from Google Fonts; Monospace and Sans-serif use system fonts. * **Base font size** (12–18px, default 14px) — the body text size everything else scales from. * **Letter spacing** (0–10%, default 2%) — global tracking, as a percent of 1em. A little spacing (2–4%) gives the theme its editorial feel; 0% is tightest and most conventional. ## Layout These control classic (non-story) sections and pages — story panels are always full-screen. * **Page width** (1000–1600px, default 1280px) — the maximum content width. * **Side padding** (12–48px, default 20px) — breathing room at the left/right screen edges. * **Section spacing** (24–120px, default 64px) — vertical space between stacked sections on regular pages. * **Grid gap** (4–40px, default 16px) — the gap between cards in product and collection grids. ## Product cards Product cards appear in the Featured collection section, search results, and recommendations. * **Image aspect ratio** — `Square (1:1)` (default), `Landscape (4:3)`, `Portrait (4:5)`, or `Tall (2:3)`. Portrait ratios suit clothing photography. * **Show border on images** (on) — a hairline frame around card images. * **Show second image on hover** (on) — desktop hover flips to the product's second photo. * **Enable quick add** (on) — an add-to-cart shortcut on the card. Single-variant products add instantly; products with options show their variant pills right on the card. * **Show sale and sold out badges** (on) — "Sale" / "Sold out" corner badges. ## Cart * The first line here is a pointer, not a setting: the cart drawer itself (colors, layout, milestone bar, free gift teaser, upsells, checkout agreement) is configured on the **Cart drawer section** — see [Sections → Cart drawer](/sitesbyseth-docs/showcase/sections/cart-drawer.md). * **Show order note on the cart page** (on) — the "Add an order note" field on the full `/cart` page. (The drawer has its own note toggle in its section settings.) * **Default upsell collection** — the collection the cart drawer's Upsells block pulls from when that block has no collection of its own. Build a small "Add-ons" collection (socks, care kits, gift wrap) and point this at it. ## Free gift The automatic gift engine: when the cart qualifies, the theme adds your gift product to the cart, shows a red gift tag next to qualifying product names, and adds a gift milestone to the cart progress bar. ⚠️ **Read this first:** the theme adds the gift product to the cart but **cannot change its price**. Set the gift product's price to **$0** in your catalog (recommended), or cover it with an automatic discount — otherwise customers are **charged for it at checkout**. Full explanation and setup: [Free gift](/sitesbyseth-docs/showcase/free-gift.md). * **Enable free gift** (off by default) — the master switch. * **Gift product** — the product to add automatically. Price it $0 (see warning above). If it's sold out, the whole gift feature pauses automatically. * **How the gift unlocks** — four modes: | Option | The gift unlocks when… | | ----------------------------- | ------------------------------------------------------ | | `Spend amount` | the cart (excluding the gift) reaches the spend amount | | `Buying a qualifying product` | any qualifying product is in the cart | | `Either one` (default) | either condition is met | | `Both required` | both conditions are met | * **Spend amount to unlock** (default 100) — in your store currency. Ignored when unlocking by qualifying products only. * **Qualifying products** (up to 24) — buying any of these unlocks the gift. These products show the red gift tag next to their name on story screens. * **Gift tag text** (default `+ FREE GIFT`) — the red tag's wording. ## Social media Paste full URLs; each filled-in link shows an icon in the footer (when the footer's "Show social icons" is on): * **Instagram**, **TikTok**, **X (Twitter)**, **YouTube**, **Facebook**. Leave any of them empty and that icon simply doesn't render. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/theme-settings.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.