Theme Sections — Overview
Sections are the top-level building blocks of every page in your TabletopForge store. Each section is a full-width container that you add, remove, and reorder in the Shopify theme editor.
What Is a Section?
A section is a modular layout block that you assemble on each page of your store. TabletopForge comes with a set of purpose-built custom sections alongside Shopify's standard section library.
Sections fall into two types:
| Type | Description |
|---|---|
| Static sections | Fixed to a specific page (e.g., the Header is always in the Header group) |
| Dynamic sections | Can be added, removed, and reordered on any page |
Adding a Section
- Open the Shopify theme editor (Online Store → Themes → Customize).
- Navigate to the page you want to edit (e.g., Homepage).
- Click Add section in the left sidebar.
- Browse the section list and click a section to add it.
- Drag sections up or down to reorder them.
Section Categories in TabletopForge
| Category | Sections |
|---|---|
| Header & Footer | Header (navigation), Footer |
| Hero Sections | Hero Banner, TF Hero Carousel |
| Product Sections | Main Product, Featured Collection, TF New Arrivals, Product Showcase |
| Custom Sections | TF Bento Grid, Before/After Slider, Countdown Timer |
| Content Sections | Rich Text, Image With Text, Multicolumn, Newsletter, Blog Posts, Video |
| Page Templates | Collection, Product, Cart, Blog, Article, 404, FAQ, Support, About, Documentation |
Universal Section Settings
Every TabletopForge section shares a common set of settings that control spacing and layout behavior:
| Setting | Description |
|---|---|
| Section padding (top) | Space above the section content |
| Section padding (bottom) | Space below the section content |
| Full width | Removes the container max-width constraint |
| Color scheme | Overrides the global color scheme for this section only |
Blocks
Most sections support blocks — sub-components that are added inside the section. For example:
- The Hero Carousel section uses Slide blocks — one block per carousel slide.
- The Multicolumn section uses Column blocks — one block per column.
- The Testimonials section uses Review blocks — one per testimonial.
To add a block, click the section in the sidebar and then click Add block within the section's settings panel.