Theme settings
These are the store-wide controls — colors, fonts, spacing, and the TCG-specific features like playset sizes and the holo effect. Set them once and they apply across every page, unlike section settings, which only affect the one section you’re editing.
Where to find them. In the theme editor (Online Store → Edit theme), click the gear icon at the bottom of the left sidebar. Each group below is one collapsible panel there. Changes preview live and only go public when you click Save.
How colors work
Colors are set in pairs — a background and a matching foreground (text) color that are designed to be legible together. “Base” is your main page. “Secondary” is for panels and cards that need to stand off the page. “Accent” and “Button” drive links and calls-to-action. “Status” colors (error, warning, success) and “Muted” round out the set.
Because everything is a pair, sections and cards pull whichever pairing fits, so text stays readable whether you run a light store or a dark one. Change a base color and it ripples everywhere that pairing is used — you don’t restyle sections one by one.
Settings that connect to the app
A few groups here point at your Sideboard app rather than living entirely in the theme:
- Collection filters — the theme picks the filter source (Sideboard, Search & Discovery, or off); the filters themselves are configured in whichever app you choose, and individual collection templates can override the source. The full story is Collection filters.
- Buylist — sets where the “Sell Us This Card” button sends shoppers. Your buylist slug is the handle after
/b/in your Sideboard buylist URL. - Playset sizes — the per-game quantity the playset quick-add button on product cards adds. The product page’s playset button uses fixed sizes (4, or 3 for Yu-Gi-Oh! and Flesh and Blood) and doesn’t read these settings — its only control is the on/off switch in the product section.
Branding
| Setting | Type | What it does |
|---|---|---|
| Favicon | Image | Square image (32×32 or larger) shown in the browser tab. PNG recommended. |
Typography
Fonts
| Setting | Type | What it does |
|---|---|---|
| Primary | Font | Default: work_sans_n4 |
| Headings | Font | Default: work_sans_n6 |
Headings
| Setting | Type | What it does |
|---|---|---|
| Section heading alignment | Dropdown | Default alignment for section headings. Sections with their own alignment control (e.g. hero, rich text) override this. (Left, Center, Right) |
Layout
| Setting | Type | What it does |
|---|---|---|
| Page width | Dropdown | Narrow, Wide |
| Page margin (desktop) | Slider | Default: 20 |
| Page margin (mobile) | Slider | Default: 12 |
Colors
Each color pair includes a background and foreground (text) color designed to work together for accessibility.
Base colors
| Setting | Type | What it does |
|---|---|---|
| Background | Color | Default: #1a1a2e |
| Foreground | Color | Default: #f0f0f0 |
Secondary colors
| Setting | Type | What it does |
|---|---|---|
| Secondary background | Color | Default: #252542 |
| Secondary text | Color | Default: #f0f0f0 |
Accent colors
| Setting | Type | What it does |
|---|---|---|
| Accent | Color | Default: #6366f1 |
| Accent text | Color | Default: #ffffff |
Button colors
| Setting | Type | What it does |
|---|---|---|
| Button background | Color | Default: #6366f1 |
| Button text | Color | Default: #ffffff |
Status colors
| Setting | Type | What it does |
|---|---|---|
| Error | Color | Default: #ef4444 |
| Error text | Color | Default: #ffffff |
| Warning | Color | Default: #f59e0b |
| Warning text | Color | Default: #1a1a2e |
| Success | Color | Default: #10b981 |
| Success text | Color | Default: #ffffff |
Muted colors
| Setting | Type | What it does |
|---|---|---|
| Muted | Color | Default: #4a4a6a |
| Muted text | Color | Default: #9ca3af |
Border
| Setting | Type | What it does |
|---|---|---|
| Border | Color | Default: #3d3d5c |
Style
Corner radius
| Setting | Type | What it does |
|---|---|---|
| Border radius style | Dropdown | Sets the global border radius that components can use (None (0px), Subtle (4px), Rounded (8px), Soft (16px), Pill (9999px), Custom) |
| Custom border radius | Slider | Only used when ‘Custom’ is selected above |
| Input corner radius | Slider | Default: 6 |
| Button corner radius | Slider | Default: 6 |
| Card corner radius | Slider | Default: 8 |
| Badge corner radius | Slider | Default: 4 |
Social media
Social media links
| Setting | Type | What it does |
|---|---|---|
| X (Twitter) | Text | — |
| Text | — | |
| Text | — | |
| YouTube | Text | — |
| TikTok | Text | — |
| Discord | Text | — |
| Twitch | Text | — |
Playset sizes
Configure the default playset quantity for quick-add buttons by trading card game. Each game has its own tournament-legal playset size.
| Setting | Type | What it does |
|---|---|---|
| Pokemon | Slider | Default: 4 |
| Magic: The Gathering | Slider | Default: 4 |
| Yu-Gi-Oh! | Slider | Default: 3 |
| Lorcana | Slider | Default: 4 |
| Flesh and Blood | Slider | Default: 3 |
| One Piece | Slider | Default: 4 |
| Default (other games) | Slider | Used for products not matching any specific game |
Cart
| Setting | Type | What it does |
|---|---|---|
| Enable cart drawer | On / off | Show a slide-in drawer instead of navigating to cart page |
| Open drawer when item added | On / off | Automatically open the cart drawer when adding items |
| Drawer slide-in side | Dropdown | Which edge the cart drawer slides in from. Right is conventional (matches the cart icon in the header). (Right, Left) |
Collection filters
Manage filters in the Sideboard app: Apps → Sideboard → Filters.
| Setting | Type | What it does |
|---|---|---|
| Filter source | Dropdown | Which system powers the collection filter sidebar. Learn more (No filters, Search & Discovery filters, Sideboard filters) |
| Collapse + search long facets after | Slider | A facet with more options than this many shows the first N with a “show more” toggle, plus a search box to narrow the list. |
| Option counts | Dropdown | Where each option’s count sits. Counts can be turned off per template with the collection section’s “Show filter counts” setting. (Right-aligned, Next to the label) |
| Options with no matches | Dropdown | Search & Discovery filters only — Sideboard filters never show empty options. (Hide, Show greyed out) |
Buylist
Controls where the “Sell Us This Card” button on product pages sends shoppers. Set your buylist slug to link straight to your Sideboard buylist (works even if the Sideboard app isn’t installed). Leave the slug blank to route through the Sideboard app proxy instead.
| Setting | Type | What it does |
|---|---|---|
| Buylist host | Text | Base URL of your Sideboard buylist, no trailing slash (e.g. https://sideboard.gg). |
| Buylist slug | Text | Your store’s buylist handle — the part after /b/ (e.g. cardboard-crushers). When set, “Sell Us This Card” links directly to your buylist. |
Card holo effect
A holographic-foil shimmer on card images: 3D tilt, specular glow, and iridescence that follow the cursor. Foil-finish cards shimmer on their own and intensify when a shopper picks the Foil finish.
| Setting | Type | What it does |
|---|---|---|
| Enable holo effect | On / off | Default: true |
| Show on product page image | On / off | Default: true |
| Show on product cards (grids) | On / off | Applies to collection and search grids. The effect activates one card at a time on hover, so it stays light even on large pages. |
Intensity
| Setting | Type | What it does |
|---|---|---|
| Tilt strength | Slider | Default: 12 |
| Specular glow | Slider | Default: 55 |
| Iridescence | Slider | Default: 50 |
| Noise texture | Slider | Default: 14 |
| Motion speed | Slider | Higher = snappier tilt response. |
Condition & finish options
How condition and finish choices are presented on product pages and collection cards.
| Setting | Type | What it does |
|---|---|---|
| Option selector style | Dropdown | How condition, finish, and any other option (like Edition) are presented, on both product pages and collection cards. Chips show every choice at a glance; dropdowns save space on products with several options, but don’t show the low-stock count a chip can. Applies to every option the same way. (Chips, Dropdowns) |
| Show options with only one choice | On / off | Off by default, so nothing on your storefront changes until you turn it on. Tick it and any option that only has one choice — Condition, Finish, or something else like Edition — shows a chip for it, instead of hiding that option entirely and leaving shoppers to guess. Only choices the product actually has are shown; a card that only comes in Non-Foil never displays a Foil chip. |
| Sold-out cards open on Near Mint | On / off | Off by default, so nothing on your storefront changes until you turn it on. Tick it and a card with every condition out of stock opens on Near Mint at the Near Mint price, instead of the product page opening on the cheapest condition (Damaged) while collection cards show the most expensive. Cards with something in stock are unaffected either way. |
| Default finish for collection cards | Dropdown | Foil (the default) opens a grid card on its cheapest in-stock foil variant, so the holo effect shows more often. Normal opens the grid card on the same variant the list view already uses — the cheapest in-stock variant of any finish — so grid and list agree. (Foil, Normal) |
Collection product cards
Card appearance for the collection grid. These also drive the cards on very large collections (5,000+ products), where the grid is rendered by Sideboard — so every card stays identical above and below that size.
| Setting | Type | What it does |
|---|---|---|
| Hide sold-out swatches | On / off | Drop sold-out conditions and finishes instead of striking them through. |
Grid card
| Setting | Type | What it does |
|---|---|---|
| Show secondary image on hover | On / off | Default: false |
| Show vendor | On / off | Default: false |
| Show condition/finish swatches | On / off | Default: true |
| Show quick add | On / off | Default: true |
| Show playset quick-add | On / off | Default: true |
| Overlay options on image | On / off | Default: false |
| Playset button goes to checkout | On / off | Default: false |
| Mobile card style | Dropdown | Always visible, Tap to expand, Expand button, Compact row |
View mode
| Setting | Type | What it does |
|---|---|---|
| Default view | Dropdown | Grid, List |
| Enable list view | On / off | Default: true |
List card
| Setting | Type | What it does |
|---|---|---|
| Show image | On / off | Default: true |
| Show set info | On / off | Default: false |
| Show rarity | On / off | Default: true |
| Show condition swatches | On / off | Default: true |
| Show price | On / off | Default: true |
| Show quantity | On / off | Default: true |
| Show add to cart | On / off | Default: true |
Sidebar
A site-wide left-rail navigation. Off by default. Turn it on to add the rail to every page, then add Menu and Text blocks in the Sidebar section.
| Setting | Type | What it does |
|---|---|---|
| Enable site-wide sidebar | On / off | Default: false |
Show on
| Setting | Type | What it does |
|---|---|---|
| Home page | On / off | Default: true |
| Collection pages | On / off | Default: true |
| Product pages | On / off | Default: false |
| Search page | On / off | Default: true |
| Regular pages | On / off | Default: false |
| Blog and articles | On / off | Default: false |
Behavior
| Setting | Type | What it does |
|---|---|---|
| Collapse menu groups by default | On / off | Default: true |
Layout
| Setting | Type | What it does |
|---|---|---|
| Heading | Text | Default: Browse |
| Width | Slider | Default: 280 |
| Padding top | Slider | Default: 24 |
| Padding bottom | Slider | Default: 24 |
| Padding inline | Slider | Default: 20 |
| Gap between blocks | Slider | Default: 24 |
| Gap between items | Slider | Default: 8 |
Google Customer Reviews
Three steps, in order. 1) Turn on Customer Reviews for your store in Google Merchant Center. 2) In the theme editor, switch the dropdown at the top from Homepage to “Checkout and Customer Account”, open Checkout > Thank You, then Sections > Main > Add block, and add the Google Customer Reviews block under Google & YouTube (this is the opt-in survey that earns your store its ratings). 3) Paste your Merchant Center merchant ID below and turn the badge on. Until the first two steps are done, the badge reads “no rating available”, which is expected and not a bug.
| Setting | Type | What it does |
|---|---|---|
| Show Google Customer Reviews badge | On / off | Default: false |
| Merchant ID | Text | Paste only the numeric merchant ID from Google Merchant Center, not the whole code snippet. |
| Badge position | Dropdown | Bottom right, Bottom left |
Was this page helpful?
Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.