Quick Summary
Designing a Shopify store that looks good and converts isn’t easy, especially when your theme limits layout options. You’re stuck with rigid templates that don’t match your brand or give you the flexibility to experiment.
That’s where Shopify sections and blocks can help. With the power of Online Store 2.0, you can now drag, drop, and rearrange elements on almost any page. These tools provide developers more control over layout, content, and overall store experience.
Here, we’ll break down what sections and blocks are, how they work, and how expert Shopify developers use them to customize online stores. We’ll also walk through a live example and share practical tips for both beginners and advanced users.
When you start customizing your Shopify store, everything you’re editing or moving around is either a section or a block. These are the basic building tools that control how your pages look, feel, and work. Whether it’s your homepage, a product page, or a landing page, Shopify gives you these elements to design things in your own way without coding.
Think of a section as a larger layout piece. It could be a banner at the top of your page, a product grid, a video, or a call-to-action area. Each section usually takes care of one type of content and helps organize your page visually.
There are two kinds of sections:
Sections give you creative control. You no longer need to rely on developers for every design change. Just use the Theme Editor to stack and arrange sections however you like—and build a store that actually feels like your brand.
Inside each section, you’ll find blocks – the smaller elements that make up the content within that section. If a section is like a row of shelves, blocks are the items you place on each shelf.
A block might be a single image, a text blurb, a testimonial, an icon, or even a clickable button. For example, in a “Testimonials” section, each customer review would be its own block.
Here’s how blocks work:
Blocks are useful when you need repeatable or varied content within a single section. Let’s say you’re building an FAQ section or listing customer testimonials. Instead of hardcoding each one, you just add a block for each item.
Now that you know how Shopify sections and blocks work, let’s look at a real example to see them in action.
We’re going to build a custom testimonials section—something every store can benefit from. It’s a clean, flexible section that lets you show off customer feedback using editable blocks. Merchants can add, remove, and update testimonials right from the Theme Editor—no extra apps, no extra cost.
This is a perfect use case for Shopify’s Online Store 2.0 features and shows just how powerful sections and blocks can be when used correctly.
Head to your Shopify theme code. Go to sections → Add a new file → Name it testimonials.liquid.
Now paste in the following code:
<section class="testimonials">
<div class="page-width">
{% if section.blocks.size > 0 %}
<div class="testimonials-wrapper">
{% for block in section.blocks %}
<div class="testimonial" {{ block.shopify_attributes }}>
<blockquote>
<p>"{{ block.settings.quote }}"</p>
<footer>— {{ block.settings.author }}</footer>
</blockquote>
</div>
{% endfor %}
</div>
{% else %}
<p>No testimonials added yet.</p>
{% endif %}
</div>
</section>
{% schema %}
{
"name": "Testimonials Section",
"settings": [],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{
"type": "text",
"id": "quote",
"label": "Quote",
"default": "This product changed my life!"
},
{
"type": "text",
"id": "author",
"label": "Author",
"default": "Happy Customer"
}
]
}
],
"max_blocks": 10,
"presets": [
{
"name": "Testimonials Section",
"category": "Custom"
}
]
}
{% endschema %}
This code does two things:
If no testimonials have been added yet, the section will show a fallback message.
Next, we need to set up a page where this section will appear.
In your Shopify dashboard, Go to Online Store → Pages → Add Page. Give it a name like Testimonials. Leave the content area empty (we’ll be managing everything through the theme). Click Save.
This step just sets the foundation, depending on your admin layout). we’ll link this page to your new custom section next.
To attach your new section to the page, you need a matching template. Go back to templates → Add a new file. Select “page” and name it testimonials.json.
Paste in the following JSON:
{
"name": "Testimonials",
"sections": {
"main": {
"type": "testimonials"
}
},
"order": ["main"]
}
This makes sure your custom section is loaded on this specific page.
Now that the template exists, link it to your new page. Go to Online Store → Pages → Testimonials, then click Edit.
Look for the Theme Template dropdown (usually on the right side or bottom, depending on your admin layout). Select page. Testimonials from the list. Click Save.
Your Testimonials page now knows how to load your custom section.
Now, we need to add some testimonials. Go to Online Store → Customize.
In the sidebar, you’ll see your Testimonials Section. Click it, then choose Add block → Testimonial.
You’ll see input fields for:
Fill them.
Add as many blocks as you like, rearrange them using drag-and-drop, and hit Save when you’re done.
That’s it—you now have a fully functional, dynamic Testimonials section built using just Shopify sections and blocks.
Here’s what merchants can do with it:
This kind of flexibility is exactly what Shopify’s modular theme system is made for. Instead of relying on rigid templates or paid apps, you’re using built-in tools to create reusable content sections that work across your entire store.
To really understand how Shopify sections and blocks work together, it helps to break down their structure. Whether you’re a developer creating a custom section or a merchant adding content, knowing how these pieces fit makes customization much easier.
A typical Shopify section that uses blocks includes:
These elements work together to create flexible and reusable layout components that can be managed without touching the code every time.
Shopify’s Online Store 2.0 update supercharged how sections and blocks work:
Due to these changes, Shopify themes are now more flexible, user-friendly, and developer-ready.
Understanding this anatomy helps you build a strong foundation, whether you’re designing from scratch or simply editing a live store. With sections and blocks working in harmony, the possibilities for customization open wide.
Once you understand how Shopify sections and blocks work, the next step is to use them smartly. Whether you’re a developer building themes or a merchant customizing your storefront, there are simple strategies and powerful possibilities to get more out of them.
If you’re working on the theme side of things, here are some best practices:
If you’re a store owner or content manager using the Theme Editor:
Shopify sections and blocks aren’t just for content; they can power complex storefront functionality, too:
Shopify sections and blocks open up a world of layout flexibility and user-friendly content control. Whether you’re building themes or managing content, using them thoughtfully can make your store more dynamic, maintainable, and scalable over time.
A section is a larger content area on your store page (like a banner or product grid). A block is a smaller element inside a section (like a single product, image, or text item). Sections hold blocks.
Sections are full layout parts that can be managed in the Theme Editor. Snippets are small pieces of reusable code (like buttons or icons) used inside sections or templates, but they’re not editable in the Theme Editor.
You can add up to 50 blocks inside a single section. This limit is set by Shopify.
Blocks are individual content items inside a section, like a review, image, or heading. They let you customize and organize content within a section using the Theme Editor.
To create a dynamic section, add a new file in your theme’s /sections folder (e.g. custom-section liquid). Define the layout and add a schema with editable settings and blocks using {% schema %}. Then, use the Shopify Theme Editor to add this section to any page that supports dynamic content.
Shopify sections and blocks have completely changed how store design works. You’re no longer stuck with rigid templates or dependent on developers for every tweak. With a little understanding, you can customize your store layout like building with LEGO—quick, flexible, and totally in your control.
Whether you’re a developer building reusable components or a merchant just looking to update content faster, sections and blocks offer the perfect balance of structure and freedom.
If you need advanced customizations for your Shopify store, consulting with a Shopify development company can help you get the best results possible.
Ankur Shah is a tech-savvy expert specializing in eCommerce solutions. With a deep understanding of WooCommerce and Shopify, he helps businesses optimize their online stores for success. Whether it's implementing new features or troubleshooting issues, Ankur is your go-to guy for all things eCommerce.
