Sections

Sections are reusable page components that define major areas of a page like header, footer, hero, and content areas. They provide structure and organization to your theme.

Section Overview

Sections are stored in the sections/ directory and can be included in templates using the section tag or rendered dynamically.

Section Structure

Sections are typically larger components than snippets:

sections/
  header.liquid          # Site header
  footer.liquid          # Site footer
  hero.liquid            # Hero banner section
  content.liquid         # Main content area
  sidebar.liquid         # Sidebar section

Creating Sections

Basic Section

{% comment %}
  Section: hero
  Hero banner section with customizable content
{% endcomment %}

<section class="hero-section" style="background-image: url('{{ section.settings.background_image | img_url: 'large' }}');">
  <div class="hero-content">
    <h1 class="hero-title">{{ section.settings.title }}</h1>
    <p class="hero-description">{{ section.settings.description }}</p>
    
    {% if section.settings.button_text %}
      <a href="{{ section.settings.button_url }}" class="btn btn-primary">
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
</section>

Using Sections

Include sections in templates:

{% section 'header' %}

<main>
  {% section 'hero' %}
  {% section 'content' %}
</main>

{% section 'footer' %}

Section Settings

Sections can have configurable settings defined in config/settings_schema.json:

{
  "sections": [
    {
      "name": "Hero",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Hero Title",
          "default": "Welcome to Our Store"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Hero Description",
          "default": "Discover amazing products"
        },
        {
          "type": "image_picker",
          "id": "background_image",
          "label": "Background Image"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_url",
          "label": "Button URL",
          "default": "/collections/all"
        }
      ]
    }
  ]
}

Access settings in sections:

{{ section.settings.title }}
{{ section.settings.description }}

Common Sections

Header Section

{% comment %}
  Section: header
{% endcomment %}

<header class="site-header">
  <div class="header-container">
    <div class="header-logo">
      <a href="/">
        <img src="{{ settings.logo | img_url: 'medium' }}" alt="{{ shop.name }}">
      </a>
    </div>
    
    <nav class="header-nav">
      {% for link in linklists.main-menu.links %}
        <a href="{{ link.url }}" class="nav-link">{{ link.title }}</a>
      {% endfor %}
    </nav>
    
    <div class="header-actions">
      <a href="/search" class="search-icon">🔍</a>
      <a href="/cart" class="cart-icon">
        Cart (<span class="cart-count">{{ cart.item_count }}</span>)
      </a>
    </div>
  </div>
</header>

{% comment %}
  Section: footer
{% endcomment %}

<footer class="site-footer">
  <div class="footer-container">
    <div class="footer-column">
      <h3>About</h3>
      <p>{{ shop.description }}</p>
    </div>
    
    <div class="footer-column">
      <h3>Quick Links</h3>
      <ul>
        {% for link in linklists.footer.links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
    </div>
    
    <div class="footer-column">
      <h3>Contact</h3>
      <p>{{ shop.email }}</p>
      <p>{{ shop.phone }}</p>
    </div>
    
    <div class="footer-column">
      <h3>Follow Us</h3>
      {% render 'social-links' %}
    </div>
  </div>
  
  <div class="footer-bottom">
    <p>&copy; {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
  </div>
</footer>

Hero Section

{% comment %}
  Section: hero
{% endcomment %}

<section class="hero-section" 
         style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('{{ section.settings.background_image | img_url: 'large' }}');">
  <div class="hero-content">
    <h1 class="hero-title">{{ section.settings.title | default: shop.name }}</h1>
    <p class="hero-subtitle">{{ section.settings.subtitle }}</p>
    
    {% if section.settings.button_text %}
      <a href="{{ section.settings.button_url }}" class="btn btn-hero">
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
</section>

Content Section

{% comment %}
  Section: content
  Main content area with widgets
{% endcomment %}

<section class="content-section">
  <div class="content-container">
    {% if widgets.content.size > 0 %}
      {% for widget in widgets.content %}
        {% render 'widget', widget: widget %}
      {% endfor %}
    {% else %}
      <div class="content-fallback">
        {{ content }}
      </div>
    {% endif %}
  </div>
</section>

Section Fallbacks

Provide fallback sections for when sections are missing:

{% comment %}
  Section: header-fallback
  Fallback header when main header is not available
{% endcomment %}

<header class="site-header fallback">
  <div class="header-container">
    <a href="/" class="logo">{{ shop.name }}</a>
    <nav>
      <a href="/collections/all">Shop</a>
      <a href="/cart">Cart</a>
    </nav>
  </div>
</header>

Use fallbacks in templates:

{% if sections.header %}
  {% section 'header' %}
{% else %}
  {% section 'header-fallback' %}
{% endif %}

Dynamic Sections

Sections can be rendered conditionally:

{% if page.handle == 'home' %}
  {% section 'hero' %}
{% endif %}

{% if collection %}
  {% section 'collection-header' %}
{% endif %}

Section Blocks

Some sections support blocks for flexible content:

{% comment %}
  Section: content-blocks
{% endcomment %}

<section class="content-blocks">
  {% for block in section.blocks %}
    <div class="content-block block-{{ block.type }}">
      {% case block.type %}
        {% when 'text' %}
          <div class="text-block">
            {{ block.settings.text }}
          </div>
        {% when 'image' %}
          <div class="image-block">
            <img src="{{ block.settings.image | img_url: 'large' }}" alt="{{ block.settings.alt }}">
          </div>
        {% when 'product' %}
          <div class="product-block">
            {% render 'product-card', product: block.settings.product %}
          </div>
      {% endcase %}
    </div>
  {% endfor %}
</section>

Section Best Practices

1. Keep Sections Modular

Each section should be self-contained:

{% comment %} Good: Self-contained section {% endcomment %}
{% section 'header' %}

2. Use Semantic HTML

Use appropriate HTML5 semantic elements:

<header class="site-header">
<nav class="main-navigation">
<footer class="site-footer">

3. Provide Settings

Make sections configurable through settings:

{{ section.settings.title }}
{{ section.settings.color }}

4. Include Fallbacks

Always provide fallback content:

{% if section.settings.title %}
  <h1>{{ section.settings.title }}</h1>
{% else %}
  <h1>{{ shop.name }}</h1>
{% endif %}

5. Optimize Performance

Minimize nested loops
Use appropriate image sizes
Cache where possible

6. Responsive Design

Ensure sections work on all screen sizes:

<section class="hero-section">
  <div class="hero-content">
    <!-- Mobile-first responsive content -->
  </div>
</section>

Section Organization

Organize sections logically:

sections/
  layout/
    header.liquid
    footer.liquid
  content/
    hero.liquid
    content.liquid
    sidebar.liquid
  product/
    product-header.liquid
    product-gallery.liquid
  collection/
    collection-header.liquid
    collection-filters.liquid

Section Composition

Sections are composed of multiple elements working together:

graph TB
    Section[Section] --> Settings[Settings<br/>Configuration]
    Section --> Content[Content<br/>HTML/Liquid]
    Section --> Widgets[Widgets<br/>Dynamic Content]
    Section --> Snippets[Snippets<br/>Reusable Components]
    Section --> Styles[Styles<br/>CSS]
    Section --> Scripts[Scripts<br/>JavaScript]

Section Ordering Examples

Home Page Section Order

{% layout 'theme' %}

{% section 'header' %}

<main>
  {% section 'hero' %}          <!-- Position 1: Hero banner -->
  {% section 'featured-products' %} <!-- Position 2: Featured products -->
  {% section 'categories' %}     <!-- Position 3: Categories -->
  {% section 'testimonials' %}   <!-- Position 4: Testimonials -->
  {% section 'newsletter' %}     <!-- Position 5: Newsletter signup -->
</main>

{% section 'footer' %}

Product Page Section Order

{% layout 'theme' %}

{% section 'header' %}

<main class="product-page">
  {% section 'product-breadcrumbs' %}
  {% section 'product-gallery' %}
  {% section 'product-details' %}
  {% section 'product-tabs' %}
  {% section 'product-reviews' %}
  {% section 'related-products' %}
</main>

{% section 'footer' %}

Conditional Section Rendering

{% layout 'theme' %}

{% section 'header' %}

<main>
  {% section 'hero' %}
  
  {% if collection %}
    {% section 'collection-header' %}
    {% section 'collection-filters' %}
    {% section 'collection-products' %}
  {% elsif product %}
    {% section 'product-gallery' %}
    {% section 'product-details' %}
  {% else %}
    {% section 'content' %}
  {% endif %}
</main>

{% section 'footer' %}

Section Customization Guide

Dynamic Section Settings

{% comment %}
  Section: hero
  Customizable hero section
{% endcomment %}

<section class="hero-section" 
         style="background-color: {{ section.settings.bg_color | default: '#000000' }};">
  <div class="hero-content" 
       style="text-align: {{ section.settings.text_align | default: 'center' }};">
    <h1 class="hero-title" 
        style="color: {{ section.settings.title_color | default: '#ffffff' }};">
      {{ section.settings.title | default: 'Welcome' }}
    </h1>
    
    {% if section.settings.show_button %}
      {% render 'button', 
                 text: section.settings.button_text,
                 url: section.settings.button_url,
                 style: section.settings.button_style %}
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Hero Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Welcome"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "show_button",
      "label": "Show Button",
      "default": true
    }
  ]
}
{% endschema %}

{% comment %}
  Section: content
  Content section that supports widgets
{% endcomment %}

<section class="content-section">
  {% if section.settings.title %}
    <h2 class="section-title">{{ section.settings.title }}</h2>
  {% endif %}
  
  {% if widgets.content.size > 0 %}
    <div class="widgets-container">
      {% for widget in widgets.content %}
        <div class="widget-wrapper" data-widget-id="{{ widget.id }}">
          {{ widget | render_widget }}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="section-content">
      {{ section.settings.content }}
    </div>
  {% endif %}
</section>

Section Performance Tips

1. Lazy Load Section Content

<section class="lazy-section" data-section="featured-products">
  <div class="section-placeholder">
    <p>Loading...</p>
  </div>
</section>

<script>
  // Load section content when in viewport
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadSection(entry.target);
        observer.unobserve(entry.target);
      }
    });
  });
  
  document.querySelectorAll('.lazy-section').forEach(section => {
    observer.observe(section);
  });
</script>

2. Cache Section Settings

{% assign section_bg = section.settings.background_color | default: '#ffffff' %}
{% assign section_title = section.settings.title | default: '' %}
{% assign show_widgets = widgets.content.size > 0 %}

3. Minimize Section Dependencies

❌ Too many dependencies:

{% section 'header' %}
{% section 'navigation' %}
{% section 'search-bar' %}
{% section 'cart-icon' %}
{% section 'user-menu' %}

✅ Combine related sections:

{% section 'header' %}  <!-- Includes navigation, search, cart, user menu -->

4. Optimize Section Images

<section class="hero-section">
  <picture>
    <source media="(min-width: 1200px)" 
            srcset="{{ section.settings.image | img_url: '1920x' }}">
    <source media="(min-width: 768px)" 
            srcset="{{ section.settings.image | img_url: '1200x' }}">
    <img src="{{ section.settings.image | img_url: '768x' }}" 
         alt="{{ section.settings.title }}"
         loading="lazy">
  </picture>
</section>

Section Troubleshooting Guide

Section Not Rendering

Problem: Section doesn't appear on page

Solutions:

Check section file exists: sections/hero.liquid
Verify section tag syntax:

{% section 'hero' %}  ✅ Correct
{% section hero %}    ❌ Wrong (missing quotes)

Check for syntax errors in section file
Verify section is included in template

Section Settings Not Working

Problem: Section settings don't apply

Solutions:

Check settings schema matches:

{
  "settings": [
    {
      "id": "title",  // Must match section.settings.title
      "type": "text"
    }
  ]
}

Use default values:

{{ section.settings.title | default: 'Default Title' }}

Verify settings are saved in theme configuration

Section Styling Issues

Problem: Section styles conflict or don't apply

Solutions:

Use section-specific classes:

<section class="section-hero" data-section-id="{{ section.id }}">
  <!-- Section content -->
</section>

Scope CSS:

.section-hero {
  /* Scoped styles */
}

Use CSS variables for customization:

<section style="--section-color: {{ section.settings.color }}">

Problem: Widgets don't appear in section

Solutions:

Check widget section name matches:

{% for widget in widgets.content %}  <!-- Section name: content -->
  {{ widget | render_widget }}
{% endfor %}

Verify widgets exist:

{% if widgets.content.size > 0 %}
  {% for widget in widgets.content %}
    {{ widget | render_widget }}
  {% endfor %}
{% else %}
  <p>No widgets in this section</p>
{% endif %}

Section vs Snippet

Use Sections for:

Major page areas (header, footer)
Large, complex components
Components with settings
Layout-defining elements
Widget containers

Use Snippets for:

Small, reusable components
Frequently used elements
Simple UI components
Content blocks
Helper components

Next Steps

Snippets - Create reusable components
Assets - Manage theme assets
Widgets - Use widgets in sections
Best Practices - Section best practices

Section Overview​

Section Structure​

Creating Sections​

Basic Section​

Using Sections​

Section Settings​

Common Sections​

Header Section​

Footer Section​

Hero Section​

Content Section​

Section Fallbacks​

Dynamic Sections​

Section Blocks​

Section Best Practices​

1. Keep Sections Modular​

2. Use Semantic HTML​

3. Provide Settings​

4. Include Fallbacks​

5. Optimize Performance​

6. Responsive Design​

Section Organization​

Section Composition​

Section Ordering Examples​

Home Page Section Order​

Product Page Section Order​

Conditional Section Rendering​

Section Customization Guide​

Dynamic Section Settings​

Section with Widget Support​

Section Performance Tips​

1. Lazy Load Section Content​

2. Cache Section Settings​

3. Minimize Section Dependencies​

4. Optimize Section Images​

Section Troubleshooting Guide​

Section Not Rendering​

Section Settings Not Working​

Section Styling Issues​

Widget Not Showing in Section​

Section vs Snippet​

Next Steps​

Section Overview

Section Structure

Creating Sections

Basic Section

Using Sections

Section Settings

Common Sections

Header Section

Footer Section

Hero Section

Content Section

Section Fallbacks

Dynamic Sections

Section Blocks

Section Best Practices

1. Keep Sections Modular

2. Use Semantic HTML

3. Provide Settings

4. Include Fallbacks

5. Optimize Performance

6. Responsive Design

Section Organization

Section Composition

Section Ordering Examples

Home Page Section Order

Product Page Section Order

Conditional Section Rendering

Section Customization Guide

Dynamic Section Settings

Section with Widget Support

Section Performance Tips

1. Lazy Load Section Content

2. Cache Section Settings

3. Minimize Section Dependencies

4. Optimize Section Images

Section Troubleshooting Guide

Section Not Rendering

Section Settings Not Working

Section Styling Issues

Widget Not Showing in Section

Section vs Snippet

Next Steps