How to Build Custom Sections for Shopify Theme 2.0

Learn to Build Custom Sections for Shopify Theme 2.0 (Step-by-Step)

Shopify’s Online Store 2.0 transformed theme development by introducing a powerful and flexible sections everywhere architecture. This opens the door to creating reusable content blocks — similar to Gutenberg Patterns in WordPress.

In this guide, we’ll walk through how to build and use a custom hero section for any Shopify 2.0-compatible theme.

---

What Are Sections in Shopify?

Sections are modular Liquid files that control content blocks within your store. These can be:

• Static (e.g. included in the homepage template)
• Dynamic (drag-and-drop enabled in the theme editor)

Each section is made up of:

• HTML/Liquid code for layout
• JSON schema for content settings
• Optional CSS/JS for styling and interactivity

---

Step 1: Set Up Your Dev Environment

1. Sign up for a Shopify Partner account
2. Create a development store
3. Use a base theme (e.g. Dawn) or duplicate an existing one
4. Access your theme:
   Online Store → Themes → Actions → Edit Code

---

Step 2: Create a New Section

Go to the sections/ folder → Add a new section
Name it: hero-banner.liquid

Paste the following:

{% schema %}
{
  "name": "Hero Banner",
  "tag": "section",
  "class": "hero-banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to Our Store"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Discover our latest collection"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    }
  ],
  "presets": [
    {
      "name": "Hero Banner"
    }
  ]
}
{% endschema %}

<section style="background-image: url({{ section.settings.background_image | image_url }}); padding: 60px; color: white; text-align: center;">
  <h1>{{ section.settings.heading }}</h1>
  <p>{{ section.settings.subheading }}</p>
</section>

This code:

• Defines a section schema
• Lets users customize heading, subheading, and background
• Renders editable content in the Shopify Theme Editor

---

Step 3: Add the Section to a Page

You have two options:

A. Add It to templates/index.json (Homepage)

Find the homepage JSON:

"main": {
  "type": "hero-banner"
}

B. Create a Custom Page Template

Create templates/page.hero.json:

{
  "name": "Hero Page",
  "sections": {
    "main": {
      "type": "hero-banner"
    }
  },
  "order": ["main"]
}

Now go to Online Store → Pages, create a new page and select page.hero as the template.

---

Step 4: Style and Enhance with CSS/JS (Optional)

If you need more style or behavior:

• Add a file like assets/hero-banner.css
• Link it in your section:

{{ 'hero-banner.css' | asset_url | stylesheet_tag }}

Same for JS if needed.

---

Bonus: Package It as a Reusable Pattern

If you plan to distribute or sell this:

• Include /sections/, /templates/, and /assets/ in a ZIP file
• Add a README for installation instructions
• Provide a demo link using a Shopify dev store

---

Use Cases

• Merchants who want custom landing pages
• Agencies needing reusable blocks
• Theme devs creating starter kits
• Creators selling UI packs (like Gutenberg patterns)

---

Final Thoughts

Custom sections unlock massive creative freedom for merchants and devs alike. Whether you’re building something for yourself or selling it as a product, Shopify 2.0 makes modular, dynamic content easier than ever.

If you’d like a downloadable ZIP example of this hero section — with CSS, JS, and demo — contact me or comment below.