TABLE OF CONTENTS:

What are Shopify Custom Sections?

Section Groups

What are the types of Shopify custom theme sections?

How do Build Shopify custom theme sections?

5 Simple Steps to Create a Shopify Theme Section with Page Builder

Note: If you're pressed for time, many pre-designed themes are available on Shopify for you to choose from, such as Kalles, Unsen, Gecko, Oculus, etc.

Best Practices for Using Shopify Theme Sections

Wrap Up

Are you prepared to elevate your Shopify store? The initial impression is crucial, and the design of your online store significantly influences audience engagement. Enter Shopify Custom Sections – the key to shaping a visually appealing and exceptionally functional storefront.

In this in-depth guide, we'll delve into the process of crafting a remarkable Shopify Custom Section. Let's dive into the details!

What are Shopify Custom Sections?

Shopify Custom Sections are liquid files designed to create modular, customizable content modules for merchants. These sections incorporate blocks, empowering merchants to add, remove, and rearrange content within a section.

For instance, you can construct a versatile "Image with text" section that enables merchants to choose the image, set text, and determine display order. JSON templates or section groups dynamically integrate sections into pages, allowing merchants flexibility in customizing page layouts. Sections in JSON templates or section groups can support app blocks, permitting the inclusion of app content without altering theme code. Each JSON template or section group can render up to 25 sections, with each section accommodating up to 50 blocks.

Additionally, sections can be statically included, offering merchants in-context customization options for static content. By default, sections are accessible for any template or section group, but access can be restricted in the section schema for specific templates and groups.

The accompanying diagram illustrates the primary theme architecture components, with sections highlighted in blue and blocks highlighted in red.

Location: Section files are situated in the sections directory of the theme:

markdown

└── theme

    ...

    ├── templates

    ├── sections

    ...

Content:

Sections encompass three main types of content:

Main Content: HTML or liquid content for the section. Sections possess access to global objects, tags, and filters, along with section-specific objects like the section object (containing properties and setting values) and the block object (encompassing properties and setting values of a single section block).

        

Assets: Sections can bundle their JavaScript and stylesheet assets using liquid tags:

        {% javascript %}

        {% stylesheet %}

To learn more, refer to Section Assets.

  

Required: No.      

Schema: Sections support the section-specific {% schema %} Liquid tag, defining attributes and settings such as name, tag, class, limit, settings, blocks, app blocks, max_blocks, presets, defaults, locales, enabled_on, and disabled_on. To learn more, refer to Section Schema.

        

Required: Yes

Usage:

When working with sections, familiarize yourself with:

How to render a section.

    

How to integrate sections with the theme editor.

    

Support app blocks.

Render a section:

Sections can be rendered in various ways:

Reference the section in a JSON template or section group in a layout file.

    

Statically render the section using the section Liquid tag.

    

Use the Section Rendering API.

Tip: For rendering inside a template, use a JSON template for extensive customization options.

Statically render a section:

Caution: Avoid statically rendering sections when possible, as they can't be removed or reordered by merchants. Use the liquid section tag to include a section in a template.

Example:

liquid

/templates/customers/register.liquid

{% section 'featured-product' %}

Integrate sections with the theme editor:

When users customize sections through the theme editor, the HTML dynamically alters without reloading the entire page. Be mindful of JavaScript events emitted by the theme editor and ensure visibility when a section or block is selected.

Tip: Section files must define presets in their schema for theme editor support.

Support App Blocks:

App blocks enable developers to create blocks for merchants to add app content without editing theme code.

Required: No.

Section Groups

A section group is a JSON data file that compiles a list of sections and app blocks to be rendered, along with their associated settings. Merchants can manipulate sections within the section group, adding, removing, and reordering them in the theme editor.

You can integrate a reference to a section group in a layout file to incorporate section support in areas controlled by the layout, such as the header or footer.

The sections and app blocks referenced in a section group are rendered in the order specified by the order attribute, with no markup between the sections. Section groups can render up to 25 sections, and each section can have up to 50 blocks.

Section groups are composed of the same sections and app blocks referenced in templates, adhering to the same guidelines.

You can utilize section groups instead of static sections in layouts. Learn how to migrate from static sections to section groups.

Tip: In most themes, it's advisable to use section groups for the header and footer. If you create additional section groups for other areas of the theme, such as a navigation sidebar, then name the section group to reflect its intended purpose.

Location

Section group files are located in the sections directory of the theme:

plaintext

└─ theme

    ...

    ├─ layout

    │  └─ theme.liquid

    ├─ sections

    │  ├─ footer-group.json

    │  ├─ header.liquid

    │  ├─ header-group.json

    │  └─ ...

    ...

Schema

Section groups must be valid JSON files. The root should be an object with the following attributes:

Type (string, yes):

The type of section group.

Accepted values: header, footer, aside, A custom type (custom.<name>).

Name (string, yes):

A name for the section group.

Maximum length: 50 characters.

Sections (object, yes):

An object using section IDs as keys and section data as values. Duplicate IDs within the template aren't allowed.

Order (array, yes):

An array of section IDs is listed in the order they should be rendered. Duplicate IDs aren't allowed.

Example

{

  "type": "header",

  "name": "Header Group",

  "sections": {

    "header": {

      "type": "header",

      "settings": {}

    }

  },

  "order": ["header"]

}

Section Data

The section groups' sections attribute contains the data for the sections that the section group will render. These can be either theme sections or app sections. Each section must have a unique ID within the section group.

The format of the section data is outlined as follows:

Sections: {

  <SectionID>: {

    "type": <SectionType>,

    "disabled": <SectionDisabled>,

    "settings": {

      <SettingID>: <SettingValue>

    },

    "blocks": {

      <BlockID>: {

        "type": <BlockType>,

        "settings": {

          <SettingID>: <SettingValue>

        }

      }

    },

    "block_order": <BlockOrder>

  }

}

For example, the following section group renders the quick-links and newsletter-signup section files:

{

  "type": "footer",

  "name": "Footer group",

  "sections": {

    "quick-links": {

      "type": "quick-links",

      "settings": {}

    },

    "newsletter-signup": {

      "type": "newsletter-signup",

      "settings": {}

    }

  },

  "order": ["newsletter-signup", "quick-links"]

}

Caution: Any sections included in a section group that aren't app sections must exist in the theme. If a section doesn't exist and is referenced in a section group, it results in an error.

Usage

When working with section groups, familiarize yourself with the process of including a section group in a layout and considerations for using both section groups and static sections in a layout.

You can optionally use section groups to render your template content.

Contextual Section Groups

When a merchant adapts a section group for a specific buyer context, a new contextual section group file is created. The file takes the name of the context in the following format: 

header-group.context.<context-string>.json

A contextual section group file includes the overrides made to the section group for context. The context and parent file are defined at the top of the template. The context value can contain either "market": "market handle" or "b2b": true. For example, the following code contextualizes the announcement bar section for the market handle:

{

  "context": {

    "market": "ca"

  },

  "parent": "header-group.json",

  "sections": {

    "announcement-bar": {

      "blocks": {

        "announcement-bar-one": {

          "settings": {

            "text": "Free shipping for Canada!"

          }

        }

      },

      "settings": {

        "change_slides_speed": 5

      }

    }

  }

}

Include a Section Group in a Layout File

Use the sections Liquid tag to render section groups as part of the theme's layout content. Place the section tag where you want to render it in the layout.

The sections Liquid tag uses the following syntax, where <filename> is the name of the section group without its file extension:

liquid

{% sections '<filename>' %}

For example, if you have a /sections/header-group.json file that contains your theme's header content, such as the header section and announcement bar section, then you might want to include that section group in the theme. liquid so that the header section group is rendered on all pages that use that layout:

liquid

{% sections 'header-group' %}

Static Section and Section Group Coexistence

Avoid using both section groups and static sections in the same layout file. If you need to use both, identify which sections are static in the section name.

What are the types of Shopify custom theme sections?

Shopify Custom Theme Sections offer a diverse array of options to shape your online store's narrative. While specific sections can differ between themes, several commonly used and highly adaptable sections provide a versatile canvas for expressing your brand. Explore these foundational Shopify theme sections to design your store with precision:

Header and Footer: The anchor points of your online store are present on every page, featuring crucial elements like your logo, navigation menus, and social media icons. They establish a consistent and navigable framework for visitors.

Slideshow: A dynamic display of multiple images rotating seamlessly, often utilized on the homepage to highlight promotions, showcase products, or convey brand messaging with flair.

Featured Product: Spotlight a specific product or collection, displaying images, pricing, and an inviting "add-to-cart" button for easy exploration and purchase.

Image with Text: Combine images with compelling headings, subheadings, and descriptive text to visually convey information and captivate your audience.

Blog Posts: Invite visitors to explore your store's knowledge world by displaying recent blog articles on the homepage, keeping them engaged with your brand's insights.

Testimonials: Establish trust in e-commerce by showcasing customer reviews and testimonials, building credibility, and reassuring potential buyers about your product or service quality.

Newsletter Signup: Encourage visitors to join your newsletter, providing updates on your store's latest news, promotions, and offerings. This section fosters lasting connections with your audience.

Understanding these foundational Shopify theme sections empowers you to craft a compelling shopping experience, even as specific sections may vary based on your chosen theme.

How to Build Shopify custom theme sections?

Step 1: Access the Theme Editor

• Begin your customization journey by logging into your Shopify admin dashboard. Head to the "Online Store" section and select "Themes."

Shopify Theme Sections

• Upon entering the Themes page, you'll encounter a list of your installed themes. To initiate customization for a specific theme, click the "Customize" button associated with it.

Shopify Theme Sections

• This action seamlessly launches the robust Theme Editor, providing you with the tools to transform your store's appearance.

Step 2: Select a Section

• Within the theme editor, sections are thoughtfully organized in a sidebar on the left side of your screen. To commence customization for a particular section, a simple click on the desired section is all it takes.
• This action opens the door to a plethora of customization options tailored to the selected section, empowering you to sculpt its appearance.

Step 3: Edit Section Content

• Once a section is selected, the right sidebar springs to life, revealing an array of customization options specific to the chosen section.
• Dive into the customization process by editing content, adjusting settings, and refining the design to harmonize with your brand's vision. Depending on the section, you may find options to tweak colors, fonts, or layout settings.

Step 4: Add a New Section

• Explore the left sidebar of the theme editor, where an "Add section" button awaits your attention.
• Clicking this button unveils a menu allowing you to choose the type of section you wish to include. Once your selection is made, click "Add" to seamlessly integrate the new section into your theme.

Step 5: Reorder Sections

• For a personalized layout, effortlessly change the order of sections on your store's page. Click and drag the desired section in the left sidebar.
• Drop the section precisely where you envision it fitting best, tailoring the visual flow of your store to perfection.

Step 6: Remove a Section

To seamlessly declutter your design, follow these steps to remove a section:

1. Navigate to the left sidebar and pinpoint the section you wish to remove.
2. Click on the section, and at the bottom of the right sidebar, locate the "Remove section" button.
3. Exercise caution, as selecting this option permanently deletes the section's content. Ensure any vital information is saved beforehand to avoid loss.

Shopify Theme Sections

Step 7: Preview and Save Changes

Immerse yourself in the real-time evolution of your store's aesthetics with these next steps:

1. While customizing, periodically preview your changes to witness their impact instantly.
2. Once you are content with the revamped look and feel of your theme sections, head to the top right corner of the theme editor.
3. Click on "Save" to apply the meticulously crafted changes to your store, unveiling your updated design seamlessly.

Embark on a journey of customization, balancing, removal, and enhancement, and witness your store transform with each deliberate adjustment.

5 Simple Steps to Create a Shopify Theme Section with Page Builder

EComposer: Landing Page Builder stands out as the preeminent page-building tool within the Shopify ecosystem. It empowers you to design a diverse range of web pages for your site, including eye-catching landing pages, dynamic homepages, and compelling product pages. The flexibility to personalize various templates without coding skills makes it a user-friendly choice, offering a simple drag-and-drop interface for precise element placement.

Using EComposer, crafting a theme section is a straightforward process that can be achieved in just five easy steps:

Step 1: Sign in to your Shopify account

• If you don't already own a Shopify store, sign up for Shopify for free.
• Log in to your online store using your registered email and password.

Step 2: Access EComposer Editor

• In the EComposer editor, effortlessly drag and drop elements that suit your needs.
• In this example, we'll create a basic homepage banner section, incorporating heading and title elements.

Step 3: Customize Your Theme Section

• With all elements in place, EComposer provides options to edit your content, design, and enhance images. It acts as a virtual design studio at your fingertips.

Step 4: Save and Publish

• Once satisfied with your customization, in the right corner of the edit page, you'll find options to save and publish.

Insert the Theme Section into Your Theme

• Go to the Shopify Dashboard, click on "Online Store," and choose "Theme."

Shopify Theme Sections

• Select the theme where you want to insert the section and click "Customize."

Shopify Theme Sections

• In the Shopify editor, choose "Add Section."

Shopify Theme Sections

• Finally, select the section you created with EComposer.

Shopify Theme Sections

• Congratulations! You've successfully added the theme section to your theme.

Note: If you're pressed for time, many pre-designed themes are available on Shopify for you to choose from, such as Kalles, Unsen, Gecko, Oculus, etc.

Best Practices for Using Shopify Theme Sections

Shopify Theme Sections

Harnessing the full potential of Shopify theme sections involves following best practices and distinguishing between an average store and a thriving e-commerce powerhouse. Here are expert tips to maximize the effectiveness of these versatile tools:

Keep it simple:

• Less can be more in online retail. Avoid overwhelming your store with an excess of sections.
• Focus on critical content and features to captivate customers and drive sales.
• A clean, uncluttered design is visually appealing and easier for visitors to navigate.

Consistent Branding:

• Maintain a consistent look and feel across your entire store.
• Use the same color scheme, fonts, and design elements to reinforce brand identity.
• A cohesive brand presentation builds trust and recognition.

Optimize for mobile:

• Ensure theme sections are responsive and look exceptional on all screen sizes.
• A seamless mobile experience is critical for capturing the growing number of mobile shoppers.

Regular Updates:

• Keep the store fresh and engaging with periodic updates to theme sections.
• Introduce new content, promotions, or product highlights to attract repeat visitors.

Test and iterate:

• Experiment with different section layouts and content to discover what resonates best.
• Use analytics to measure the impact of changes and make data-driven decisions.
• Continual refinement based on real data is the path to optimizing your store.

By adhering to these best practices, you'll unlock the full potential of Shopify theme sections, creating an online shopping experience that dazzles customers and drives growth for your e-commerce business.

Wrap Up

From understanding theme sections to mastering customization and optimizing your store's layout, you're well-equipped to create a shopping experience that leaves a lasting impression.

Remember, the canvas is yours, and the tools are available. Whether highlighting featured products, showcasing customer testimonials, or crafting engaging blog posts, Shopify Theme Sections offer the flexibility to shape your store's narrative your way.

Contact us 

At Webinopoly, we specialize in propelling growth-stage startups to unicorn status, creating cutting-edge tools for developers, and producing open-source products. If you're ready to expedite your path to success, reach out to us!