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. |
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.
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 |
Was this page helpful?
Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.