Product Sections
These sections power your product browsing and purchasing experience — from the main product detail page to featured collection grids and new arrivals showcases.
Main Product
File: sections/main-product.liquid
Template: Used on all product page templates.
The Main Product section is the core product detail page layout. It displays in a two-column design with a media gallery on the left and a technical specification sidebar on the right.
Features
| Feature | Description |
|---|---|
| Product image gallery | Main viewer with up to 3 thumbnail images |
| 3D Orbit Viewer | Click "INITIALIZE INSPECTION" to switch to interactive 3D model view |
| Product title & status | Displays title, In Stock / Sold Out badge |
| Price | Renders current product price |
| Variant picker | Dropdown selectors for each product option |
| Add to Cart | Standard Shopify add-to-cart form |
| Digital STL button | Rendered when product has stl-available tag |
| Technical specs panel | Diagnostic data table (scale, material, height, component yield, base) |
| Field Report | Product description rendered in a lore-card format |
| Materials card | Material properties checklist with Shopify translation strings |
| Scale comparison chart | Visual bar chart comparing product height to standard infantry scale |
| Related assets | Grid of up to 4 related products from the same collection |
Scale Tags
The technical specs panel reads product tags to display the scale output:
| Tag | Displayed Value |
|---|---|
75mm | 75mm / 1:24 |
28mm | 28mm / 1:60 |
| (none) | 32mm / 1:56 |
Digital STL Split Checkout
When the tag stl-available is present, the product page renders two buttons:
┌─────────────────────────────────────────┐
│ ADD PHYSICAL RESIN │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ ACQUIRE DIGITAL STL │
└─────────────────────────────────────────┘
See the 3D Models & STL Products guide for complete setup instructions.
Featured Collection
File: sections/featured-collection.liquid
Displays a curated grid of products from a selected collection. Ideal for highlighting a top category on the homepage.
Settings
| Setting | Type | Description | Default |
|---|---|---|---|
| Heading | Text | Section title | "Featured" |
| Collection | Collection picker | The collection to display | — |
| Products to show | Range | Number of products in the grid | 4 |
| Columns | Range | Grid columns on desktop | 4 |
TF New Arrivals
File: sections/tf-new-arrivals.liquid
The TF New Arrivals section displays the latest products from a selected collection in a tactical product card grid. Each card is clickable and opens a 3D model inspection modal with product diagnostic data.
Features
- Interactive product cards — clicking a card opens a 3D inspection modal
- Modal 3D viewer — renders an orbital Three.js placeholder model alongside product data
- Diagnostic overlay — displays polycount, print time, scale, and price in the modal
- Status badges — In Stock, Limited, or Sold Out based on product availability and tags
- "View Archive" link — links to the full product collection
Settings
| Setting | Type | Description | Default |
|---|---|---|---|
| Collection | Collection picker | The source collection for new arrivals | — |
| Products to show | Range (2–8) | Number of product cards to display | 4 |
Product Card Data
The product card reads data from:
product.title— card nameproduct.price— display priceproduct.featured_media— card imageproduct.tags— scale classification, stock statusproduct.url— CTA link in modal
Product Showcase
File: sections/product-showcase.liquid
A single-product spotlight section designed for hero-level product promotion — ideal for featuring a flagship release, new drop, or bundle offer.
Settings
| Setting | Type | Description |
|---|---|---|
| Product | Product picker | The product to showcase |
| Heading override | Text | Optional headline to display instead of product title |
| Subheading | Text | Supporting marketing copy |
| Layout | Select | Image Left or Image Right |
Collection List
File: sections/collection-list.liquid
A grid of collection cards for browsing all store categories. Useful on the homepage or dedicated "Browse" landing pages.
Settings
| Setting | Type | Description | Default |
|---|---|---|---|
| Heading | Text | Section heading | "Browse Categories" |
| Collections | Collection list | Select collections to feature | — |
| Columns | Range | Cards per row on desktop | 3 |
Each collection card displays the collection's featured image, title, and a link to the collection page.