Theme Sections
Sections are the top-level building blocks of your store's pages. Each section is a full-width container that holds content blocks. In the Shopify theme editor, you add sections to your pages and then fill them with blocks.
How sections work in Lotio
Lotio includes 90+ sections organized into these categories:
| Category | Count | Description |
|---|---|---|
| Header & Footer | 15 | Headers, mega menus, footers, floating sidebar, breadcrumb |
| Hero | 8 | Full-width banners, page heroes, blog header |
| Collections | 7 | Collection cards, category grids, featured products |
| Products | 16 | Product page layouts, product lists, bundles, compare, quick view, cart |
| Content | 17 | Feature rows, image layouts, FAQ, journal, subscribe, contact |
| Editorial | 14 | Brand story, manifesto, quotes, founder letter, scent notes |
| Media & Interactive | 11 | Lookbooks, hotspots, before/after, video, spec highlights |
| Testimonials | 4 | Customer reviews, press quotes, press logos |
| Popups | 4 | Promotions, age verification, countdown, sign up |
| Section Presets | 3 | Pre-built layouts using the generic Section |
In addition, Lotio includes 11 main page sections that power the core pages (product detail, collection, blog, article, cart, search, 404, password) and several utility sections. See Page Templates.
Section groups
Lotio organizes certain sections into groups that appear on every page:
- Header group: Announcement bar, Header (three styles), Mega menus, Predictive search
- Footer group: Footer (three styles)
- Overlay group: Cart mini, Quick view, Product compare modal
- Popup group: Popup promo, Popup age verification, Popup countdown, Popup sign up
- Features group: Floating sidebar
Adding sections to a page
- In the Shopify admin, go to Online Store > Customize.
- Select the page template you want to edit.
- Click Add section in the left sidebar.
- Browse or search for a section.
- Click the section to add it to your page.
- Drag sections to reorder them.
The generic "Section" component
Lotio includes a special Section component that acts as a blank canvas. It accepts any theme block, allowing you to build completely custom layouts from scratch. This section also comes with pre-built presets — ready-made layouts you can add instantly and customize.
Universal section settings
All sections share a set of common settings for width, background, color scheme, and padding.