# Theme settings

Chapter 2 of the Loot user guide.

Open the theme editor and click the gear icon (**Theme settings**). The groups below appear in this order.

## Colors

**Color palette** sets every color at once:

| Palette | Page | Accent | Pop | Feels like |
| --- | --- | --- | --- | --- |
| **Arcade** (default) | Lilac white `#f4f1ff` | Electric violet `#5a2cf0` | Acid lime `#c6f43a` | Figures, vinyl and drop day |
| **Holo** | Midnight violet `#110e1d` (dark) | Hot pink `#ff6ab4` | Foil gold `#ffd84a` | Trading cards, comics and anime |
| **Meeple** | Warm paper `#f6f5ee` | Felt green `#0a7553` | Sunflower `#ffc93c` | Board games, tabletop and RPGs |
| **Vapor** | Mint `#edfaf5` | Magenta `#c0127c` | Aqua `#5ce8cf` | Plush, pins and pop-culture merch |

The **accent** fills primary buttons, the hero and drop calendar blocks, the current menu tab, selected options and the focus ring. The **pop** color is the loud one: the announcement bar, the tilted kicker stickers above section headings, the hero highlight, price starbursts, the cart count and the "New" badge. Every palette meets WCAG AA contrast for text (4.5:1) and controls (3:1) on every background the theme uses.

Below the palette, each color can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"):

| Group | Colors |
| --- | --- |
| Backgrounds | Page background; Cards and panels (blister cards, the header row, drawers, menus and inputs); Alternate bands (the alternate section background and empty progress segments) |
| Text | Headings and prices; Body text; Secondary text (series lines, meta and ledes); Faint text (compare-at prices, placeholders and sold-out options) |
| Controls and accents | Control borders (inputs, chips and toggles: keep it at 3:1 against the page); Accent; Text on accent; Pop; Sale and alerts (sale prices and badges, low stock, errors); Success ("Got it" toggles, "Live now", in stock, free shipping reached) |
| Rarity colors | Common, Uncommon, Rare, Epic and Legendary: the rarity badges, the tint inside each product's bubble, the ring on epic and legendary cards, and the rarity filter chips |

**Chase** pieces don't have a color setting: they always get the same pastel holographic foil, in every palette.

> **Note:** Overriding a color can lower contrast. Check text on your new color with a contrast checker before you publish.

## Typography

| Setting | Default | Notes |
| --- | --- | --- |
| Heading font | Unbounded | Headings, prices, buttons, countdown digits and big numbers. The theme loads the bold (700) face you pick and an extra-bold (800) face for the hero and section headings when the family has one. |
| Body font | Figtree | Everything else: menus, labels, badges, descriptions and forms. The theme loads regular, semibold (600), bold (700) and italic. |
| Base text size | 16px (14 to 18) | Scales all text |

Unbounded is wide and rounded, so short headings work best. The presets use Bricolage Grotesque with Figtree (Tabletop) and Dela Gothic One with Rubik (Holo). Any font in Shopify's font library works. Loot never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals.

## Layout

| Setting | Default | What it does |
| --- | --- | --- |
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 32px (16 to 48) | The space either side of the page on large screens |

## Navigation, Brand, Motion and effects

* **Show back-to-top button** (on): appears after shoppers scroll down one screen. **Position**: Left or Right (default); pick the side opposite your chat button. It is mirrored for right-to-left languages.
* **Use a custom logo** (off: the shop name shows as a text logo), **Logo**, **Logo width** (180px, 80 to 320), **Logo mark** (with the text logo: Gem, Sparkle, Lightning bolt, Meeple, Card, Dice or None, in a small tilted tile beside the name) and **Favicon** (32 × 32px).
* **Motion and effects**: **Tilt cards toward the pointer** (on): product cards lift and lean a few degrees toward the mouse, with the plastic gloss sliding across. **Throw confetti when a set is complete** (on): once per set, per device. **Pop product cards in as they scroll into view** (on): cards appear with a small scale-up the first time they come into view (never in the theme editor, so the preview stays still while you edit).

Buttons press down onto their ledge, the cart count pops when something is added and countdown digits roll. Every effect is off for visitors who ask their device for reduced motion: the state still changes, instantly, and nothing moves on its own.

## Commerce

| Setting | Default | What it does |
| --- | --- | --- |
| Free shipping over | 0 | Your real free-shipping threshold, in your store's currency. Above 0, the cart drawer and cart page show "$22.05 away from free shipping" over a progress track, then "Free shipping unlocked". It only shows to customers shopping in your store's currency. The presets set a demo value (99, 120 or 150): change it. |
| Show currency code | Off | Prints the currency code beside every price |

## Product cards

Every product card is a **blister card**: a backing card with a punched hang tab, the photo in a glossy bubble tinted by the product's rarity, badges, the series line, the title, one collector fact (grade, edition, "Needs the base game" or game stats), the price and a **+** key.

| Setting | Default | What it does |
| --- | --- | --- |
| Image shape | Portrait 4:5 | Square 1:1 (game boxes), Portrait 4:5, Card 5:7 (trading cards and comics) or Landscape 4:3 |
| Image fit | Contain | Contain shows the whole image; Cover fills the bubble. Cut-out product shots on transparent backgrounds look best with Contain. |
| Show hang tab | On | The punched slot at the top of the card |
| Show plastic gloss | On | The diagonal shine across the bubble |
| Series line | Series metafield | The line above the title: the series metafield (falling back to the vendor), Vendor, Product type or None |
| Show game stats | On | Players, time, age and weight pips on board game cards (chapter 11) |
| Show "Got it" toggle | Only for products in a set | Off, Only for products in a set, or On every card (chapter 10) |
| Show "New" badge for | 14 days (0 to 60) | Products published within this many days get "New". Products tagged `new` always do. 0 turns the date rule off. |
| Sale badge | Percent off | "Save 20%" or Amount off ("Save $10") |
| Show quick view button | Off | Opens the product's media, options and buy buttons in a panel |
| Show quick add button | On | Products without options go straight to the cart; products with options, a required subscription plan or a gift card recipient open quick view |
| Show swatches | Off | Shows the values of the first option that has swatches. **Swatches before "+" count**: 5 (2 to 8). |
| Show second image on hover | Off | On devices with a mouse |
| Show compare checkbox | Off | Shoppers tick up to 3 products and compare them. Needs **Comparison page**: a page using the `page.compare` template. |

A card shows at most three badges, in this order: Sold out, the rarity or chase badge, Pre-order, Sale, New and Exclusive. Products with a release date still ahead show a "Drops in 2d 14h 09m" chip across the bubble and a bell key instead of the **+** key (chapter 9).

## Collecting

The settings behind the collector features, each explained in its chapter: the six rarity labels, **Ring cards from**, the **Condition option names** and **Condition scale** (chapter 8); **Rarity filter name**, **Build the rarity strip from tags** and **Players filter name** (chapter 13); and **Let shoppers track what they own**, **My sets page** and **Show the set nudge in the cart** (chapter 10).

## Customer accounts and Social media

* **Customer account menu**: the links in the header's account panel. Leave it empty to use the menu Shopify creates for customer accounts.
* **Social media**: Instagram, TikTok, YouTube, Discord, Facebook, X, Threads, Pinterest and LinkedIn. Each link you add shows as an icon in the footer.