How to Use Shopify Sections?- Step-by-Step Customization Guide

Understanding the Shopify sections is key to designing your store. These customizable components help you customize your site and create a store that’s easy to navigate. In this blog, we’ll show you how to use Shopify Sections. You’ll learn to use Shopify custom sections to create a store that looks great and motivates customers to buy.

 

What is a Shopify Section?

Shopify Section is a simple customizable component that helps us build and customize our online store. You don’t need to know how to code. Introduced with Shopify Online Store 2.0, sections make it easy to design a store that fits with the brand.

A section is like a box that holds content. This could be text, images, videos, or product lists. Each section represents a part of your webpage, like a homepage banner, product grid, or testimonials. You can adjust these sections one by one to create the perfect layout for your store.

The best part? Sections let you use drag-and-drop controls. You can easily move, add, or remove sections to change your store’s look. It’s fast, simple, and flexible—perfect for keeping your store fresh and easy to use.

 Types of Shopify Sections

Shopify Sections are divided into two types: Static Sections and Dynamic Sections. Each type has a specific purpose and improves your store’s design and function. Let’s explore what makes them unique.

1. Static Sections

Static sections are the fixed parts of your Shopify theme. These sections show up on every page of your store. You can’t move or remove them. They provide the structure your store needs and help it function properly.

Use Cases

Static sections help organize your store’s layout. Here’s how they are used:

• Header: Shows your logo, navigation links, and search bar. It keeps your branding consistent.
• Footer: Displays key details like contact information, social media links, and policy pages. Visitors can easily find these essentials.
• Sidebar: Lets customers filter and browse categories, making shopping easier.

Advantages

• Consistent Design: Static sections keep your store’s look the same across all pages, which makes it professional.
• Quick Access: Customers can always find important tools like the search bar or links to policies.

Static sections are the foundation of your Shopify store. They ensure it stays user-friendly and functional.

 

2. Dynamic Sections

Dynamic sections are flexible parts of your store. You can add, remove, or rearrange them on certain pages, like the homepage or product pages. They let you personalize your store for your goals and your customers.

Use Cases

Dynamic sections make your store more engaging and useful. Here are some examples:

• Hero Banner: Show promotions or new products in a bold, eye-catching way.
• Featured Products: Highlight your best-sellers or seasonal items to attract attention.
• Customer Testimonials: Share customer reviews to build trust and encourage purchases.
• Image Gallery: Add stunning visuals to show off your products or brand.

Advantages

• Flexibility: Update your content easily to match sales or marketing campaigns.
• Engagement: Keep your store fresh and interesting to encourage repeat visits.
• Targeted Messaging: Focus on specific products or collections to guide customers to buy.

Dynamic sections let you design a store that looks great and works well. They help create a unique and high-performing shopping experience.

 

How to Use Shopify Sections

Using Shopify sections effectively involves three main actions: adding or removing sections, moving them up or down the page, and customizing their content. Let’s explore each step in detail.

 

1. Add or Remove Sections

Adding a Section

Step 1: Navigate to your Shopify Admin and select Online Store > Themes > Customize.

Step 2: In the theme editor, navigate to the part where you want to add a new section.

Then click on the Add Section option.

Step 3: Crawl the available options, such as slideshows, testimonials, or product grids.

Once selected, configure the new section’s settings to fit your design.

Removing a Section

In the same Customize menu, click on the section you wish to delete.

Then Scroll to the bottom of the settings panel and click Remove Section.

Confirm the action.

Note: Always preview changes in desktop and mobile views to ensure the section aligns with your design goals.

 

2. Move Sections Up or Down the Page

Rearranging sections is simple with Shopify’s drag-and-drop interface:

Step 1: Open the Theme Editor.

Step 2: Locate the Sections Panel on the left-hand side.

Step 3: Click and hold the section you wish to move.

Step 4: Drag the section up or down to your desired position.

Step 5: Release to save the new order.

This feature is particularly useful for experimenting with different layouts or emphasizing seasonal campaigns.

 

3. Customize Sections

Customization lets you adapt Shopify sections to align with your brand identity. You can adjust settings like colors, fonts, spacing, and content to make your store unique.

Steps to Customize a Section

1. Open the Theme Editor and click on the section you want to customize.
2. Modify the available settings:
   • Text: Edit headings, subheadings, and body copy.
   • Images: Upload new visuals or adjust existing ones.
   • Colors: Apply your brand palette to backgrounds, text, or buttons.
   • Alignment: Adjust the layout for better visual balance.
3. Preview your changes in real-time.
4. Save your work.

Advanced Customization with Code

For merchants with coding knowledge or access to a developer, Shopify allows advanced customization via Liquid, CSS, and JavaScript. You can:

• Add custom animations.
• Integrate third-party apps to design sections.
• Design completely bespoke sections that fit your brand’s unique needs.

Note: Always back up your theme files before making advanced changes.

 

How to Add Custom Sections in Shopify Code Editor

Adding a custom-coded section to your Shopify theme is easy. However, it’s best to have experience with coding or work with a developer. Liquid, Shopify’s coding language, is easy to use but even small mistakes can break your theme.

 

Step 1: Open the Sections Folder

Go to the code editor for your theme.

Scroll down to find the Sections folder.

Click Add a new section.

 

Step 2: Name Your Section

1. Choose a name for your new section. Use dashes between words (e.g., “promo-banner” or “product-grid”).
2. Click Done to save it.

 

Step 3: Add Your Custom Code

1. Your new section file will open with a basic template.
2. Add your Liquid code, including:
   • Section schema.
   • CSS assets.
   • JavaScript code (if needed).

 

How to add sections on Shopify with Slider Revolution and Sections

Here’s how to create a section with Slider Revolution & Sections (Shopify section builder):  

Step 1: Go to your Shopify Dashboard

Go to your Shopify Dashboard, click on Apps, and select Slider Revolution (Shopify section builder). Install the Slider Revolution & Sections app from the Shopify App Store if you have not installed it yet.

Step 2: Select The Preferred Option

Go to Dashboard. Here you will find 3 options for creating Shopify custom sections. 

• New Blank Slider
• New Slider from Template
• Manually Import Slider Zip

• New Blank Slider

This option lets you design your section from scratch. You will have all the essential and advanced tools needed to create and customize your section.

 

• New Slider from Template

Slider Revolution & Sections offers 300+ design templates, including product, slider, and hero templates suitable for static and dynamic sections.  

After selecting a template, click on the Install Template (+) button.

You’ll then be redirected to the Slider Revolution and Section’s My Slider Page. Click on the Pencil Icon to open the editor.

On the Editor page, where you’ll have access to all the tools needed to design and customize your section. 

 

• Manually Import Slider Zip

If you have a section created using the Slider Revolution & Sections Shopify app or from Slider Revolution’s other platform (such as WordPress, Prestashop, etc.), you can upload the section’s ZIP file directly here.

 

3. Check Preview

After completing all customizations, click Save and then Preview. This lets you check for mistakes and make final adjustments to your section before publishing.

 

4. Publish the Slider

Copy the Shortcode of the template from the Slider Revolution’s Editor.

NB: Don’t forget to save the template before copying the Shortcode. 

Go to the Shopify Store dashboard. Navigate to Themes, and select Customize.

In the theme editor, navigate to the part where you want to add a new section.

Then click on the Add Section or Add Block option. 

Now, Click on Apps and choose any one from the following options:

• General Slider: To add General Section
• Dynamic Product Slider: To add Products featuring Section
• Countdown Slider: To add countdown related Section

Now Paste the shortcode on the right at the Slider Shortcode box and click the Save button. The block will now be visible in your store.

 

Output 

Difference Between Block and Section in Shopify

While both blocks and sections are essential components of Shopify’s theme architecture, they serve different purposes:

Feature	Block	Section
Definition	A block is an individual element within a section. Examples include text boxes, images, or buttons.	A section is a larger structural container that houses multiple blocks or groups of content.
Purpose	Focuses on granular content within a section.	Manages the broader layout and functionality of a webpage.
Flexibility	Can only exist within a section.	Can exist as a standalone entity and contains multiple blocks.
Customizability	Users configure individual settings like text alignment, colors, or size for each block.	Users manage general settings like section layout, visibility, and style.

 

Example

Imagine your Shopify landing page has a Testimonials Section. Within this section:

• Each testimonial (customer review, photo, or name) would be a block.
• The entire testimonials area, including its background, title, and arrangement, constitutes the section.

This distinction allows merchants to balance granular control (via blocks) with broad design choices (via sections).

The Importance of Sections in E-commerce Design

Shopify Sections are important for building a store that looks great and works well. They make it easy to create a site that is simple for customers to use. Here’s why they matter:

 

1. Ease of Customization

Shopify Sections make customizing your store simple. You don’t need coding skills to design your site. With drag-and-drop tools, you can easily add or move sections.

For example, you can add a Featured Product Section to show off your newest items. Or you can place a Testimonials Section to share customer reviews. This makes it easy to update your store as your business grows.

2. Enhanced User Experience

A well-organized store helps customers find what they need. Shopify Sections allow you to arrange your site in a way that is easy to navigate.

For instance, a Navigation Menu Section clearly shows your categories and a product grid section organizes your items. These sections make shopping easier, keeping customers happy and on your site longer.

3. Time-Saving

Shopify Sections save time when building or updating your store. You don’t need to hire a developer or learn how to code. Instead, you can use pre-designed sections to set up pages quickly.

For example, you can add a Promotional Banner Section to highlight a sale in minutes. With Shopify Sections, making changes is fast and hassle-free.

 

4. Optimized Mobile Responsiveness

Many people shop on their phones, so your store must look good on small screens. Shopify Sections adjust automatically to fit any device.

This means images, text, and buttons always appear correctly. You don’t have to worry about creating separate layouts for mobile and desktop. Your store will work well for all visitors, no matter how they browse.

 

5. Increased Conversion Rates

Shopify Sections can help you turn visitors into buyers. By placing key sections on your site, you can encourage customers to purchase.

For instance, a Product Recommendations Section shows items related to what shoppers view. A testimonial section builds trust with real customer feedback. Adding a Countdown Banner Section can create urgency and lead to quick sales. These features help guide shoppers to buy from your store.

Some Section Templates of Slider Revolution and Sections

Final Words

Shopify Sections allow store owners to build flexible, user-friendly stores with ease. Static sections ensure a consistent design across all pages, while dynamic sections let you tailor specific areas to your needs. This customizable component makes it simple to design your store exactly how you want, even without technical expertise.