Skip to main content

Custom Sections

The TabletopForge theme features custom sections engineered to build immersive layouts for RPG developers, miniature modelers, and gaming publishers. This guide walks you through setting up and configuring these unique modules.

1. Bento Grid Section​

The Bento Grid (tf-bento-grid.liquid) is a modern, block-based layout that displays diverse content types (visual illustrations, technical statistics, and product links) side-by-side.

Section Block Configuration​

To place the Bento Grid:

  1. In the Shopify theme customizer, navigate to your homepage (or any custom landing page).
  2. Click Add Section > TF Bento Grid.
  3. Under the section settings, configure the custom images:
    • Feature Image 1 (Digital Sculpting): Displays the primary workflow block (defaults to tf-computational-sculpting.jpg if left blank).
    • Feature Image 2 (Interactive Archive): Displays a background visual for the digital archive panel (defaults to tf-archive-vision.jpg if left blank).

Content Structure​

  • Large Feature Block 1: Displays computational sculpting features with custom title and description overlay text.
  • Small Info Block 1 (Resin Specs): Highlights physical resin curing properties, showing the hardness index (82 Shore D) and printing resolution (8K Native).
  • Small Info Block 2 (Scale Consistency): Links users directly to a scale guidance page with a custom redirection path (e.g., pages/scale-guide).
  • Large Interactive Block 2: Integrates an archive navigation panel prompting strategically curated collections.

Technical Bento Layout Markup​

If you are customizing theme code or building custom pages using Tailwind CSS layout templates, use the following modular grid syntax:

<!-- Bento Container Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
  <!-- Large Feature Card (e.g. Width: 8/12 cols) -->
  <div class="md:col-span-8 bg-surface-container rounded p-6">
    <h3>Large Workflow Showcase</h3>
  </div>
  
  <!-- Small Info Card (e.g. Width: 4/12 cols) -->
  <div class="md:col-span-4 bg-surface-container rounded p-6">
    <h4>Resin Parameters</h4>
  </div>
</div>

2. Before/After Slider​

The Before/After Slider (before-after-slider.liquid) enables collectors and miniature hobbyists to compare two stages of a model (typically an unpainted gray resin sprue versus a fully painted display-level model) via an interactive slider handle.

Slider Setup Checklist​

  1. Navigate to the page customizer, click Add Section, and select Before/After Slider.
  2. Upload the Before Image (e.g., unpainted miniature photo).
  3. Upload the After Image (e.g., painted showcase miniature photo).
  4. Configure labels:
    • Before label: Defaults to "Unpainted".
    • After label: Defaults to "Painted".

:::warning Image Alignment Rule To avoid jarring visual offsets when sliding, crop both images to identical dimensions (e.g., 1000px × 1000px square ratio). Position the physical miniature in the exact same coordinates and angles in both shots. Use compressed .webp formats to save bandwidth. :::

The Hero Carousel (tf-hero-carousel.liquid) displays high-resolution banners of premium assets alongside diagnostic telemetry overlays, such as scale, resin density, and material properties.

  1. Add TF Hero Carousel to the header region of your homepage.
  2. Add individual Slide blocks (supporting background artwork, titles, subtitles, and CTA links).
  3. Fill in details such as model classification labels, product scale (e.g., 32mm Scale), and material ratings to display the technical layout HUD.

4. Countdown Timer​

The Countdown Timer (countdown-timer.liquid) displays countdown counters for time-sensitive releases (e.g., pre-launch of physical sprues, digital STL kickstarters, or campaign rulesets).

  • Target Date: Enter the release date and time in the custom format (e.g., YYYY/MM/DD HH:MM:SS).
  • Expired Message: The title string that displays once the timer reaches zero (defaults to "Available Now!").
  • Aesthetics: The HUD displays Days, Hours, Minutes, and Seconds blocks with translucent glassmorphic card boundaries.