How to add Sections to Pages in Shopify store

Name: EComposer Landing Page Builder
Brand: EComposer
Rating: 5 (2154 reviews)

EComposer Team

Jan 2, 2026

0 comments

Adding sections to Shopify pages lets you build custom, flexible layouts without coding, enabling you to showcase products, content, visuals, and features exactly how you want. This guide explains how to use Shopify’s section editor and tools like EComposer to add, reorder, and style sections, helping you create engaging page designs that improve user experience and conversions

Section is a fantastic feature of the EComposer app that will provide users with various engaging experiences while trying to save them as much time as possible. You can use this feature to design a section based on your preferences, which you can then put into the pages and the theme that has been published in your store.

This blog will cover the definition of sections and how to add a section on Shopify page.

Overview

What are Shopify sections?

(image source: EComposer’s premade section)

Sections are customization elements that let you create reusable content units. They give you more selections to design your online stores. With just a few clicks, you can now add or move information on your Shopify pages thanks to this function.

Most sections are made up of blocks with clearly defined functions, like links, headings, text, specific photos, galleries, or single photos. You have more flexibility in how you arrange the content of your store when you use sections and blocks in your templates. You may alter how your online store looks and feels without changing any code. Each template can have up to 25 sections.

Besides, you also apply Global Block as a separate section to optimize the adjustment process of the same parts in different pages through your online stores.

How Shopify Sections Work on Different Pages

Shopify sections are the building blocks of your store’s layout, giving you flexibility to create custom designs without touching code. However, how these sections behave can differ depending on the type of page you’re editing. Understanding this can help you make better design decisions and improve the shopping experience.

Home Page Sections

The home page is the most flexible. You can add, remove, and rearrange sections freely.
Examples include sliders, featured collections, testimonials, banners, and countdown timers.
Many Shopify themes also allow dynamic sections, meaning you can show or hide them depending on promotions or seasons.

Product Pages

Product pages typically have predefined sections like product images, description, reviews, and upsell recommendations.
Some themes allow custom sections, such as FAQs, size guides, or videos, to be inserted between standard elements.
Keep in mind: not all sections are available on every product page, depending on theme constraints.

Collection Pages

Collection pages focus on product listings. Sections here include filters, banners, featured products, and sorting options.
You can’t usually add complex sections like sliders between individual products, but you can add hero banners or collection descriptions.

Blog & Article Pages

Blog pages often support sections for featured posts, author info, and related articles.
Article pages may allow inline call-to-action sections such as newsletter signup or product recommendations

Cart & Checkout Pages

These pages are the most restricted. Shopify limits sections here for security and functionality.
You can typically customize the header, footer, and order summary, but adding dynamic content like sliders or custom HTML sections is limited.

Already in love with Shopify? Take advantage of Shopify's $1 offer and spend your first three months exploring any plan from A to Z!

Start 3 Months Trial Now!

How to add a section to pages in Shopify store

Add a Section to Pages Using the Theme Customizer (No Code)

Follow these steps to add a section to your Shopify live themes.

Step 1: Open your Shopify store

In your Shopify admin, go to “Online Store”, in the “Themes” section, Click “Customize” next to your live default theme.

Step 2: Add sections to Shopify

In the theme editor, the left sidebar on the left is where you adjust and customize the content and design of each section.

Scroll to the last part. You can see the “Add section”. Click here and choose the elements you want to add to the page.

In this example, I choose “Contact form”. Click on the section, and adjust the content and the design to make it appropriate for your Shopify stores.

Moreover, you can change the section’s positions by hovering over the added section, holding and keeping them while moving them into your desired positions. Remember to press on the symbol beside the “eye”.

Step 3: Save and Publish

Hit the “Save” button to keep your changes and allow them to be publish to your customer.

Add a Section to Pages Using Code (For Custom Sections)

While Shopify’s drag-and-drop editor makes adding sections easy, sometimes you need a custom section that isn’t available in your theme. In these cases, adding sections using code gives you full control over layout and functionality.

Step 1: Create a Custom Section File

Go to your Shopify admin: Online Store > Themes > Actions > Edit Code.

Under the Sections folder, click Add a new section.
Name your section, for example: custom-promo.liquid
Add your custom HTML, Liquid, and CSS code inside the file. Example:

<h2>{{ section.settings.title }}</h2>

<p>{{ section.settings.description }}</p>

</div>

{% schema %}

{

"name": "Custom Promo Section",

"settings": [

{ "type": "text", "id": "title", "label": "Title" },

{ "type": "textarea", "id": "description", "label": "Description" },

{ "type": "url", "id": "link", "label": "Button Link" }

"presets": [{"name": "Custom Promo"}]

}

{% endschema %}

This code defines settings that can be edited in the Shopify editor, making your section dynamic.

Step 2: Add the Section to a Page

For template-based pages (like product, collection, or custom pages):

Open the template file in Templates folder (e.g., product.liquid or page.liquid).
Insert your section using Liquid code:

{% section 'custom-promo' %}

For custom pages created via page templates:

Go to Online Store > Pages and create a new page.
Assign it a custom template where you added your section.

Add a Section to Pages Using App (Quick solution)

Instead of relying solely on the default theme editor, you can use Shopify apps to add and customize sections on your pages more flexibly. These apps let you create custom layouts, use drag‑and‑drop editors, and leverage prebuilt section templates.

Here’s a quick comparison of 5 popular Shopify apps that allow you to add sections to pages:

#	App Name	Key Features	Pricing	Best For
1	EComposer Page Builder	Drag & drop editor, premade section library, custom templates, responsive design	Free plan + Paid plans from $9/month	Merchants who want to create landing pages & custom sections without coding
2	Shogun Page Builder	Drag & drop, A/B testing, analytics, reusable sections	Paid plans from $39/month	Stores needing advanced testing and analytics
3	GemPages	Prebuilt sections, mobile responsive, Shopify theme integration	Free trial + Paid from $15/month	Small to medium stores wanting fast design
4	PageFly Landing Page Builder	Custom section templates, flexible layout, third-party app integrations	Free plan + Paid from $19/month	Beginners needing a simple drag & drop builder
5	Zipify Pages	Conversion-optimized templates, upsell blocks, analytics	Paid from $67/month	Stores focused on conversion-driven landing pages

In this blog, we’ll use EComposer as an example and provide a step-by-step guide on how to create and customize sections on your pages. You’ll learn how to:

EComposer is a top landing page builder in Shopify, it provides solutions for web design. Hence, EComposer can help you build a professional Shopify store with 190+ sections and 90+ elements to customize freely in your way. Moreover, you can use them easily with a powerful drag-drop editor.

In this part, we will guide you on how to create a custom section on Shopify.

Step 1: Install EComposer

In the Shopify app store, look for “EComposer - Landing Page Builder”, and then click “add app”
To activate the use of the app, click “Install”.

Step 2: Create Shopify custom section in EComposer

In your Shopify admin, go to “Apps”, and click on EComposer Landing Page Builder
Click “Start Building and choose “section”

After that, the app will direct you to a new page with many section templates. Choose a blank template.

There are two ways to create and add custom sections to your pages. If you are a newcomer, you’d better use the first way with EComposer’s premade sections. If you want to build one with your idea, please follow the second method. Now, look through both of them and apply the best fit for your Shopify store.

1st way: Using Premade sections of EComposer

Hit “Template”

Look through these sections to choose what section you need via the “Preview” function.

If you find out the suitable one, there are two options for you.

Option 1 - Copy this section:

This option enables you to store this section in the clipboard of EComposer builder. After that, you can “Paste” it into your page and customize it.
Go to the page where you want to add this section and click “plus” to add the section.
Choose “Paste from Clipboard”

You can change and edit the content and design of the chosen section in the left sidebar editor.

Finally, “Publish” to save the change and show it to your customers.

Option 2 - Insert this section:

This selection allows you to edit and customize freely without affecting other pages' designs.

First, you can change the image and the text through content and design functions by hovering over the section and then clicking the editor pen. You will carry out all the changes on the left sidebar.

Additionally, you can use EComposer elements to add to your current section with a powerful drag-drop editor.

The last step is to choose “Publish” at the top right corner, and then hit “Save and Publish”.

Here is the result

2nd way: Using EComposer’s elements

After creating a Blank template, you see that EComposer offers many elements.

Drag-drop elements to build your section based on your creativity

After finishing customization, Choose “Save to Library” for further use.

Fill in the section’s name and hit “Save”

You can see sections which you have just created in the list of “My Templates”

Step 3: Add a section on Shopify page

Go to the page you want to add a created section on. Click on the “plus” button between existing sections.

Explore library

Select “My Template” and “Insert” the section that you choose.

Now, it’s added to the page, click “Publish” to save the change.

Looking at the details guide via video here: Section Builder

How to remove a section from Shopify pages

If you want to remove or delete a section from the Shopify default pages, follow step by step below:

- Access your Shopify “Online Store”

- Choose the “Customize” theme. Move to the section that you want to take it out.

- Select “Remove section” on the bottom left corner before hitting “Save” to protect your changes

remove section from Shopify themes

Why You Might Not Be Able to Add Sections

Even though Shopify makes it easy to add sections to pages, there are times when things don’t work as expected. If you’ve ever opened the theme editor and wondered why the “Add section” button is missing, you’re not alone. Here are the most common reasons this happens:

Your Theme Has Limitations: Not all Shopify themes support sections on every page type. Some older or heavily customized themes may only allow sections on the homepage or specific templates. If your page template doesn’t support sections, the editor simply won’t show the option.
You’re editing a Standard Page Without a Section Template: Shopify differentiates between pages and templates. If your page uses a template that doesn’t include sections, you won’t be able to add new ones directly. The fix? Create a custom template that supports sections or use a page builder app like EComposer to bypass this limitation.
App or Script Conflicts: Sometimes other apps or custom scripts can interfere with the theme editor. If you recently installed an app or added custom code, it could prevent sections from appearing. Try disabling them temporarily and refresh your editor — it often fixes the issue.
User Permissions: Not every store account can edit sections. Only users with the right permissions, like the Store Owner or Staff with theme editing access, can add sections. If you can’t see the option, double-check your permissions with the store owner.
Browser or Device Issues: Shopify’s theme editor works best on desktop browsers like Chrome or Firefox. Mobile devices or certain browser extensions can sometimes block sections from displaying correctly.

If you’re still stuck, don’t worry. Page builder apps like EComposer let you create and customize sections on any page with no coding, no theme limitations.

Where to add the Shopify Blog Section

Adding a blog section on your Shopify store is more than just a place to post articles—it’s a tool to engage visitors, improve SEO, and guide customers toward products. Here are the main places you can add a blog section:

Homepage: Placing a blog section on the homepage lets visitors immediately see your latest articles, announcements, or tips. This helps boost engagement and keeps your store content dynamic.
Dedicated Blog Page: Shopify automatically generates a blog index page where all posts from a specific blog category appear. This is ideal for visitors who want to browse multiple articles and easily find related content.
Product Pages: Adding relevant blog posts on product pages can educate customers, show use cases, or highlight benefits, helping them make informed purchase decisions.
Footer or Sidebar (Theme-Dependent): Some themes allow you to display recent posts in the footer or sidebar, giving readers easy access to your blog from any page on your store.

Tip: Choose the placement that aligns with your content strategy and customer journey. For example, homepage and dedicated blog pages work well for engagement, while product pages are great for content marketing that drives conversions.

Shopify Blog Section vs Blog Page: What’s the Difference?

Feature	Shopify Blog Section	Shopify Blog Page
Definition	A section you can add directly to any page (like homepage or product page) to display selected posts.	A dedicated page that lists all posts from a specific blog, typically accessed via navigation menu.
Best Use	Highlight featured posts, recent articles, or tips in context (e.g., homepage, landing page, product page).	Provide a full blog experience for readers who want to browse all posts.
Content Control	You can choose which posts appear and in what order.	Displays all posts from the blog automatically, sorted by date.
Layout Flexibility	Highly customizable in placement and design with page builders (like EComposer).	Limited to blog page template, but can still customize layout with theme settings.
SEO Impact	Adds SEO value indirectly by showcasing content on multiple pages.	Primary hub for blog content, fully indexable by search engines.
Navigation	Typically part of another page; not a standalone page.	Standalone page with its own URL; easy to link from menus and internal links.

Shopify Blog Section Design Best Practices (UX & CRO)

Creating a great Shopify blog isn’t just about writing quality content; it’s also about how you design your blog sections to maximize engagement, clicks, and conversions. Here are some best practices to help you design blog sections that delight readers and drive results:

Best Layout for Shopify Blog Sections

Grid or card layout: Perfect for showing multiple posts at once while keeping the page organized.
List layout: Works well for chronological or tutorial-style blogs where readers follow a step-by-step order
Masonry layout: Adds a creative touch for visually rich blogs (like fashion, lifestyle, or product highlights).
Use clear headings and featured images to make each post stand out.

How Many Posts to Show

Showing 3–6 posts per section is ideal for most blogs—it’s enough to offer choices without overwhelming readers.
For homepage or category sections, 4 posts is usually a sweet spot
Avoid displaying too many posts at once; infinite scrolling or “Load More” buttons work better for large libraries.

Featured vs Latest Blog Posts

Featured posts: Highlight your best content, cornerstone guides, or promotional pieces at the top of the blog or in a dedicated section.
Latest posts: Show the most recent updates to keep your blog fresh and encourage repeat visits.
A combination of both gives a balanced experience: readers see your best content first, plus your newest updates.

Internal Linking Strategies

Link relevant posts within blog sections to keep readers browsing longer.
Use contextual links in summaries or excerpts to improve SEO and guide users naturally to related content.
Include links to product pages or landing pages when appropriate to drive conversions directly from blog sections.

Frequently asked questions

1. Can I add sections to normal Shopify pages?

Yes, but with a caveat. Shopify allows sections on pages only if the page’s template supports them. Many standard pages use templates that don’t have sections enabled by default. To add sections, you can either:

Create a custom template that supports sections, or
Use a page builder app like EComposer, which lets you add and customize sections on any page without touching code.

2. How to add sections to product/collection pages?

Product and collection pages are dynamic templates, so adding sections works slightly differently:

Go to Online Store → Themes → Customize.
Select a product or collection page from the top dropdown
Click Add section in the sidebar (if supported by your theme
Rearrange or customize sections as needed.

If your theme doesn’t allow sections on product/collection pages, you can use apps like EComposer to create fully customizable layouts for these pages.

3. Do I need JSON templates to add sections?

Not always, but JSON templates are required for themes using Online Store 2.0.

JSON templates define which sections appear on pages and in what order.
With OS 2.0 themes, you can create flexible sections and blocks for pages, products, collections, and more
Older themes using Liquid templates may require custom coding to add new sections.

4. How do sections differ from blocks?

Think of sections as containers and blocks as the content inside those containers:

Sections: Large, reusable areas of a page (e.g., hero banner, testimonial section, featured products).
Blocks: Individual pieces within a section (e.g., text, image, button, video).

Example: A “Testimonial Section” can contain multiple “Testimonial Blocks,” each with its own customer quote and image.

Final words

To sum up, sections are the structural components of Shopify pages, you can add or remove them to redesign your Shopify store and make it more professional. We hope that the guide above can support you to create and add a section to Shopify pages easily with EComposer.

Related posts:

EComposer Team

Hi friend, we're Shopify gurus from EComposer. A team of 10-year experienced and certified experts. Additionally, our expertise has been recognized and highlighted in esteemed publications such as TechCrunch, Shopify Expert, Entrepreneur, and Forbes. We want to share our experience and knowledge about Technology, AI, Shopify, Marketing and E-commerce.