Skip to main content

Theme Setup & Presets

This guide will walk you through uploading the TabletopForge theme to your Shopify store and configuring its atmospheric visual identity, logo branding, custom typography, and navigation systems.

Theme Installation​

To install the TabletopForge theme on your Shopify store:

  1. Log in to your Shopify Admin dashboard.
  2. Navigate to Online Store > Themes.
  3. Under the Theme library section, click Add theme > Upload zip file.
  4. Select the theme package Tabletop Forge-1.0.0.zip and click Upload file.
  5. Once uploaded, click Actions > Publish to make TabletopForge your active theme (or click Customize to modify it in a draft state).

Color Customization & Presets​

TabletopForge utilizes a high-contrast dark science-fantasy aesthetic. It supports three built-in color schemes configured under the global settings.

Selecting a Theme Preset​

  1. In the theme customizer, click the Theme Settings icon (gear icon on the left-hand menu).
  2. Expand the Colors panel.
  3. Locate the Color scheme dropdown and select one of the following configurations:
note
  • Dark Fantasy (Default): A rich, immersive dark theme utilizing charcoal backgrounds, amber-gold accents (#C9973A), and warm parchment-colored text (#E8E0D0).
  • Midnight Blue: A deep space sci-fi theme characterized by indigo and navy blues, high-contrast white text, and electric cyan highlights.
  • Crimson Forge: A high-contrast industrial command theme featuring pitch black surfaces, metallic slate borders, and warning-red/crimson accents.

Customizing Individual Theme Colors​

For merchants wishing to override default preset colors, TabletopForge exposes the following settings in the Colors panel:

  • Background color: The main page backing color (defaults to #0F0D12 in Dark Fantasy).
  • Surface color: The background for cards, tables, and Bento grids (defaults to #1A1720).
  • Text color: General body copy and headings color (defaults to #E8E0D0).
  • Accent color: Applied to focus states, buttons, links, and borders (defaults to #C9973A).
  • Button text color: The font color rendered inside primary action buttons (defaults to #0F0D12).

Logo & Branding​

Add your visual assets to define your storefront identity:

  1. Open Theme Settings > Logo & Branding.
  2. Click Select image under Logo image to upload your primary shop logo.
  3. Adjust the Logo width slider (ranging from 50px to 300px, default is 160px) to size your logo correctly.
  4. Upload a small icon under Favicon image to display your brand icon in browser tabs and bookmark bars.

Typography​

TabletopForge includes styling support for thematic Google Fonts to match RPG books and digital gaming assets.

  1. Navigate to Theme Settings > Typography.
  2. Customize the following options:
    • Heading font: Select your preferred heading typeface (e.g., Cinzel, MedievalSharp, Grenze Gotisch for gothic/rpg themes).
    • Body font: Select a legible reading typeface (e.g., Assistant, Inter, Roboto).
    • Heading size: Adjust font scaling (80% to 150%, default is 100%).
    • Body text size: Adjust text readability (12px to 20px, default is 16px).

The header navigation hosts the principal commands of your storefront. TabletopForge incorporates a floating navigation bar that transitions from transparent to solid color on scroll.

To associate a navigation menu:

  1. In your Shopify admin, go to Online Store > Navigation.
  2. Create or edit your menu handles (e.g., main menu with subcategories).
  3. Back in Themes > Customize, select the Header section block from the sidebar.
  4. Click Select Menu under the header settings and associate your menu handle.

2. Header Visual Features​

  • Technical Archive Banner Access: Displays a "TECHNICAL ARCHIVE ACCESS GRANTED" security clearance banner (translatable string tabletop_forge.header.registry_access) in the command console.
  • Transparency to Solid Scroll: On load, the header sits transparently above hero banners. Scrolling down triggers a color transition and applies a backdrop-blur filter to ensure menu options remain legible over image backgrounds.
  • Mobile Drawer: Below desktop widths (1024px), the header collapses to a mobile drawer toggle, providing easy access to navigation commands on smaller screens.