Documentation | Get Sections

What is a Section?

Each purchased section is a self-contained Shopify 2.0 module. It includes a .liquid section file, a dedicated CSS asset, and optionally a JavaScript file. Sections are designed to be added to any page via the Shopify Theme Editor without conflicts or code collisions.

💡

Scoped by Design

Every section wraps its content in id="section-{{ section.id }}", so styles and scripts never leak into other sections on the same page.

ZIP Package Contents

When you unzip your purchased section package, you will find:

📦 section-package.zip

├── sections/

│ └── section-name.liquid Section

├── assets/

│ ├── section-name.css CSS

│ └── section-name.js JS (if needed)

└── snippets/ (if needed)

└── snippet-name.liquid Snippet

Section File Anatomy

Every .liquid section file follows a strict structure to ensure compatibility, readability, and Theme Editor support.

Liquid sections/section-name.liquid

{# 1. CSS Asset Reference #}
{{ 'section-name.css' | asset_url | stylesheet_tag }}

{# 2. HTML / Liquid Markup #}
<div id="section-{{ section.id }}" class="section-name">

  {% assign heading = section.settings.heading %}
  {% assign subtext = section.settings.subtext %}

  <h2 class="section-name__heading">
    {{ heading }}
  </h2>
  <p class="section-name__subtext">
    {{ subtext }}
  </p>

</div>

{# 3. JS Reference (only if needed) #}
{{ 'section-name.js' | asset_url | script_tag }}

{# 4. Schema Block #}
{% schema %}
{
  "name": "Section Name",
  "tag": "section",
  "class": "section-name",
  "settings": [ ... ],
  "presets": [{ "name": "Section Name" }]
}
{% endschema %}

{# 5. Dynamic Style Block #}
{% style %}
  #section-{{ section.id }} {
    padding-top: {{ section.settings.padding_top }}px;
  }
{% endstyle %}

✅

Always assign before use

Use {% assign %} to store setting values in variables before outputting them in HTML. This keeps markup clean and readable.

Schema Settings Reference

All configurable elements are exposed in the schema so merchants can edit them via the Theme Editor without touching code.

Setting ID	Type	Description	Example Default
heading	`text`	Main heading text displayed in section	`"Welcome"`
subtext	`textarea`	Supporting description paragraph	`"Discover our collection"`
image	`image_picker`	Section background or feature image	—
bg_color	`color`	Section background color	`#ffffff`
text_color	`color`	Text color override	`#1a1a1a`
padding_top	`range`	Top padding in pixels (0–120)	`60`
padding_bottom	`range`	Bottom padding in pixels (0–120)	`60`
text_align	`select`	Alignment: left / center / right	`"center"`
button_label	`text`	CTA button label text	`"Shop Now"`
button_link	`url`	CTA button destination URL	—

Blocks

Sections that display repeating items (cards, testimonials, icons) use schema blocks. Blocks allow merchants to add, remove, and reorder items in the Theme Editor.

JSON Schema — blocks example

"blocks": [
  {
    "type": "card",
    "name": "Card",
    "settings": [
      {
        "type": "image_picker",
        "id": "card_image",
        "label": "Card Image"
      },
      {
        "type": "text",
        "id": "card_title",
        "label": "Title",
        "default": "Feature Title"
      }
    ]
  }
],
"max_blocks": 6

Liquid Looping blocks in markup

{% for block in section.blocks %}
  {% assign card_title = block.settings.card_title %}
  <div class="section-name__card"
       {{ block.shopify_attributes }}>
    <h3>{{ card_title }}</h3>
  </div>
{% endfor %}

CSS File Guide

Every section ships with a dedicated CSS file placed in /assets/. Static layout styles live here. Dynamic styles (colors, spacing from schema) go in the {% style %} block inside the liquid file.

⚠️

Unique File Names Required

Each section's CSS file uses the section's name as its filename to avoid overwriting other asset files. Never rename these files.

CSS assets/section-name.css

/* Static layout & structural styles */

.section-name {
  width: 100%;
  overflow: hidden;
}

.section-name__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-name__heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 768px) {
  .section-name__heading {
    font-size: 1.5rem;
  }
}

JavaScript Guide

JS files are only included when a section requires interactivity (sliders, accordions, tabs). Each JS file is scoped to its section using the unique section ID to prevent conflicts.

JS assets/section-name.js

// Scoped to section ID — safe for multiple instances
document.querySelectorAll('[id^="section-"]').forEach(section => {
  if (!section.classList.contains('section-name')) return;

  const trigger = section.querySelector('.section-name__trigger');

  trigger?.addEventListener('click', () => {
    section.classList.toggle('is-active');
  });
});

Snippets

Some sections use Liquid snippets for reusable sub-components (e.g. a card, a rating widget). Snippets are section-agnostic and must be rendered with explicit variable passing.

Liquid Rendering a snippet

{% render 'card-item',
  title: block.settings.card_title,
  image: block.settings.card_image,
  link:  block.settings.card_link
%}

✅

Always pass variables explicitly

Never rely on global variables inside snippets. Pass every value when rendering to keep snippets reusable across any section.

Adding in Theme Editor

After installing the section files, add the section to any page:

1

Open Theme Editor
Go to Shopify Admin → Online Store → Themes → Customize
2

Navigate to the Target Page
Use the page dropdown at the top to switch to the page where you want to add the section.
3

Add Section
Click Add section in the left panel. Search by the section name and click to add it.
4

Configure Settings
Use the section settings panel to adjust text, colors, images, and spacing without touching any code.
5

Save & Publish
Click Save in the top right. Changes are live immediately.

FAQ

Can I add the same section multiple times on one page?

Yes. Every section is scoped by its unique section.id, so multiple instances on the same page will never conflict.

Will this section break my existing theme?

No. CSS is scoped to the section's unique ID. JS is scoped to the section container. No global styles or scripts are modified.

Does it work with Shopify 1.0 themes?

Sections are built for Shopify 2.0 Online Store 2.0 themes (Dawn and similar). For legacy 1.0 themes, manual integration may be required.

Can I edit the section design?

Yes. Edit assets/section-name.css for layout and style changes. Avoid editing the {% style %} block — that is auto-generated from schema settings.

Shopify Section Developer Guide