Custom Sections
TabletopForge includes custom-built sections engineered specifically for immersive tabletop gaming storefronts. These sections go beyond standard Shopify sections to provide unique layouts tailored to RPG publishers, miniature modelers, and gaming hobbyists.
TF Bento Grid
File: sections/tf-bento-grid.liquid
The Bento Grid is a modern, block-based layout that displays diverse content types (visual illustrations, technical statistics, and product links) side-by-side in a Pinterest-style multi-size grid.
Adding the Bento Grid
- In the Shopify theme editor, navigate to your homepage (or a custom landing page).
- Click Add section → TF Bento Grid.
- Configure the section settings below.
Settings
| Setting | Type | Description |
|---|---|---|
| Feature Image 1 | Image picker | Primary workflow block background (Digital Sculpting) |
| Feature Image 2 | Image picker | Archive navigation panel background |
| Block 1 Title | Text | Headline for the large feature block |
| Block 1 Description | Textarea | Body text for the feature block overlay |
| Scale Guide URL | URL | Link for the "Scale Consistency" small info block |
Content Blocks
The Bento Grid consists of four fixed layout blocks:
| Block | Size | Content |
|---|---|---|
| Large Feature Block 1 | 8/12 columns | Computational sculpting feature with text overlay |
| Small Info Block 1 (Resin Specs) | 4/12 columns | Shore D hardness and print resolution stats |
| Small Info Block 2 (Scale Guide) | 4/12 columns | Link to your scale guidance or FAQ page |
| Large Interactive Block 2 | 8/12 columns | Archive navigation panel with background image |
Layout Code Reference
The Bento Grid uses a 12-column responsive CSS grid:
<!-- Bento Container Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
<!-- Large Feature Card (8/12 cols) -->
<div class="md:col-span-8 bg-surface-container rounded p-6">
<h3>Large Workflow Showcase</h3>
</div>
<!-- Small Info Card (4/12 cols) -->
<div class="md:col-span-4 bg-surface-container rounded p-6">
<h4>Resin Parameters</h4>
</div>
</div>
Before/After Slider
File: sections/before-after-slider.liquid
The Before/After Slider lets collectors and miniature hobbyists compare two stages of a model — typically an unpainted gray resin sprue versus a fully painted display-level piece — via an interactive drag handle.
Setup
- In the theme editor, click Add section → Before/After Slider.
- Upload the Before Image (e.g., unpainted miniature photo).
- Upload the After Image (e.g., painted showcase photo).
- Configure labels and optional heading text.
Settings
| Setting | Type | Description | Default |
|---|---|---|---|
| Before image | Image picker | The "before" state image | — |
| After image | Image picker | The "after" state image | — |
| Before label | Text | Label displayed on the left side | "Unpainted" |
| After label | Text | Label displayed on the right side | "Painted" |
| Section heading | Text | Optional heading above the slider | "See the Transformation" |
:::warning Image alignment rule
For the best visual result when sliding, both images must be cropped to identical dimensions (e.g., 1000×1000px square) and the subject positioned at the same coordinates and angles in both shots. Use compressed .webp format to reduce file size.
:::
Countdown Timer
File: sections/countdown-timer.liquid
The Countdown Timer displays a live countdown for time-sensitive releases — pre-order launches of physical sprues, digital STL kickstarters, or campaign ruleset reveals.
Settings
| Setting | Type | Description |
|---|---|---|
| Target date/time | Text | Release datetime in YYYY/MM/DD HH:MM:SS format |
| Heading | Text | Title displayed above the timer |
| Subheading | Text | Supporting description |
| Expired message | Text | Text to display when the timer hits zero |
| CTA button label | Text | Optional button shown when the countdown ends |
| CTA button URL | URL | Link for the post-countdown CTA button |
Display Format
The timer renders four glassmorphic HUD tiles displaying:
[ DD ] [ HH ] [ MM ] [ SS ]
Days Hours Minutes Seconds
When the timer expires, the tiles are replaced by the Expired message text and the optional CTA button appears.
Newsletter
File: sections/newsletter.liquid
A full-width email subscription section powered by Shopify's customer API.
Settings
| Setting | Description |
|---|---|
| Heading | Section headline (e.g., "Join the Archive") |
| Subheading | Supporting text below the heading |
| Placeholder text | Input field placeholder (e.g., "Enter your email") |
| Button label | Submit button text (e.g., "Subscribe") |
Subscribers are added to your Shopify customer list with the tag newsletter and can be managed via Customers in Shopify Admin.
Testimonials
File: sections/testimonials.liquid
Displays customer reviews and social proof in a card grid layout.
Testimonial Blocks
Each testimonial is a separate Review block added inside the section:
| Setting | Description |
|---|---|
| Reviewer name | Customer name |
| Review text | The testimonial body copy |
| Rating | Star rating (1–5) |
| Avatar image | Optional reviewer avatar photo |
Multicolumn
File: sections/multicolumn.liquid
A flexible multi-column layout for displaying icons, features, or informational content in a row.
Settings
| Setting | Description |
|---|---|
| Number of columns | Auto-determined by the number of Column blocks added |
| Heading | Section heading |
| Alignment | Left, Center, or Right |
Each Column block supports:
- Icon or image
- Title
- Body text
- Optional link