Shopify gives merchants a powerful platform to build and manage online stores. But when it comes to creating a truly unique shopping experience, custom sections play a key role. They allow store owners and developers to go beyond default templates and create layouts that reflect a brand’s personality, improve user experience, and support specific business goals.

For developers, custom sections provide a flexible way to build reusable content blocks that store owners can manage easily through the Shopify theme editor. Whether it’s a promotional banner, a testimonial slider, or a product showcase, custom sections make it easier to design and scale a Shopify store without touching the code every time.

In this guide, you will learn how to create a custom section in Shopify from scratch. The steps are simple if you have some working knowledge of Liquid, CSS, and the Shopify theme structure. This approach gives you full control over how your content looks and behaves across different pages.

What Are Shopify Sections?

Shopify sections are modular content blocks that help structure a store’s layout. They allow you to organize and display different types of content on your pages without writing new code each time. By using sections, you can create a store that looks professional and adapts easily to your client’s or your own design needs.

There are two main types of sections in Shopify:

1. Static Sections:
These sections appear on every page where they are defined in the theme’s layout files. For example, a header or footer is usually a static section because it stays consistent across the store.

2. Dynamic Sections:
These are more flexible. You can add them to any page that uses a JSON template. Shopify introduced this feature with Online Store 2.0. Dynamic sections give merchants the ability to add, remove, or rearrange content blocks directly from the theme editor, without editing the theme’s code.

Understanding the difference between static and dynamic sections is essential before you start building custom ones. This knowledge helps you decide how and where to use your custom section to give store owners the most control.

Pre-requisites Before Creating a Custom Section

Before you begin building a custom section in Shopify, it’s important to set up your environment and understand the tools involved. This preparation ensures a smoother development process and reduces the chances of running into errors.

1. Duplicate Your Live Theme
Always work on a copy of your live theme. This protects your store from accidental changes and lets you test your new section without affecting customers.

2. Know the Basics of Liquid, JSON, CSS, and JavaScript
Shopify uses Liquid, its own templating language, to render dynamic content. You also need a good understanding of HTML and CSS for layout and styling. JavaScript is useful if your section includes interactive elements. JSON is essential for defining schema settings and working with Online Store 2.0 templates.

3. Use the Shopify Theme Editor
The theme editor lets you visually add and rearrange sections. When your custom section is ready, the editor makes it easy for merchants to control the content without editing code.

4. Install Shopify CLI (Optional but Recommended)
The Shopify CLI speeds up development and allows you to preview your changes locally. It’s a useful tool if you’re working on custom themes or developing frequently.

5. Enable Developer Tools in Your Browser
These tools help you inspect elements, test responsive views, and debug CSS or JavaScript issues. Chrome DevTools or Firefox Developer Edition can make a big difference in catching layout problems early.

Once these pre-requisites are in place, you’re ready to build a custom section that works smoothly and looks professional.

Creating a Basic Custom Section in Shopify

Now that your setup is ready, let’s walk through the steps to create a simple custom section in Shopify. In this example, we’ll build a basic content block with a heading, some text, and an image. You can later expand it with more settings and styles as needed.

Step 1: Create a New Section File

In your Shopify admin panel or code editor, navigate to:
Online Store > Themes > Edit code

Under the Sections folder, click Add a new section and name it something like:
custom-content.liquid

This will create a new Liquid file where you can define your custom section’s layout and settings.

Step 2: Define the Schema

The schema is a JSON object inside a Liquid comment. It defines the section’s name, settings, and content blocks that can be edited through the Shopify theme editor.

Here’s a basic example:

liquid
{% schema %}
{
"name": "Custom Content Block",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Welcome to Our Store"
},
{
"type": "textarea",
"id": "text",
"label": "Content",
"default": "Write something interesting here."
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
],
"presets": [
{
"name": "Custom Content Block"
}
]
}
{% endschema %}

Step 3: Add HTML and Liquid Markup

Above the schema, create the HTML layout and use Liquid tags to insert dynamic content from the settings.

liquid
<div class="custom-content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.text }}</p>
{% if section.settings.image != blank %}
<img src="{{ section.settings.image | image_url }}" alt="{{ section.settings.heading }}">
{% endif %}
</div>

Step 4: Style with CSS

You can either add styles directly into the section file using <style> tags or reference a CSS file in your theme. For better organization, use your main stylesheet or a separate custom CSS file.

Example inside the section file:

liquid
<style>
.custom-content {
text-align: center;
padding: 40px 20px;
}.custom-content img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
</style>

Step 5: Optional JavaScript (If Needed)

If your section has interactive elements like sliders or buttons, you can include a <script> block. For this basic example, we’ll skip JavaScript.

Once the section is saved, it’s ready to be used inside a page template or added through the theme editor.

Example: Creating a “Featured Product Grid” Section

Let’s take what we’ve learned and create a more functional example. In this section, you’ll build a featured product grid where store owners can select products to showcase on the homepage or any other page. This section will be fully customizable and editable through the Shopify theme editor.

Step 1: Create the Section File

Go to your Sections folder and create a new file named:
featured-product-grid.liquid

Step 2: Add Schema Settings

This schema will let store owners choose up to four products and add a heading for the section.

liquid
{% schema %}
{
"name": "Featured Product Grid",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "Featured Products"
},
{
"type": "product",
"id": "product_1",
"label": "Product 1"
},
{
"type": "product",
"id": "product_2",
"label": "Product 2"
},
{
"type": "product",
"id": "product_3",
"label": "Product 3"
},
{
"type": "product",
"id": "product_4",
"label": "Product 4"
}
],
"presets": [
{
"name": "Featured Product Grid"
}
]
}
{% endschema %}

Step 3: Write the Markup

Now add the HTML and Liquid to display selected products in a grid layout.

liquid
<div class="featured-products">
<h2>{{ section.settings.heading }}</h2>
<div class="product-grid">
{% for i in (1..4) %}
{% assign product = section.settings["product_" | append: i] %}
{% if product != blank %}
{% assign product_obj = all_products[product] %}
<div class="product-item">
<a href="{{ product_obj.url }}">
<img src="{{ product_obj.featured_image | image_url: 'medium' }}" alt="{{ product_obj.title }}">
<h3>{{ product_obj.title }}</h3>
<p>{{ product_obj.price | money }}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>

Step 4: Add Styling

You can style the grid with basic CSS for layout and spacing.

liquid
<style>
.featured-products {
text-align: center;
padding: 40px 20px;
}.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}

.product-item img {
width: 100%;
height: auto;
}

.product-item h3 {
margin-top: 10px;
font-size: 1.1rem;
}

.product-item p {
color: #555;
}
</style>

Why This Works

This section gives merchants a clean, editable layout to highlight specific products. They can update products anytime from the theme editor, and the layout remains consistent. You can further enhance this section by adding hover effects, badges, or product descriptions.

How to Add Your Custom Section to a Page

Once you’ve created your custom section, the next step is to make it visible on your store. With Shopify’s Online Store 2.0 structure, this process is straightforward using JSON templates and the theme editor.

Step 1: Use a JSON Template

Shopify allows dynamic sections only on pages that use JSON templates. You can either edit an existing template like templates/index.json or create a new one for custom pages.

To create a new template:

  1. Go to the Templates folder.

  2. Click Add a new template.

  3. Choose Page as the type, and set the template name, for example: custom.

This creates a file called page.custom.json.

Step 2: Add Your Section to the JSON Template

Inside your new JSON template, include your custom section like this:

json
{
"sections": {
"main": {
"type": "featured-product-grid"
}
},
"order": ["main"]
}

This tells Shopify to render the featured-product-grid.liquid section on that page.

Step 3: Assign the Template to a Page

  1. Go to Online Store > Pages in your Shopify admin.

  2. Create or edit a page.

  3. On the right sidebar, find the Theme template dropdown.

  4. Choose page.custom.

Now when you visit that page, your custom section will appear with all the content and design you built.

Step 4: Customize Through Theme Editor

Open the theme editor and navigate to the page you assigned the template to. You will see your custom section listed in the sidebar. Store owners can now:

  • Change the heading

  • Choose different products

  • Rearrange or hide sections

No coding is required once the section is set up, which makes the store much more manageable.

Conclusion and Best Practices

Creating custom sections in Shopify gives you full control over how your store looks and functions. With a clear understanding of Liquid, JSON, and the theme editor, you can build dynamic layouts that store owners can manage easily without touching code.

Before you start building more advanced sections, keep these best practices in mind:

1. Keep the Code Clean and Modular
Write code that is easy to read and update. Break long sections into reusable components if needed. Consistent formatting and comments help you and other developers work faster.

2. Always Test on a Duplicate Theme
Make all your changes in a copy of the live theme. This avoids any unwanted impact on the customer experience and gives you space to experiment freely.

3. Name Files and Settings Clearly
Use meaningful names for section files, IDs, and labels in your schema. This makes your custom section easy to understand and manage from the theme editor.

4. Optimize for Mobile
Most Shopify traffic comes from mobile devices. Always test your sections on different screen sizes and make sure the layout adjusts properly.

5. Avoid Hardcoding Content
Use schema settings for any text, image, or product data. This allows non-developers to update the content easily from the admin panel.

6. Reuse When Possible
Once you create a well-structured section, you can reuse it in multiple templates or even across different stores with minor changes.

Custom sections are one of the most powerful features in Shopify theme development. They let you tailor the store to match a unique brand style while giving the merchant full control over content. With practice, you can build a library of reusable, flexible sections that speed up development and improve client satisfaction.

If you’re looking to enhance your Shopify store with custom features or sections, consider working with a specialist. You can hire a freelance Shopify developer or consult a Shopify freelance web designer to build tailored solutions that match your brand and business goals.