Section Shopify: A Complete Guide to Shopify Theme Sections

Key Takeaways

• Shopify sections are modular, reusable content components that control layout and design across your theme—think hero banners, product grids, testimonials, and newsletter signups that you can mix and match without touching code.

• Online Store 2.0 (released mid-2021) unlocked “sections everywhere” via JSON templates, replacing the old limitation where dynamic sections worked only on the homepage.

• Merchants can now build complete layouts for home, product, collection, and landing pages using sections and blocks directly from the theme editor.

• Developers still have full control to create advanced custom sections in the code editor, while non-technical users can leverage visual page builder apps and AI tools to generate new sections.

• Blocks are the smallest editable units inside sections, allowing granular content adjustments (headings, images, buttons) without altering the underlying section code.

What Are Shopify Sections?

Shopify sections are the building blocks of modern store design. Each section represents a distinct, self-contained piece of your page—a slideshow, a featured collection grid, an announcement bar, or a testimonial carousel. These aren’t just decorative elements. They’re functional modules that combine layout, content, and settings into one reusable package.

From a technical standpoint, each section is a Liquid file stored in your theme’s /sections directory. Inside that file, you’ll find HTML markup mixed with Liquid logic, plus a schema block that defines what settings merchants can adjust. The schema controls everything from text fields and image pickers to color selectors and layout choices. When you open the shopify theme editor, these settings appear as intuitive controls in the right sidebar.

Here’s where things get practical. Themes like Dawn (Shopify’s default reference theme) ship with ready-to-use sections including:

• Image banner – Full-width hero images with overlay text and call-to-action buttons

• Slideshow section – Rotating slides for promotions or featured products

• Featured collection – A grid of products pulled from a specific collection

• Email signup – Newsletter subscription forms with customizable messaging

• Multicolumn – Flexible content blocks for features, benefits, or team bios

These sections appear in the left sidebar of your theme editor. You add sections, drag them into position, and adjust their settings—all while watching changes happen live in the preview. No code required for day-to-day customization.

Shopify Sections vs. Blocks

Understanding the relationship between sections and blocks is essential for effective store design. Think of it this way: a section is the container, and blocks are the items you place inside that container.

Sections define the overall structure and purpose of a page element. A slideshow section, for instance, sets up the framework for a rotating image gallery. But the individual slides? Those are blocks. Each slide block contains its own image, heading, button text, and link. You can add more slide blocks, remove some, or reorder them—all without touching the section’s underlying code.

This pattern repeats across different section types. A FAQ section might accept only “Question/Answer” blocks. A testimonial section might accept “Testimonial” blocks with fields for customer name, quote, and avatar. The section’s schema defines which block types are allowed and sets a limit on how many can be added.

Here’s a concrete example. Say you’re customizing a “Features” section on your homepage. The section itself controls the layout (three columns, icon style, background color). But each feature—the icon, headline, and description—lives inside a block. You might start with three feature blocks, then realize you need five. No problem. You click add block, fill in the content, and your layout automatically accommodates the new item.

This separation gives you flexibility without chaos. Merchants can fine-tune content through blocks, while the section code maintains design consistency and prevents performance issues from unlimited content sprawl.

Online Store 2.0 and Sections Everywhere

Before mid-2021, Shopify themes operated under significant constraints. Sections worked on the homepage, letting merchants drag and drop featured collections, slideshows, and promotional banners. But product pages, collection pages, and other templates? Those were locked into static Liquid files. If you wanted to add a testimonial section below your product description, you needed a developer to edit theme code.

Online Store 2.0 changed everything. Shopify introduced JSON templates—configuration files that define which sections appear on any given page and in what order. Instead of hardcoding layouts into Liquid template files, templates became flexible containers that reference section files.

This architecture unlocks what Shopify calls “sections everywhere.” Your product pages can now have dynamic sections added through the theme editor. Collection pages can include custom banners, FAQ sections, or promotional blocks. Blog article templates can feature related products or newsletter signups. Every page template becomes a canvas.

The practical benefits are immediate:

• Faster experimentation – Test different layouts without waiting for developer availability

• Page-specific customization – Create unique layouts for seasonal landing pages or high-value product templates

• Reduced dependency – Marketing teams can iterate on campaigns without touching Liquid files

• Better app integration – App blocks slot into sections natively, keeping code clean

New shopify store setups now launch with Dawn or other OS 2.0 themes by default. If you’re running an existing theme from before 2021, you may be missing these capabilities entirely.

Theme Architecture: Vintage vs. Online Store 2.0

Shopify recognizes two broad theme architectures, and knowing which one powers your store matters for what’s possible with sections.

Vintage themes (pre-OS 2.0) use a simpler structure. Each page type gets a Liquid template file—product.liquid, collection.liquid, page.liquid. Sections exist, but they’re primarily confined to the homepage or statically embedded in template files via {% section 'section-name' %} tags. You can’t add or remove sections on product pages from the theme editor. App blocks don’t exist in this architecture, so third-party apps often inject code directly into your theme files.

Online Store 2.0 themes work differently. The templates folder contains JSON files instead of (or alongside) Liquid files. A file like product.json specifies an ordered list of sections and their configurations. The actual section logic lives in /sections, cleanly separated from template structure. This separation is what enables the theme editor to offer add sections functionality on any template.

The folder structure tells the story:

• Vintage: templates/product.liquid (contains embedded section calls or direct HTML)

• OS 2.0: templates/product.json (lists section references) + sections/main-product.liquid (contains the logic)

The Shopify Theme Store has prioritized OS 2.0 themes since around 2022. Most actively maintained themes in 2026 support sections everywhere, app blocks, and dynamic sources like metafields and metaobjects. If your theme lacks a templates/*.json structure, you’re likely on a vintage architecture and missing significant customization options.

Using Sections and Blocks in the Shopify Theme Editor

The theme editor is where section management happens. You’ll find it under Online Store → Themes → Customize in your Shopify admin. This opens a live preview of your store alongside editing controls.

By default, the editor loads your homepage template. A dropdown at the top (or a search field in newer editor versions) lets you switch between templates—products, collections, pages, blogs, cart, and more. Each template maintains its own section configuration, so changes you make to “Default product” don’t affect your homepage.

The editor uses a three-column layout. The left sidebar shows your current template’s section stack. You’ll see section names like “Announcement bar,” “Header,” “Featured collection,” and “Footer” listed in order from top to bottom. The center displays a live preview that updates as you make changes. The right pane shows settings for whatever section or block you’ve selected.

The workflow is straightforward: click a section name in the left sidebar to select it. The right pane immediately displays that section’s customization options—text fields for headlines, image pickers for backgrounds, dropdowns for layout variations, color pickers for styling. Every change you make appears instantly in the preview.

One critical detail: edits are template-specific. If you modify the “Featured collection” section on your homepage template, that change affects only your homepage. If you want the same section on your collection pages, you’ll need to add it there separately. However, if you create an alternate product template (say, “Product - Limited Edition”) and customize its sections, every product assigned to that template inherits those settings.

Adding, Editing, and Rearranging Sections

Managing your layout through sections feels intuitive once you understand the pattern. The theme editor gives you complete control over what sections appear, where they sit, and how they’re configured.

To add a new section to any template, navigate to that template in the theme editor. Scroll to the bottom of the left sidebar (below your existing sections but above the footer) and click the “Add section” button. A panel appears showing available blocks and section types—your theme’s built-in options like “Collage,” “Rich text,” “Video,” and “Custom Liquid,” plus any sections added by installed apps. Select one, and it drops into your template ready for customization.

Editing a section is equally direct. Click its name in the sidebar to reveal its settings in the right pane. Depending on the section type, you might adjust heading text, swap out images, change background colors, modify padding and margins, toggle visibility on mobile versus desktop, or configure how many items display per row. Each theme offers different customization options for its sections, so the available controls vary.

Rearranging sections takes seconds. Hover over a section name until you see the drag handle (usually six dots stacked vertically). Click and drag the section to a new position. The preview auto-scrolls as you move, helping you place sections precisely where you want them. Release to drop the section in its new location.

You can also duplicate sections (useful for creating variations), hide sections temporarily (without deleting their configuration), or remove sections entirely. Hidden sections remain in your template JSON but don’t render on the live store—handy for seasonal content you’ll want to bring back later.

Working with Blocks Inside Sections

Blocks represent the most granular level of content editing in Shopify themes. Where sections define the structure, blocks let you customize the individual pieces.

Consider a slideshow section. The section establishes the slideshow functionality—transition timing, navigation arrows, autoplay settings. But each slide is a block. When you want to add a new slide, you click add block within that section and select the “Slide” block type. Each slide block then offers its own settings: image upload, overlay text, button label, link destination.

Different sections support different block types. A “Collapsible content” section might accept “Row” blocks for accordion items. A “Multirow” section might accept “Row” blocks containing images and text. Some sections accept multiple block types—a flexible content section might let you add heading blocks, text blocks, button blocks, and image blocks in any combination.

There are limits by design. Section schemas define maximum block counts to prevent performance issues and maintain visual consistency. A testimonial section might cap at 10 testimonials. A logo list might allow 20 logos. If you hit the limit, the “Add block” option disappears for that block type.

Reordering blocks works like reordering sections—drag handles let you shuffle items within their parent section. Removing blocks clears that content from the section. Some blocks can be hidden rather than deleted, preserving configuration for later use.

Here’s a practical scenario: you’re building a FAQ section for your shipping page. The section provides the accordion structure and styling. You add block after block, each representing a question-answer pair. Block one covers shipping times. Block two addresses international orders. Block three explains return policies. The section handles the expand/collapse behavior while blocks hold the actual content.

App Blocks and Third-Party Section Apps

App blocks represent one of Online Store 2.0’s most significant improvements for app integration. Instead of apps injecting code directly into your theme liquid files, they now offer modular blocks that slot into your sections through the theme editor.

When you install a compatible app—a reviews app, a wishlist feature, a currency converter—it can register app blocks with your OS 2.0 theme. These appear in the block picker when you’re customizing relevant sections. On a product page template, you might see app blocks for star ratings, trust badges, size guides, or subscription options alongside native blocks.

This approach keeps your theme code clean. Installing and uninstalling apps doesn’t leave residual code scattered through your liquid files. You control exactly where app content appears by positioning blocks within sections. If you want reviews below the product description but above related products, you drag the review app block to that location.

Beyond individual app blocks, specialized section apps have emerged as a category. These apps provide libraries of pre-built sections—sometimes 100+ options—that you can add to any template. Mega menus, comparison tables, before-after image sliders, bundled product offers, countdown timers. They install as sections that appear in your “Add section” menu.

The trade-offs are real. App blocks and section libraries accelerate design work dramatically. Merchants without coding skills can build sophisticated layouts. But each app adds potential performance overhead—additional JavaScript, CSS, and API calls. Monthly subscription costs accumulate. And you’re dependent on the app developer for updates, compatibility, and support.

Common app block use cases include:

• Product reviews – Star ratings and review content injected into product pages

• Trust badges – Security and payment icons displayed near add-to-cart buttons

• Upsell widgets – Related products or frequently bought together suggestions

• Loyalty program status – Points balance and rewards displayed in account areas

• Size guides – Popup or inline sizing information on apparel products

Creating Custom Shopify Sections in the Code Editor

This section is for merchants or developers comfortable working with HTML, CSS, JavaScript, and Liquid. If that’s not you, skip ahead to the no-code options in the following section.

Custom section development happens in the code editor, accessible under Online Store → Themes → Edit code. Section files live in the /sections folder. To create a new section, click “Add a new section,” enter a filename like custom-banner.liquid, and you’re ready to build.

A typical section file contains three main parts. First, the HTML and Liquid markup that renders your section’s visual structure. Second, optional stylesheet and JavaScript includes (either inline via {% stylesheet %} or linked from assets). Third, the {% schema %} block—a JSON structure that defines settings, blocks, and presets.

The schema is where the magic happens. Settings define what controls appear in the theme editor. Blocks define repeatable child elements with their own settings. And presets—this is critical—determine whether and how the section appears in the “Add section” menu.

Here’s a simplified example of a minimal section file:

<section class="custom-banner">
  <div class="banner-content">
    <h2>{{ section.settings.heading }}</h2>
    <p>{{ section.settings.subheading }}</p>
  </div>
</section>

{% schema %}
{
  "name": "Custom Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    },
    {
      "type": "textarea",
      "id": "subheading",
      "label": "Subheading"
    }
  ],
  "presets": [
    {
      "name": "Custom Banner"
    }
  ]
}
{% endschema %}

Without a preset, your section won’t appear in the theme editor’s section picker. The preset makes it available for merchants to add on supported templates. You can control where sections appear using enabled_on and disabled_on attributes to limit sections to specific template types or section groups.

Adding Custom Sections Without Coding

Not everyone wants to write Liquid code, and in 2026, you don’t have to. Visual page builder apps and AI-assisted section generators let non-technical users create custom sections directly within Shopify’s ecosystem.

The typical workflow starts with installing a section builder or page builder app from the Shopify App Store. Once installed, you either browse a template library or describe what you want—“a three-column feature grid highlighting our Summer 2026 collection with icons and hover effects.” The app generates a section matching your specifications, often with drag-and-drop refinement tools.

After you’ve designed and saved your section, the app publishes it to your theme. It then appears in the theme editor like any native section. You can add sections to templates, configure settings, populate blocks, and rearrange positioning—all through the familiar editor interface.

The benefits for speed and accessibility are obvious. Marketing teams can prototype landing pages without developer tickets. Founders can test layout ideas during a product launch weekend. Seasonal campaigns get built and published in hours rather than days.

Some considerations before relying heavily on these tools: generated sections add code to your theme, sometimes less optimized than hand-written Liquid. Free tiers often include limited functionality or branding. And migrating sections between themes or apps can be complicated. That said, for teams prioritizing speed and iteration over perfect code efficiency, these tools unlock significant creative freedom.

Best Practices for Designing With Shopify Sections

Well-planned section usage improves user experience, page speed, and conversion rates across your storefront. Random section accumulation leads to bloated pages and confused visitors.

Limit heavy sections per page. Large slideshow sections with high-resolution images, video backgrounds, and complex animations slow down page loads—especially on mobile connections. A single hero video can add seconds to load time. Audit each template and question whether that third slideshow is adding value or just weight. Use tools to improve page speed by lazy-loading images and deferring non-critical scripts.

Reuse strategically designed sections. If you create a trust badges section that displays security icons, shipping guarantees, and return policies, use that exact section across product pages, cart, and checkout. Consistency builds customer confidence. And when you need to update your return policy text, you change it once in the section rather than hunting through multiple templates.

Leverage dynamic content through metafields. OS 2.0 themes support connecting section settings to metafields and metaobjects. A “Product Highlights” section can automatically pull key features stored in product metafields rather than requiring manual entry. A regional promotion section can display different offers based on customer market. This transforms static sections into intelligent, context-aware modules.

Establish section standards before building. Decide upfront which sections will appear globally (announcement bar, newsletter signup) versus page-specifically. Document your section patterns so team members maintain consistency. A free shipping bar on product pages should match the one on your cart page.

Test across devices. Sections that look stunning on desktop can break on mobile. Use the device preview toggle in the theme editor to check layouts at different viewport sizes. Many sections offer mobile-specific settings—use them.

FAQ About Shopify Sections

How do I know if my theme supports sections everywhere?

Check for JSON template files in your theme’s code. Navigate to Online Store → Themes → Edit code, then look in the templates folder. If you see files like product.json, collection.json, and page.json (rather than only .liquid files), your theme supports OS 2.0 and sections everywhere. Another indicator: when you’re in the theme editor on a product or collection page, you’ll see the “Add section” option in the sidebar if your theme is compatible.

Can I switch from a vintage theme to an Online Store 2.0 theme without losing my existing content?

Your product data, collections, pages, and blog posts live in Shopify’s database—not in your theme—so that content survives any theme change. However, your theme-specific customizations (section configurations, block content, homepage layouts) are stored in the theme and won’t transfer automatically. Plan for manual recreation of your layouts. Some merchants duplicate their store to a development environment first, install the new theme, and rebuild layouts before switching live. Your support team can help with complex migrations.

What happens to my custom sections if I change themes?

Custom sections you’ve created in the code editor are theme-specific. They live in that theme’s /sections folder. If you switch to other themes, those sections don’t come along. You’ll need to copy the section files from your old theme’s code editor and paste them into the new theme’s sections folder, then adjust for any differences in schema structure or CSS dependencies. App-provided sections typically remain available as long as the app is installed and compatible with your new theme.

Will adding many sections hurt my page speed?

It can. Each section adds HTML, CSS, and potentially JavaScript to your page. Sections with large images, videos, embedded maps, or third-party widgets compound the load. A homepage with 15 sections will generally load slower than one with 8 focused sections. Monitor performance using tools like Google PageSpeed Insights and be ruthless about removing sections that don’t contribute to conversions.

Should I use apps or custom code for new sections?

It depends on your situation. Section apps offer speed, especially for non-technical users who need to create landing pages or test layouts quickly. Custom code offers full control, better performance (typically), and no ongoing subscription costs. For one-off experiments or time-sensitive campaigns, apps make sense. For sections you’ll use repeatedly across your store long-term—especially revenue-critical elements like product page layouts—investing in custom development often pays off.