Theme Settings
Theme Settings in TabletopForge control the global appearance and behavior of your entire store — colors, typography, logo, social links, and more. Changes made here apply across all pages.
To access Theme Settings:
- Open the Shopify theme editor (Online Store → Themes → Customize).
- Click the ⚙️ gear icon (Theme Settings) in the left sidebar.
Colors
Configure the global color tokens for your store. See the Color Schemes & Presets guide for full preset details.
| Setting | Description |
|---|---|
| Color scheme | Select a built-in preset: Dark Fantasy, Midnight Blue, or Crimson Forge |
| Background color | Main page background color |
| Surface color | Card and panel background color |
| Text color | Body and heading text color |
| Accent color | Buttons, links, and focus rings |
| Button text color | Text inside primary CTA buttons |
Typography
| Setting | Description |
|---|---|
| Heading font | Font applied to all headings (<h1>–<h4>) |
| Body font | Font applied to paragraphs and UI text |
| Heading size | Proportional scaling (80%–150%) |
| Body text size | Base font size (12px–20px, default: 16px) |
See the Typography guide for recommended font pairings.
Logo & Branding
| Setting | Description |
|---|---|
| Logo image | Upload your shop logo (SVG or PNG with transparent background) |
| Logo width | Maximum logo display width (50px–250px) |
| Favicon | Small icon shown in browser tabs and bookmarks |
Social Media
Enter the full URL to your social media profiles to enable social icons in the footer:
| Setting | Example |
|---|---|
https://facebook.com/yourbrand | |
https://instagram.com/yourbrand | |
| X (Twitter) | https://x.com/yourbrand |
Cart
| Setting | Description |
|---|---|
| Cart type | Choose between Drawer (slide-in cart) or Page (dedicated /cart page) |
TabletopForge defaults to the cart drawer for a seamless add-to-cart experience without navigating away from the current page.
Animations
| Setting | Description |
|---|---|
| Enable scroll animations | Fade-in animations as content scrolls into view |
| Animation speed | Duration of scroll entrance animations (Fast / Normal / Slow) |
Custom CSS
You can inject custom CSS overrides directly in the theme editor without editing theme files:
- In Theme Settings, scroll to Custom CSS.
- Enter your CSS rules in the text area.
This is the recommended way to make minor visual adjustments (spacing tweaks, font overrides, custom border styles) without modifying core theme files.
Example:
/* Increase section heading size globally */
.tf-section-title {
font-size: 2.5rem;
}
/* Override monospace font */
:root {
--tf-font-mono: 'Courier New', Courier, monospace;
}
Custom JavaScript (Advanced)
For advanced customizations requiring JavaScript:
- Go to Online Store → Themes → ⋯ Actions → Edit code.
- Open
layout/theme.liquid. - Add a
<script>block before the closing</body>tag.
:::caution Edit code carefully
Editing theme.liquid directly can break your store if done incorrectly. Always make a backup before modifying theme files. Custom JavaScript is not covered by standard theme support.
:::