How to Build a Custom Shopify Section from Scratch (Step-by-Step Guide)

Shopify's Online Store 2.0 has transformed the way merchants customize their stores. With custom sections, you can create reusable, flexible components that merchants can add, remove, and customize directly from the Theme Editor—without editing code every time.

Whether you're building a hero banner, FAQ section, image gallery, testimonial slider, or product showcase, understanding Shopify section development is an essential skill for every Shopify developer.

In this guide, we'll walk through the complete process of building a custom Shopify section from scratch using Liquid, HTML, CSS, JavaScript, and Shopify's schema settings.

Why Build Custom Shopify Sections?

Custom sections offer several advantages:

• Greater design flexibility
• Better store performance compared to many third-party apps
• Easier customization for merchants
• Reusable components across multiple pages
• Improved user experience and conversion rates

For Shopify agencies and developers, custom sections also help create unique storefronts that stand out from competitors.

Understanding Shopify Sections

A Shopify section is a modular content block that can be customized through the Theme Editor.

Common examples include:

• Hero banners
• Featured products
• Testimonials
• FAQs
• Image galleries
• Video sections
• Collection showcases
• Promotional banners

With Online Store 2.0, sections can be used on almost every page, making store customization more powerful than ever.

Step 1: Create a New Section File

Navigate to:

Online Store → Themes → Edit Code → Sections

Create a new file named:

custom-hero.liquid

This file will contain the markup, styling, settings, and functionality for your section.

Step 2: Build the Section Markup

Add the following Liquid code:

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

This allows content to be dynamically controlled through the Theme Editor.

Step 3: Add Styling

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

Using a custom prefix such as ck- helps prevent CSS conflicts with themes and apps.

Step 4: Create Theme Editor Settings

Add the schema section:

{% schema %}
{
  "name": "CK Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description"
    }
  ],
  "presets": [
    {
      "name": "CK Hero Banner"
    }
  ]
}
{% endschema %}

These settings automatically appear inside Shopify's Theme Editor.

Step 5: Add Dynamic Blocks

Blocks allow merchants to create multiple content items without coding.

Example:

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Perfect for:

• Testimonials
• FAQs
• Team members
• Features
• Image galleries

Step 6: Add Interactive Features

For sliders, accordions, tabs, and animations:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Custom section loaded');
});

For larger projects, move JavaScript to a dedicated asset file.

Shopify Section Development Best Practices

Keep Sections Modular

Build each section for a single purpose and avoid combining too many features into one component.

Optimize Images

Use Shopify's image filters:

{{ image | image_url: width: 1200 | image_tag }}

Make Everything Responsive

Always test on desktop, tablet, and mobile devices.

Use Meaningful Settings

Organize settings clearly so merchants can customize sections easily.

Focus on Performance

Minimize unnecessary JavaScript and optimize assets for faster loading.

Final Thoughts

Custom Shopify sections are the foundation of modern Shopify theme development. By mastering Liquid, schema settings, responsive design, and reusable components, developers can create highly flexible storefront experiences that merchants can manage with ease.

At CodeKanon, we build custom Shopify sections, theme customizations, and Shopify apps that help merchants create faster, more engaging, and conversion-focused stores.

Need help with Shopify development? Contact CodeKanon to bring your next Shopify project to life.