Building and Managing Custom Sections with Shopify Online Store 2.0

With Online Store 2.0, Shopify has completely transformed the way developers and merchants create and manage their eCommerce stores. Thanks to dynamic content and flexible sections, building highly customizable pages is a cakewalk for store owners even without proper coding knowledge.

Want to know how to build and manage custom sections in Shopify Online Store 2.0? Stay tuned as we explain the entire process step-by-step.

Understanding Shopify’s Online Store 2.0 Sections

Shopify OS 2.0 sections include settings schema, Liquid template file, and optional CSS and JavaScript. Employing these reusable components, merchants can develop customizable and highly dynamic layouts across their stores.

Previously, merchants were limited to editing theme code manually to customize their order page as the pre-OS 2.0 sections were restricted only to the homepage. But with the Online Store 2.0, you can add sections to any page, which leads to more flexibility and ease of managing the store.

What Are Sections?

Sections are the modular components of a theme in Shopify. Merchants can create unique layouts by customizing and reorganizing these components. These sections include settings and content for specific areas of a store like:

• Promotional banners
• Product showcases
• Image galleries
• Testimonials
• Call-to-action blocks

With OS 2.0, Shopify allows you to add these sections to any page, instead of just the homepage. This means, you, as a store owner, can build way more engaging and flexible storefronts than ever!

Benefits of Using Custom Sections

There are various ways a custom section can enhance your Shopify store design and usability.

Design Flexibility

It offers merchants the ability to customize the layout, content, and branding of their stores without having to modify the entire theme.

Easy Updates

The design updates are simpler than ever with Shopify OS 2.0 as it ensures that sections can be modified without an impact on the rest of the site.

Dynamic Content

Merchants can use Shopify Theme Editor to directly edit sections, which leads to real-time modifications minus the complex coding.

Improved Performance

By reducing unnecessary code bloat, custom sections also contribute to a much-improved website performance and page loading time.

How to Create a Custom Section in Shopify OS 2.0

You can build and manage custom sections in Shopify in two different ways:

• Using the Theme Editor (No Coding Required)
• Using the Code Editor (For Advanced Customization)

1. Creating a Custom Section in Shopify OS 2.0 Using the Theme Editor

For those who don’t have extensive coding expertise, Shopify’s Theme Editor can be one of the best ways to add sections or make basic customizations via a visual interface.

Step 1: Go to the Theme Editor

• Open the Shopify Admin Panel
• Navigate to “Online Store” > “Themes.”
• Click “Customize” on your active theme.

Step 2: Add a Section

• Create a new section or browse the available ones by clicking on “Add Section.”

Step 3: Customize the Section

• You are now free to modify content, colors, layout, and images.

Using Theme Editor is more user-friendly and faster while being the best solution for merchants who don’t have enough coding knowledge.

2. Creating a Custom Section in Shopify OS 2.0 Using the Code Editor

While Shopify’s Theme Editor can get basic customizations done, the Code Editor still remains relevant as it offers advanced modifications. Developers get complete control over design as they can use Liquid, HTML, and CSS to create custom sections.

Step 1: Access the Code Editor

• Navigate to “Online Store” > “Themes” > “Actions” > “Edit Code.”

Step 2: Create a New Section

• Click on “Add a new section” located inside the “Sections” folder.
• Give a name to the section.
• A new Liquid file will be generated by Shopify with the following boilerplate code:

Step 3: Add HTML and Liquid Code

• Customize the section file to define content and structure using HTML and Liquid.

Advanced Customizations

You can make even more advanced customizations and enhance the sections by using blocks and adding multiple settings.

Adding Multiple Settings

You can include settings for layout, buttons, text, and image choice for better flexibility.

Using Blocks for More Customization

You can also use blocks that can enable you to add multiple different configurable components inside a section. Here’s a code sample:

The blocks can be incredibly useful for various sections. For instance, you can include separate blocks for various reviews (with their individual content) for a testimonial section.

Adding the Custom Section to a Page

Once you are done creating the custom section, it’s time to add it to your Shopify page. Here’s how to do it:

1. Navigate to “Online Store” > “Themes” > “Customize.”
2. Choose the page where you want to include the section.
3. Click “Add Section” and choose your custom section.
4. Modify the settings and save your changes.
5. The section is live in your store.

Managing Custom Sections in Shopify OS 2.0

You need to focus on the proper management of the custom sections to get a user-friendly and dynamic store. 

• Reordering Sections: Make sure that the most important content is properly displayed. To do that, use the drag-and-drop function in the Theme Editor to reorganize sections.
• Duplicating and Modifying Sections: To reuse the configuration of a section, visit the Theme Editor and hover over the section you want to replicate. Now, click the duplicate icon and customize as required. This ensures consistency in design elements across different pages.
• Hiding or Removing Sections: If you want to remove or hide a section without deleting it, go to the section in the Theme Editor and click the eye icon. This will temporarily remove it from display. You can select the delete option to permanently remove it from your store.

Troubleshooting Common Issues

While Shopify OS 2.0 custom sections are exceptionally intuitive to run and grow your store, they are not without issues. There are a number of errors and problems faced by merchants while dealing with custom sections. Here are some of the most common problems and their respective solutions:

Section Not Appearing in the Theme Editor

• Double-check whether you have registered the section with a preset. If not, register first.
• Clear the browser cache and refresh the editor to see the effect.

Styling Issues

• Make sure that there are no linking issues with the CSS file.
• Use Shopify’s built-in theme settings to ensure layout consistency.

JavaScript Not Working

• Check the assets folder to verify that the script is properly included.
• Find the console errors by navigating to Developer Tools (F12) > Console in your browser.

Conclusion

By introducing customizable sections on every single page, Shopify’s Online Store 2.0 has brought a revolution in the way Shopify stores are designed and managed. From the easy-to-use Theme Editor to the advanced Code Editor, creating and maintaining custom sections in Shopify stores has never been easier before. Thanks to these tools, merchants can deliver highly engaging and personalized shopping experiences to their buyers. Use Shopify’s OS 2.0 to deliver accelerated user satisfaction, leading to better branding, improved sales, and increased conversion rates.