> 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/reign/theme-settings.md). # Theme Settings Theme settings are Reign's **global styles** — set them once and every section, page, and card obeys. Open them via the **gear icon** at the bottom left of the theme editor. This page documents every group and every setting. Skim to the group you need: [Logo](#logo) · [Colors](#colors) · [Typography](#typography) · [Layout](#layout) · [Animations](#animations) · [Buttons](#buttons) · [Variant pills](#variant-pills) · [Inputs](#inputs) · [Product cards](#product-cards) · [Collection cards](#collection-cards) · [Blog cards](#blog-cards) · [Content containers](#content-containers) · [Media](#media) · [Dropdowns and pop-ups](#dropdowns-and-pop-ups) · [Drawers](#drawers) · [Badges](#badges) · [Brand information](#brand-information) · [Social media](#social-media) · [Search behavior](#search-behavior) · [Currency format](#currency-format) · [Cart](#cart) ## Logo | Setting | What it does | Default | | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------- | | Logo | Your main logo image. PNG with transparent background recommended. | — | | Width | Logo display width, 50–300px | 100px | | Inverse logo (transparent header) | Optional light/white logo shown while the transparent header sits over your homepage hero. Upload this if your main logo is dark. | — | | Favicon | The little browser-tab icon. Displayed at 32×32px — a simple mark works better than a full wordmark. | — | ## Colors One setting — **Color schemes** — but it's the most important one in the theme. Reign ships with 6 schemes (Scheme 1–5 plus a custom scheme). Each scheme defines background, gradient, text, buttons (solid + outline), shadow, and more. How they're used out of the box: * **Scheme 1** — the default light scheme most sections use * **Scheme 2** — default for product/collection/blog cards * **Scheme 3** — the dark scheme (used by the footer and sold-out badges) * **Scheme 5** — sale badges To edit: click a scheme, adjust its colors, and every section using that scheme updates instantly. To give one section a different look, change *that section's* **Color scheme** setting instead of editing the scheme itself. 💡 Resist making one-off color tweaks per section. Keeping everything on schemes is what makes a rebrand a 5-minute job. ## Typography | Setting | What it does | Default | | ---------------- | ---------------------------------------- | --------- | | Headings → Font | Font for all headings | Assistant | | Headings → Scale | Global heading size multiplier, 100–150% | 100% | | Body → Font | Font for body text | Assistant | | Body → Scale | Global body size multiplier, 100–130% | 100% | 👉 Shopify's font library is free and fast. Pick a heavy grotesque or condensed face for headings if you want that streetwear poster look; keep body text readable. ## Layout | Setting | What it does | Default | | ------------------------------- | --------------------------------------------- | ------- | | Page width | Max content width, 1000–1600px | 1200px | | Space between template sections | Global vertical gap between sections, 0–100px | 0 | | Grid → Horizontal space | Gap between grid items (cards), 4–40px | 8px | | Grid → Vertical space | Vertical gap between grid rows | 8px | 💡 Reign defaults to 0 section spacing for a seamless editorial flow — sections control their own padding. Raise it if you prefer clear separation everywhere. ## Animations | Setting | What it does | Default | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------- | | Fast mode | Disables scroll reveals, hover lifts, and related motion, and skips the animation scripts entirely — a lighter, faster storefront | Off | | Reveal sections on scroll | Sections fade/slide in as you scroll | Off | | Hover effect | *None*, *Vertical lift*, or *3D lift* — applied to cards and buttons | None | 👉 Chasing page-speed scores? Turn on **Fast mode**. Want maximum drama? Turn on scroll reveal + 3D lift — just test on a mid-range phone first. ## Buttons Controls every solid/outline button in the theme. | Setting | What it does | Default | | ------------------------------------------------------------- | -------------------------------------- | ------- | | Border → Thickness | 0–12px | 1px | | Border → Opacity | 0–100% | 100% | | Corner radius | 0–40px. 0 = sharp editorial, 40 = pill | 0 | | Shadow → Opacity / Horizontal offset / Vertical offset / Blur | Optional drop shadow | 0 (off) | ## Variant pills The size/option pill buttons on product pages. Same controls as Buttons: border thickness (1), border opacity (55%), **corner radius (40 — pill-shaped by default)**, and the four shadow settings (off). ## Inputs Text fields, email signups, quantity boxes. Border thickness (1), opacity (55%), corner radius (0), shadow settings (off). ## Product cards These settings style product cards **everywhere** — collections, featured collections, search, related products, upsells. | Setting | What it does | Default | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------- | | Image padding | Inset around the product photo, 0–20px | 0 | | Text alignment | Left / Center / Right — aligns title, vendor, price, ratings, and quick-add. Individual sections can override this. | Left | | Color scheme | Card background/text scheme | Scheme 2 | | Border → Thickness / Opacity | Card outline | 0 / 0% | | Corner radius | 0–40px | 0 | | Shadow → Opacity / offsets / Blur | Card shadow | 10% / 0 / 0 / 0 | ## Collection cards Identical controls (image padding, text alignment, color scheme, border, radius, shadow) for collection cards in collection lists. Same defaults as product cards. ## Blog cards Identical controls again, for blog post cards. Same defaults. ## Content containers Text boxes and content panels (like banner text containers). Border thickness/opacity (0/0), corner radius (0), shadow settings (0). ## Media Images and videos in sections. Border thickness 1px at 5% opacity, radius 0, shadows off. ## Dropdowns and pop-ups Menus, modals, and popovers. Border 1px at 10% opacity, radius 0, shadows off. ## Drawers The cart drawer and mobile menu drawer. Border 1px at 10% opacity, shadow settings off. ## Badges The "Sale" and "Sold out" labels on product cards. | Setting | What it does | Default | | --------------------------- | ------------------------------------------------- | ----------- | | Position on cards | Bottom left / Bottom right / Top left / Top right | Bottom left | | Corner radius | 0–40px | 40 (pill) | | Sale badge color scheme | Scheme used for the Sale badge | Scheme 5 | | Sold out badge color scheme | Scheme for Sold out | Scheme 3 | ## Brand information Content for the footer's **Brand information** block: **Headline**, rich-text **Description**, **Image**, and **Image width** (50–550px, default 100). Fill these in, then add the Brand information block to your footer. ## Social media Paste full URLs for: Facebook, Instagram, YouTube, TikTok, X/Twitter, Snapchat, Pinterest, Tumblr, Vimeo. Icons appear automatically in the footer (and anywhere social icons are enabled). Leave blank to hide an icon. ## Search behavior | Setting | What it does | Default | | ------------------ | ----------------------------------------- | ------- | | Search suggestions | Live predictive results as customers type | **Off** | | Product vendor | Show vendor in suggestions | Off | | Product price | Show price in suggestions | Off | 👉 Most stores should turn **Search suggestions on** — it's off by default. ## Currency format **Show currency codes** (default on) — displays prices as `$49.00 USD` instead of `$49.00`. Selling to one country only? Turn it off for cleaner prices. Selling internationally? Keep it on. ## Cart | Setting | What it does | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | Type | **Drawer** (slide-out panel — where all of Reign's gift/progress/upsell features live), **Page** (jump to /cart), or **Popup notification** (small "added to cart" toast) | Drawer | | Vendor | Show vendor on cart lines | Off | | Cart note | Let customers leave an order note | Off | ⚠️ Keep **Type: Drawer** unless you have a strong reason — the [free gift selector, progress bar, and drawer upsells](/sitesbyseth-docs/reign/free-gift-tiers.md) are features of the drawer. --- # 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/reign/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.