Hero Sections
Hero sections are high-impact, full-width banners designed for the top of your pages. TabletopForge includes two hero section variants: a static Hero Banner and a multi-slide TF Hero Carousel.
Hero Banner
File: sections/hero-banner.liquid
A single, full-width hero banner for displaying a compelling background image with a text overlay and call-to-action button.
Features
- Full-bleed background image
- Headline and subheading text overlay
- Primary and secondary CTA button links
- Dark overlay for improved text legibility
Settings
| Setting | Type | Description |
|---|---|---|
| Background image | Image picker | The full-bleed hero background |
| Heading | Text | Main headline text |
| Subheading | Text | Supporting subtitle |
| CTA button label | Text | Primary button text |
| CTA button URL | URL | Primary button link |
| Overlay opacity | Range | Darkness of the image overlay (0–100%) |
| Content alignment | Select | Left, Center, or Right text alignment |
| Height | Select | Small (300px), Medium (500px), Large (700px), Full viewport |
TF Hero Carousel
File: sections/tf-hero-carousel.liquid
The TF Hero Carousel is TabletopForge's flagship hero section — a multi-slide auto-rotating banner with HUD telemetry overlays inspired by sci-fi targeting systems. Each slide displays a background artwork with diagnostic stat overlays (scale, resin density, material classification).
Adding Slides
The Hero Carousel uses Slide blocks. Each slide is a separate block added within the section:
- In the theme editor, click TF Hero Carousel in the sidebar.
- Click Add block → Slide.
- Configure each slide's settings.
- Repeat for additional slides (up to 5 recommended).
Slide Block Settings
| Setting | Type | Description |
|---|---|---|
| Background image | Image picker | The full-bleed slide background artwork |
| Title | Text | Model or product classification label |
| Subtitle | Text | Descriptive subline (e.g., "Rapid Deployment Unit") |
| CTA label | Text | Button text (e.g., "View Arsenal") |
| CTA URL | URL | Link target for the button |
| Scale label | Text | Diagnostic overlay: scale value (e.g., "32mm Scale") |
| Material label | Text | Diagnostic overlay: material type (e.g., "8K Resin") |
Section Settings
| Setting | Type | Description |
|---|---|---|
| Autoplay | Checkbox | Enable automatic slide cycling |
| Autoplay interval | Range | Seconds between slide transitions (3–10s) |
| Show navigation arrows | Checkbox | Display prev/next arrow controls |
| Show slide indicators | Checkbox | Display dot indicators below the carousel |
HUD Overlays
The carousel renders diagnostic data overlays in the corners of each slide:
- Top left: Crosshair targeting indicator
- Top right: Scale classification label
- Bottom right: Material / resin type label
These overlays are cosmetic and pull their data from the Scale label and Material label block settings.
:::tip Hero carousel best practices Use landscape images with a 3:1 or 16:9 aspect ratio at a minimum width of 1920px for best results. Keep background images dark enough that white overlay text remains legible without excessive overlay opacity. :::