Sections

Sections are the modular, high-performance structural units of a Soppiya theme. They represent the primary interface between a developer’s code and a merchant’s design requirements. By utilizing sections, developers create a flexible environment where store owners can build complex page layouts by stacking, reordering, and configuring individual UI components without writing a single line of code.

---

Folder Location

All section-related files are housed in the /sections directory. This folder contains two file types: .liquid files for individual UI modules and .json files for structural group containers.

└── theme
    └── sections
        ├── header.liquid            # Theme Header module
        ├── hero-banner.liquid       # Visual hero module
        ├── main-product.liquid      # Core product logic
        ├── header-group.json        # Header Section Group
        └── footer-group.json        # Footer Section Group

---

Section Categories

Soppiya distinguishes between three rendering methods to balance design flexibility with structural integrity.

Dynamic Sections (Template-based)

Used within JSON Templates (e.g., index.json). These sections appear in the "Add Section" menu of the Soppiya Visual Editor. Merchants can drag-and-drop, duplicate, or delete these sections to build unique page flows.

Static Sections (Hardcoded)

Used for elements that must occupy a fixed position in the layout, such as a dedicated newsletter signup at the bottom of every page.

• Implementation Tag: {% section 'filename' %}
• Constraint: Merchants can edit the internal settings but cannot move or remove the section from the layout.

Section Groups (Container-based)

Section Groups are structural .json files used to manage areas traditionally hardcoded in the layout, such as the Header and Footer. They allow merchants to stack multiple Liquid sections (e.g., an Announcement Bar, a Logo Bar, and a Navigation Bar) into one designated region.

• Implementation Tag: {% sections 'header-group' %}

---

Data Architecture & Access

Soppiya sections utilize a hybrid data model, allowing them to pull information from both internal merchant settings and the global store database.

Internal Data (section.settings)

Settings defined within the section’s {% schema %} tag are accessed via the section.settings object. This is used for component-specific content like titles, descriptions, and images.

<h2 class="section__title">{{ section.settings.section_title }}</h2>

Global Accessors (Underscore Prefix)

A unique power feature of Soppiya is the ability to pull data from any resource globally using the underscore prefix. This allows a section to bypass the current page context to display data from other areas of the store.

Accessor	Usage	Purpose
_collection	_collection['handle']	Pull data from a specific category (e.g., "Best Sellers").
_product	_product['handle']	Fetch details of a specific item for a "Product Highlight" section.
_linklist	_linklist['handle']	Retrieve navigation menus for headers or footers.
_blog	_blog['handle']	Pull recent posts from a specific blog category.

---

Technical Implementation: Collection List

The following example demonstrates a "Collection Grid" section. It allows a merchant to select specific collections in the editor, and the code uses the Global Accessor to fetch and render the thumbnail and URL for each.

<link rel="stylesheet" href="{{ 'collection-list.css' | asset_url }}">

<section class="collection__list_section">
  <div class="container">
    {% if section.settings.section_title != blank %}
      <div class="collection__label">
        <h1>{{ section.settings.section_title | escape }}</h1>
      </div>
    {% endif %}

    <div class="collection__groups">
      {% assign selected_handles = section.settings.collections %}
      
      {% for handle in selected_handles %}
        {% assign collection = _collection[handle] %}
        <div class="collection__card">
           <div class="collection__content">
             <h2 class="collection__title">{{ collection.title }}</h2>
             <a href="{{ collection.url }}" class="btn__button">Shop Now</a>
           </div>
           <div class="collection__img">
             <img src="{{ collection.thumbnail }}" alt="{{ collection.title }}" loading="lazy">
           </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Collection List",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Heading",
      "default": "Our Collections"
    },
    {
      "type": "collection_list",
      "id": "collections",
      "label": "Select Collections",
      "limit": 6
    }
  ]
}
{% endschema %}

---

Developer Best Practices

important

Isolated Styling: To maintain optimal page speed, link section-specific CSS files at the top of the Liquid file. This ensures the browser only downloads the styles necessary for the sections currently on the page.

note

Empty States: Always wrap optional settings in an if statement (e.g., {% if section.settings.title != blank %}). This prevents empty HTML tags from breaking your layout if a merchant chooses to leave a field empty.

tip

Image Optimization: Use the thumbnail attribute for grid views and the image.url for large hero banners. Soppiya automatically handles the CDN delivery and compression of these assets.

warning

Schema Uniqueness: Setting IDs must be unique within a section. If you have two settings with the ID title, the Soppiya editor will fail to distinguish between them, leading to data loss.

---

To learn how to add even more granular content units inside these sections, proceed to the Blocks Documentation.