---
title: "Theme Sections"
description: "Add and configure theme sections"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.firearmcart.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Sections

Sections are modular building blocks that make up your store's pages. Add, configure, and rearrange sections to create your perfect layout.

---

## Theme Compatibility

FirearmCart supports modern themes that compose their layout via **section groups** — headers, footers, and body areas built from reusable sections. Legacy themes that include individual sections directly in their base layout can't be imported.

An importable theme needs all of the following:

- A `layout/theme.liquid` base layout that pulls in section groups rather than naming individual sections
- A `templates/` folder with JSON page templates
- A `sections/` folder containing the section files

If a custom theme fails validation during import, a mismatched layout format is the most common cause. Newer themes (2024+) typically meet the requirement out of the box.

---

## Section Overview

### What Are Sections?

Sections are:

- **Modular** - Self-contained page components
- **Configurable** - Each has its own settings
- **Reorderable** - Drag to rearrange
- **Reusable** - Use the same section type multiple times

### Section Types

The section picker groups entries into categories that come from the theme itself, so the exact list depends on which theme you are using. Common groupings are:

| Category | Examples |
|----------|----------|
| **Header/Footer** | Header, announcement bar, footer |
| **Hero** | Slideshow, image banner, video |
| **Products** | Featured product, product list |
| **Collections** | Collection list, collection links |
| **Content** | Rich text, media with content, divider |
| **Marketing** | Newsletter, marquee |
| **Custom** | Custom Liquid |

---

## Adding Sections

### From the Visual Editor

1. Open the Visual Editor
2. Click **Add section** in the sidebar — each region (header, template, footer) has its own button
3. Browse available sections
4. Click a section to add it
5. Configure its settings

A section can offer more than one **preset** — a preset is a pre-arranged starting point, and each one is listed as its own entry in the picker. Picking one starts the section with that preset's settings and blocks.

![Adding a section from the visual editor's section picker](/assets/docs/sections/fc_sections_3.png)

### Section Placement

New sections are added at the bottom of the region you added them to. To position:

1. Drag the section in the sidebar
2. Drop at desired position
3. Section moves in preview

Sections can also declare which regions they are allowed in, so a section built for the footer will not be offered when you add to the page body.

![Section placement showing the header, body and footer groups in the editor tree](/assets/docs/sections/fc_sections_4.png)

### Adding Multiple Sections

You can add the same section type multiple times:

- Multiple image banners
- Multiple product grids
- Multiple text blocks

Each instance has independent settings.

---

## Section Settings

### Accessing Settings

1. Click on a section in the sidebar
2. Settings panel opens
3. Make changes
4. Preview updates in real-time

### Common Settings

Most sections include:

| Setting | Description |
|---------|-------------|
| **Heading** | Section title |
| **Subheading** | Secondary text |
| **Color scheme** | Color palette for section |
| **Padding** | Top/bottom spacing |
| **Full width** | Extend to edge |

### Setting Types

A section declares each of its settings with a type, and the editor renders the matching control. These are the types the editor can edit:

| Type | Control |
|------|---------|
| `text` | Single-line text input |
| `textarea` | Multi-line text |
| `richtext` | Formatted text editor |
| `liquid` | Liquid code field |
| `number` | Numeric input |
| `range` | Slider |
| `checkbox` | On/off toggle |
| `select` | Dropdown |
| `text_alignment` | Left/center/right control |
| `color` | Color picker |
| `color_scheme` | Picks one of the theme's color schemes |
| `image_picker` | Opens the media library |
| `video` / `video_url` | Video picker or video URL |
| `url` | URL field |
| `link_list` | Picks one of your navigation menus |
| `product` / `product_list` | Product picker(s) |
| `collection` / `collection_list` | Collection picker(s) |
| `blog` | Blog picker |
| `page` | Page picker |
| `header` / `paragraph` | Not inputs — labels and help text that group the panel |
| `font_picker` | Font picker (theme settings only) |

If a section declares a setting type not in this list, the editor shows no control for it and the value can only be changed in the theme's code.

Settings can also carry a `visible_if` condition, so options appear only when they are relevant — for example a "Video URL" field that shows only once you set the media type to video.

---

## Available Sections

Available sections depend on your active theme. Open the Visual Editor's **Add section** panel to see what your theme provides — each section exposes its own settings panel when selected in the sidebar.

A section only appears in the picker if the theme gives it at least one preset. Sections built for a specific page (the main product section, the search results section, and so on) deliberately have none, which is why you cannot add a second copy of them.

Some sections come from FirearmCart plugins rather than your theme — product reviews, events, back-in-stock and subscription options. They appear in the picker when the plugin is active. See [Integrations](/integrations).

---

## Section Blocks

### What Are Blocks?

Blocks are repeatable elements within sections:

- Slides in a slideshow
- Columns in a multicolumn
- FAQ items in collapsible content

### Adding Blocks

1. Open a section with blocks
2. Click **Add block**
3. Select block type
4. Configure block settings

### Managing Blocks

| Action | How |
|--------|-----|
| **Add** | Click the + between blocks, or **Add block** |
| **Edit** | Click on the block in the sidebar, or on the block itself in the preview |
| **Reorder** | Drag and drop |
| **Delete** | Click the trash icon and confirm |

Some blocks are fixed parts of their section and show a padlock instead of a drag handle — those cannot be moved or deleted.

There is no duplicate action for blocks. To repeat one, add a new block of the same type and re-enter its settings.

### Block Limits

A section can cap how many blocks it accepts. When you hit that cap, the editor refuses to add another and tells you the maximum. The limit is set by the theme, so it varies by section.

---

## Reordering Sections

### Drag and Drop

1. Hover over section in sidebar
2. Grab the drag handle
3. Drag to new position
4. Drop to place

### Section Groups

The sidebar splits sections into three regions:

- **Header** - Top of page
- **Template** - The current page's own sections, the area you usually work in
- **Footer** - Bottom of page

Sections reorder within their region, not across regions. The header and footer render on **every** page, so a change there affects your whole storefront — not just the page you happen to be previewing.

---

## Duplicating Sections

### How to Duplicate

1. Hover the section in the live preview
2. Click the duplicate button in the toolbar that appears
3. A copy is added with the same settings

Duplicate is only available from the preview toolbar, not from the sidebar list.

### Use Cases

- Create similar sections with different content
- Test variations
- Backup before major changes

---

## Removing Sections

### How to Remove

1. Click the trash icon on the section in the sidebar (or in the preview toolbar)
2. Confirm the prompt

### Restoration

Removed sections cannot be recovered. If you need it back:

1. Add the section type again
2. Reconfigure settings
3. Or leave the editor without saving, which discards every change since your last save

---

## Section Visibility

### Hiding Sections

Every section in the sidebar has an eye icon:

1. Click the eye icon on the section
2. The section stops rendering on your storefront
3. It stays in the list, greyed out, with its settings intact
4. Click again to show it

Hiding is available for sections. Blocks have no equivalent toggle — remove a block you don't want.

---

## Section Presets

### What Are Presets?

Pre-configured section setups:

- Ready to use
- Professional designs
- Customizable after adding

A preset can carry both settings and a starting set of blocks, so a "Slideshow" preset might arrive with three slides already in place.

### Using Presets

1. Click **Add section**
2. Sections with several presets appear as several entries, one per preset
3. Click the one you want
4. Customize as needed

---

## Firearm-Specific Features

### Product Specifications

Firearm specifications — caliber, action, barrel length, capacity, weight — are entered on the product and rendered by the `{{ product.specifications }}` variable, which outputs a specification table. This is a Liquid variable rather than a section, so it is available anywhere the theme has a product. See [Liquid Variables](/themes/liquid-variables).

### FFL Transfers

FFL selection happens during checkout, which FirearmCart hosts — it is not a theme section and cannot be added from the editor. See [FFL Compliance](/ffl-compliance).

### Age Verification

The age gate is a plugin, not a section. Turn it on and write its copy under **Plugins > Age Verification**; it is then injected into every storefront page, and a customer who confirms (or optionally enters a date of birth) is remembered by a cookie. Themes cannot restyle, move or opt out of it. See [Age Verification](/integrations/age-verification).

---

## Custom CSS

Every section's settings panel has a **Custom CSS** accordion at the bottom. Rules you write there are scoped to that section automatically, so a selector like `.my-class { color: red; }` cannot leak into the rest of the page.

Use it for one-off tweaks. Anything you want on several pages belongs in the theme's stylesheet instead — see [Editing theme code](/themes/visual-editor).

---

## Mobile Responsiveness

### Adapting to Mobile

Well-built themes adapt their sections to smaller screens — stacked layouts, fewer columns, a collapsed menu. This is the theme's doing rather than something the platform applies, so always check the result with the editor's mobile and tablet preview modes.

### Mobile-Specific Settings

Many sections expose their own mobile options. What you get depends on the theme; commonly seen examples include:

| Setting | Description |
|---------|-------------|
| **Mobile columns** | Fewer columns on mobile |
| **Mobile card size** | Smaller cards on mobile |
| **Stack media on mobile** | Stack side-by-side media vertically |
| **Custom mobile media** | A different image or video for mobile |
| **Full width on mobile** | Let the section run edge to edge |

---

## Performance Considerations

### Image Optimization

For sections with images:

- Use appropriately sized images
- Prefer WebP format
- Don't use images larger than needed
- Images are resized on request by the theme's own image filters, so a section that asks for the right width costs far less than one that loads the original file

### Section Count

| Concern | Recommendation |
|---------|----------------|
| **Too many sections** | May slow page load |
| **Heavy sections** | Limit per page |
| **Video sections** | Use sparingly |

### Best Practices

- Keep home page focused
- Use appropriate section types
- Optimize all images
- Test page speed

---

## Troubleshooting

### Section Not Appearing

**Symptoms:** Added section not visible

**Solutions:**
- Check visibility settings
- Scroll to find it on page
- Verify content is added
- Check if hidden on current device

### Settings Not Saving

**Symptoms:** Changes revert after save

**Solutions:**
- Ensure clicking Save button
- Check for validation errors
- Try refreshing and re-editing
- Clear browser cache

### Saved Changes Not Live

**Symptoms:** The editor preview is right, your storefront is not

**Solutions:**
- Confirm you edited the theme that is actually published — a library theme only goes live when you publish it
- Storefront pages are cached; enable **Dev Mode** from **Theme options** to bypass caching while you work

### Layout Issues

**Symptoms:** Section looks wrong

**Solutions:**
- Check all required settings
- Verify images are uploaded
- Review color scheme
- Compare with theme demo

### Mobile Display Problems

**Symptoms:** Section looks bad on mobile

**Solutions:**
- Use responsive preview
- Check mobile-specific settings
- Reduce content if needed
- Test on actual device

---

## Best Practices

### Design

- **Consistent styling** - Use color schemes
- **Visual hierarchy** - Important content first
- **White space** - Don't overcrowd
- **Clear CTAs** - Obvious buttons

### Content

- **Quality images** - High resolution
- **Concise text** - Get to the point
- **Relevant products** - Curated selections
- **Updated content** - Keep fresh

### Organization

- **Logical order** - Sensible flow
- **Limit sections** - Quality over quantity
- **Test thoroughly** - All devices
- **Regular review** - Keep current

---

## Related Documentation

- [Visual Editor](/themes/visual-editor) - Editor overview
- [Liquid Variables](/themes/liquid-variables) - Template variables
- [Product Media](/products/media) - Image guidelines
- [Collections](/products/collections) - Collection setup

Source: https://docs.firearmcart.com/themes/sections/index.mdx