How To Do Section Customization on Your Shopify Store

Shopify sections give merchants control over page layouts without requiring a developer for every content change. A well-built section can let a store owner replace an image, update a heading, change colours, rearrange content, or launch a campaign directly from the theme editor.

Sections are equally useful for developers. Instead of hard-coding content into templates, developers can create reusable Liquid components with carefully selected customization options. This keeps the storefront flexible without allowing every design decision to be changed accidentally.

This guide covers both approaches: customizing the sections already included in your theme and creating a custom image-banner section with Liquid and schema.

What Are Shopify Sections?

Shopify sections are Liquid files stored in a theme’s sections directory. They represent reusable areas of a storefront, such as:

• Image banners
• Featured collections
• Product recommendations
• Testimonials
• Newsletter forms
• Image-with-text layouts
• Blog-post grids
• Announcement bars

A section can contain HTML, Liquid, CSS, JavaScript, settings, and blocks.

For example, an image-banner section may define the layout in Liquid while its schema gives merchants controls for the image, heading, button, overlay, alignment, and height.

The merchant changes these settings through Shopify’s visual theme editor. Shopify stores the selected values and makes them available through the Liquid section object.

{{ section.settings.heading }}

This architecture separates the section’s implementation from its editable content.

Sections, Blocks, Templates, and Theme Settings

These Shopify concepts serve different purposes.

A section should contain settings that apply to the complete component. Repeatable content normally belongs in blocks.

For example, a testimonial section might use:

• A section setting for the heading
• A section setting for the background colour
• One block for each customer testimonial
• Block settings for the quote, name, and image

What Can Merchants Customize Without Coding?

Available options depend on the theme and its version, but compatible Shopify themes generally allow merchants to:

• Add sections to templates
• Remove or hide sections
• Reorder sections
• Duplicate sections
• Add and reorder blocks
• Change text, images, links, colours, and layouts
• Connect compatible settings to dynamic sources
• Add compatible app blocks
• Create alternative templates
• Preview changes for different devices and markets

Shopify currently allows up to 25 sections in a JSON template or section group. The practical number of blocks available depends on the theme, section schema, and block source.

How to Customize an Existing Shopify Section

If the theme already contains the required section, begin with the visual editor.

Step 1: Duplicate the Theme

Before making substantial changes:

1. From Shopify admin, go to Online Store > Themes.
2. Find the theme you want to modify.
3. Open its actions menu.
4. Select Duplicate.
5. Give the duplicate a recognizable name.

A duplicated theme provides a safe environment for testing. It should not be treated as a permanent version-control system, but it is useful before a focused customization.

For ongoing development involving several people, use Git or Shopify’s GitHub integration to maintain a more reliable history.

Step 2: Open the Theme Editor

1. Go to Online Store > Themes.
2. Find the duplicated theme.
3. Click Edit theme or Customize, depending on the interface displayed.
4. Use the template selector at the top to choose the page you want to edit.

The homepage loads by default. You can also select product, collection, page, blog, article, cart, or other available templates.

Be certain that you are editing the intended template. Changes to the default product template can affect every product assigned to it.

Step 3: Add a Section

1. Click Add section in the template area.
2. Search for the required section.
3. Select it.
4. Drag it to the intended position.
5. Open its settings and add the content.
6. Save the changes.

The sections available in the picker are determined by the theme, installed applications, and template restrictions defined by developers.

Step 4: Customize the Section

Depending on the section, you may be able to change:

• Images or videos
• Heading and body content
• Button text and destination
• Content alignment
• Colour scheme
• Desktop and mobile layout
• Section width
• Spacing
• Animation
• Number of columns
• Product or collection source

Preview every material change on desktop and mobile.

Step 5: Add or Reorder Blocks

If the section supports blocks:

1. Open the section.
2. Click Add block.
3. Select a supported block.
4. Configure its content.
5. Drag the block to change its position.
6. Save.

Blocks can be fixed to a particular section or supplied by the theme and installed applications. A block can be moved only to locations that accept its type.

Step 6: Preview Before Publishing

Review:

• Desktop layout
• Mobile layout
• Text wrapping
• Image cropping
• Button links
• Product and collection data
• Languages
• Market-specific content
• App blocks
• Accessibility
• Page performance

Publish the duplicated theme only after completing the required checks.

When Do You Need a Custom Section?

A custom section becomes useful when:

• The theme does not provide the required layout.
• Existing settings do not offer enough control.
• The same component will be reused across templates.
• Merchants need to update content without editing code.
• An app would add unnecessary cost or scripts.
• The design requires specific responsive behaviour.
• The store needs a component aligned with its design system.

Do not create a custom section when a small adjustment to an existing section would achieve the same outcome. Duplicating similar components increases future maintenance.

Anatomy of a Custom Shopify Section

A custom section normally contains four layers.

1. Liquid and HTML

This defines the content and structure rendered on the storefront.

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

2. CSS

This controls the presentation and responsive layout.

Styles should be scoped to the section to prevent them from affecting unrelated components.

3. JavaScript

JavaScript is required only when the section contains interactive behaviour such as a slider, tabs, modal, or video controls.

A static banner does not need JavaScript.

4. Schema

The {% schema %} block contains valid JSON that defines how the section appears and behaves in the theme editor.

Schema can define:

• Section name
• Settings
• Blocks
• App-block support
• Block limits
• Presets
• Template availability
• Default configuration

Each section can contain only one schema block.

How to Create a Custom Image-Banner Section

The following example creates a reusable image banner with:

• Responsive image delivery
• Optional overlay
• Heading and text
• Button
• Content positioning
• Desktop and mobile height controls
• Colour controls
• An empty-state placeholder
• No unnecessary JavaScript

Step 1: Open the Theme Code Editor

1. Go to Online Store > Themes.
2. Find the duplicated theme.
3. Open the actions menu.
4. Click Edit code.
5. Open the sections directory.
6. Click Add a new section.
7. Name it custom-image-banner.

Use lowercase filenames with hyphens:

custom-image-banner.liquid

Step 2: Add the Complete Section Code

Paste the following code into the new section file:

{% liquid
  assign overlay_alpha = section.settings.overlay_opacity | times: 0.01
  assign image_loading = 'lazy'

  if section.settings.eager_load
    assign image_loading = 'eager'
  endif
%}

<section
  id="CustomBanner-{{ section.id }}"
  class="
    custom-banner
    custom-banner--horizontal-{{ section.settings.horizontal_position }}
    custom-banner--vertical-{{ section.settings.vertical_position }}
    custom-banner--text-{{ section.settings.text_alignment }}
  "
>
  <div class="custom-banner__media">
    {% if section.settings.image != blank %}
      {{
        section.settings.image
        | image_url: width: 2400
        | image_tag:
          widths: '550, 750, 1100, 1500, 2000, 2400',
          sizes: '100vw',
          loading: image_loading,
          class: 'custom-banner__image'
      }}
    {% else %}
      {{
        'lifestyle-1'
        | placeholder_svg_tag:
          'custom-banner__image custom-banner__placeholder'
      }}
    {% endif %}
  </div>

  {% if section.settings.show_overlay %}
    <div
      class="custom-banner__overlay"
      style="
        background-color:
        {{ section.settings.overlay_color | color_modify: 'alpha', overlay_alpha }};
      "
      aria-hidden="true"
    ></div>
  {% endif %}

  {% if section.settings.heading != blank
    or section.settings.text != blank
    or section.settings.button_label != blank
  %}
    <div class="custom-banner__content page-width">
      <div class="custom-banner__content-inner">
        {% if section.settings.heading != blank %}
          <h2 class="custom-banner__heading">
            {{ section.settings.heading }}
          </h2>
        {% endif %}

        {% if section.settings.text != blank %}
          <div class="custom-banner__text rte">
            {{ section.settings.text }}
          </div>
        {% endif %}

        {% if section.settings.button_label != blank
          and section.settings.button_link != blank
        %}
          <a
            class="custom-banner__button"
            href="{{ section.settings.button_link }}"
          >
            {{ section.settings.button_label | escape }}
          </a>
        {% endif %}
      </div>
    </div>
  {% endif %}
</section>

{% style %}
  #CustomBanner-{{ section.id }} {
    position: relative;
    display: flex;
    min-height: {{ section.settings.desktop_height }}px;
    overflow: hidden;
    color: {{ section.settings.text_color }};
    background: #eeeeee;
  }

  #CustomBanner-{{ section.id }} .custom-banner__media,
  #CustomBanner-{{ section.id }} .custom-banner__overlay {
    position: absolute;
    inset: 0;
  }

  #CustomBanner-{{ section.id }} .custom-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: {{ section.settings.image_fit }};
  }

  #CustomBanner-{{ section.id }} .custom-banner__placeholder {
    background: #dddddd;
  }

  #CustomBanner-{{ section.id }} .custom-banner__overlay {
    z-index: 1;
  }

  #CustomBanner-{{ section.id }} .custom-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #CustomBanner-{{ section.id }} .custom-banner__content-inner {
    width: min(100%, {{ section.settings.content_width }}px);
    padding: 28px;
  }

  #CustomBanner-{{ section.id }} .custom-banner__heading {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: 1.05;
  }

  #CustomBanner-{{ section.id }} .custom-banner__text {
    margin-bottom: 20px;
    color: inherit;
  }

  #CustomBanner-{{ section.id }} .custom-banner__button {
    display: inline-flex;
    min-height: 44px;
    padding: 12px 22px;
    align-items: center;
    justify-content: center;
    color: {{ section.settings.button_text_color }};
    background: {{ section.settings.button_color }};
    text-decoration: none;
  }

  #CustomBanner-{{ section.id }} .custom-banner__button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }

  #CustomBanner-{{ section.id }}.custom-banner--horizontal-left
    .custom-banner__content {
    justify-content: flex-start;
  }

  #CustomBanner-{{ section.id }}.custom-banner--horizontal-center
    .custom-banner__content {
    justify-content: center;
  }

  #CustomBanner-{{ section.id }}.custom-banner--horizontal-right
    .custom-banner__content {
    justify-content: flex-end;
  }

  #CustomBanner-{{ section.id }}.custom-banner--vertical-top
    .custom-banner__content {
    align-items: flex-start;
  }

  #CustomBanner-{{ section.id }}.custom-banner--vertical-center
    .custom-banner__content {
    align-items: center;
  }

  #CustomBanner-{{ section.id }}.custom-banner--vertical-bottom
    .custom-banner__content {
    align-items: flex-end;
  }

  #CustomBanner-{{ section.id }}.custom-banner--text-left
    .custom-banner__content-inner {
    text-align: left;
  }

  #CustomBanner-{{ section.id }}.custom-banner--text-center
    .custom-banner__content-inner {
    text-align: center;
  }

  #CustomBanner-{{ section.id }}.custom-banner--text-right
    .custom-banner__content-inner {
    text-align: right;
  }

  @media screen and (max-width: 749px) {
    #CustomBanner-{{ section.id }} {
      min-height: {{ section.settings.mobile_height }}px;
    }

    #CustomBanner-{{ section.id }} .custom-banner__content {
      padding-top: 24px;
      padding-bottom: 24px;
    }

    #CustomBanner-{{ section.id }} .custom-banner__content-inner {
      padding: 20px;
    }
  }
{% endstyle %}

{% schema %}
{
  "name": "Custom image banner",
  "tag": "section",
  "class": "section-custom-image-banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "image_fit",
      "label": "Image fit",
      "options": [
        {
          "value": "cover",
          "label": "Cover"
        },
        {
          "value": "contain",
          "label": "Contain"
        }
      ],
      "default": "cover"
    },
    {
      "type": "checkbox",
      "id": "eager_load",
      "label": "Prioritize image loading",
      "info": "Enable only when the banner is the first major image on the page.",
      "default": false
    },
    {
      "type": "range",
      "id": "desktop_height",
      "label": "Desktop minimum height",
      "min": 300,
      "max": 800,
      "step": 20,
      "unit": "px",
      "default": 560
    },
    {
      "type": "range",
      "id": "mobile_height",
      "label": "Mobile minimum height",
      "min": 280,
      "max": 700,
      "step": 20,
      "unit": "px",
      "default": 460
    },
    {
      "type": "header",
      "content": "Overlay"
    },
    {
      "type": "checkbox",
      "id": "show_overlay",
      "label": "Show overlay",
      "default": true
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay colour",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 80,
      "step": 5,
      "unit": "%",
      "default": 30
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "Tell your brand story"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>Introduce a collection, campaign, or important product.</p>"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text colour",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text",
      "default": "#111111"
    },
    {
      "type": "range",
      "id": "content_width",
      "label": "Content width",
      "min": 320,
      "max": 800,
      "step": 20,
      "unit": "px",
      "default": 560
    },
    {
      "type": "select",
      "id": "horizontal_position",
      "label": "Horizontal position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "vertical_position",
      "label": "Vertical position",
      "options": [
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ],
      "default": "center"
    },
    {
      "type": "text_alignment",
      "id": "text_alignment",
      "label": "Text alignment",
      "default": "center"
    }
  ],
  "presets": [
    {
      "name": "Custom image banner"
    }
  ]
}
{% endschema %}

Why This Implementation Is Safer

The example improves several common section-development problems.

It Uses Responsive Shopify Images

The older img_url filter has been replaced with the more flexible image_url and image_tag approach.

The widths and sizes arguments allow the browser to select an appropriate image instead of downloading the same large file on every device.

It Does Not Output Empty Image Dimensions

An image should have real dimensions or use Shopify’s image helper output. Empty width and height attributes provide no useful layout information.

It Scopes CSS to the Section Instance

Every dynamically added section receives a unique section.id.

The CSS uses:

#CustomBanner-{{ section.id }}

This prevents one banner instance from changing another section with similar class names.

It Avoids Unnecessary JavaScript

The banner contains no interactive behaviour, so JavaScript would add complexity without creating value.

It Uses an h2 Instead of Automatically Adding an h1

A template should normally have one clear primary heading. Because merchants may add several banner sections to the same page, automatically using h1 could create an unclear heading structure.

It Includes a Preset

The preset makes the section available in the theme editor’s Add section picker.

Without a preset, a section generally needs to be added manually to a JSON template and cannot be managed in the same flexible way.

It Gives Merchants Bounded Controls

The height, opacity, width, and alignment controls use predefined ranges and options. This provides flexibility without allowing arbitrary values that could easily break the layout.

Step 3: Save and Add the Section

After saving the file:

1. Return to Online Store > Themes.
2. Open the duplicated theme in the theme editor.
3. Select the required page template.
4. Click Add section.
5. Search for Custom image banner.
6. Add it to the template.
7. Drag it to the required position.
8. Configure the image, content, button, colours, and alignment.
9. Save.

The section can be added to any compatible JSON template unless its schema restricts availability.

How Section Schema Works

The schema converts developer-defined settings into theme-editor controls.

A simple setting looks like this:

{
  "type": "text",
  "id": "heading",
  "label": "Heading",
  "default": "Welcome to our store"
}

Each field has a specific purpose:

The value can then be accessed with:

{{ section.settings.heading }}

All setting IDs within the section must be unique.

Schema must contain valid JSON. It cannot contain comments, trailing commas, Liquid output, or multiple {% schema %} blocks.

Common Section Setting Types

Useful input types include:

text
textarea
inline_richtext
richtext
image_picker
video
video_url
url
product
collection
blog
article
page
checkbox
range
select
radio
color
color_background
text_alignment
font_picker
link_list
liquid
header
paragraph

Choose the most specific input type available.

For example, use a url input for a link rather than a general text field. Shopify can then provide the appropriate resource picker and validate the value more effectively.

When to Use Blocks

Blocks are useful when merchants need to add, remove, or reorder repeated items.

A simple feature-grid schema might define blocks like this:

{% for block in section.blocks %}
  <article {{ block.shopify_attributes }}>
    {% if block.settings.heading != blank %}
      <h3>{{ block.settings.heading }}</h3>
    {% endif %}

    {% if block.settings.text != blank %}
      <div>{{ block.settings.text }}</div>
    {% endif %}
  </article>
{% endfor %}

{% schema %}
{
  "name": "Feature grid",
  "max_blocks": 6,
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Feature"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Describe this feature.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feature grid",
      "blocks": [
        {
          "type": "feature"
        },
        {
          "type": "feature"
        },
        {
          "type": "feature"
        }
      ]
    }
  ]
}
{% endschema %}

The block.shopify_attributes output helps Shopify’s theme editor identify and select individual blocks correctly.

Supporting Shopify App Blocks

Compatible sections can allow merchants to insert content supplied by installed applications.

Add the app block type to the section schema:

"blocks": [
  {
    "type": "@app"
  }
]

Render the app blocks inside the section:

{% for block in section.blocks %}
  {% render block %}
{% endfor %}

App-block support is useful for product reviews, size charts, wish lists, subscriptions, and other app-provided functionality.

Do not add app-block support unless the layout has an appropriate location for app content.

Dynamic Sources, Metafields, and Metaobjects

Many theme settings can connect to dynamic sources instead of using fixed content.

For example, a product-page section may connect to:

• A product subtitle metafield
• A material metafield
• A size-guide page
• A related metaobject
• A market-specific value

This makes one reusable section respond to the resource being viewed.

A product-information section can show a different care guide for each product without creating a separate template for every item.

Dynamic sources are particularly useful when content belongs to the product, collection, or metaobject rather than to the visual template.

Section Design Best Practices

Keep Merchant Controls Intentional

Adding more settings does not automatically make a section better.

A section with separate controls for every margin, font size, border, shadow, and breakpoint becomes difficult to understand and can undermine design consistency.

Expose controls that merchants need frequently. Keep structural design decisions inside the theme system.

Use Existing Theme Design Tokens

Where possible, reuse the theme’s:

• Page-width classes
• Colour schemes
• Button classes
• Spacing variables
• Typography settings
• Breakpoints

The example uses custom colours to remain understandable across themes, but a production section should integrate with the active theme’s design system whenever possible.

Separate Reusable Logic

If several sections require the same markup, render a snippet instead of copying the complete implementation.

{% render 'responsive-image', image: section.settings.image %}

This reduces maintenance and keeps bug fixes consistent.

Keep JavaScript Reinitializable

Shopify’s theme editor can add or rerender section HTML without reloading the complete page. JavaScript that runs only on DOMContentLoaded might not initialize after a merchant adds or changes a section.

Interactive sections should respond to Shopify theme-editor events and avoid initializing the same element repeatedly.

Include Empty States

A newly added section should show a useful placeholder when no image or content has been selected. Otherwise, merchants may add the section and see an unexplained blank area.

Use Descriptive Setting Labels

Prefer:

Mobile minimum height

over:

Height 2

Clear labels reduce merchant mistakes and support requests.

Consider Translation

Text entered directly into a section setting is stored as content. Interface labels and reusable theme strings should follow Shopify’s locale architecture where appropriate.

Protect Accessibility

Custom sections should include:

• Logical heading levels
• Sufficient colour contrast
• Useful alternative text
• Keyboard-accessible controls
• Visible focus styles
• Proper buttons and links
• Reduced-motion support where animation exists
• Meaningful reading order

Visual flexibility should not make the storefront harder to use.

Performance Considerations

Custom sections can affect storefront performance when they introduce large media, duplicate CSS, app scripts, sliders, or unnecessary JavaScript.

Review:

• Image dimensions and responsive output
• Above-the-fold loading priority
• JavaScript execution
• Layout shifts
• Font usage
• Video behaviour
• Third-party app blocks
• Repeated inline styles
• Hidden content that still downloads resources

The example includes a setting to prioritize image loading. Enable it only when the banner is the first important image on the page. Several eagerly loaded banners would compete for bandwidth and could weaken Largest Contentful Paint.

For a section used frequently, move shared CSS into a theme asset instead of repeating a large style block for every instance.

Common Shopify Section Customization Mistakes

Editing the Published Theme Directly

A code error can immediately affect customers. Develop in a duplicate, development, or unpublished theme.

Using Invalid Schema JSON

Comments, curly quotation marks, duplicate IDs, missing commas, and trailing commas can prevent the section from saving.

Forgetting the Preset

Without a preset, the custom section might not appear in the Add section picker.

Hard-Coding Content

Text, images, products, and links that merchants need to change should normally be exposed through settings or dynamic sources.

Exposing Too Many Controls

Excessive options make the editor harder to use and allow individual sections to drift away from the store’s design system.

Using Deprecated Image Patterns

Prefer image_url and image_tag over older img_url examples. Responsive output helps browsers choose more appropriate image sizes.

Loading JavaScript for Static Content

A banner, text section, or basic grid may not need JavaScript. Additional scripts increase maintenance and can affect responsiveness.

Ignoring Theme-Editor Rerendering

Interactive code must continue working when Shopify adds, removes, or rerenders the section without a full page refresh.

Using a Heading Level Only for Its Appearance

Choose headings based on document structure. Control their appearance with CSS rather than selecting an incorrect heading level for visual size.

Forgetting Repeated Instances

A merchant may add the same section several times. IDs, JavaScript initialization, and CSS must work correctly for every instance.

Testing Checklist

Before publishing a custom section, test:

• Adding the section
• Removing and re-adding it
• Duplicating it
• Reordering it
• Adding multiple instances
• Empty settings
• Long headings and button labels
• Missing images
• Mobile and desktop layouts
• Keyboard navigation
• Colour contrast
• Different product or page templates
• Dynamic sources
• App blocks
• Multiple languages
• Shopify Markets
• Theme-editor preview behaviour
• Storefront performance
• Theme Check output

Testing only the ideal configuration can leave merchants with a section that breaks as soon as content changes.

Benefits of Shopify Section Customization

Merchant Independence

Merchants can update campaigns, images, copy, products, and links without requesting a code deployment for every change.

Reusable Design

One well-designed section can be used across several templates while preserving a consistent visual structure.

Faster Campaign Updates

Teams can prepare seasonal banners, collection launches, and landing pages using existing components rather than rebuilding layouts.

Safer Store Management

Bounded schema controls are safer than asking non-technical users to edit Liquid, HTML, or CSS.

Easier Maintenance

A reusable component creates one implementation to test and improve instead of several copied versions spread across templates.

Better Developer–Merchant Collaboration

Developers control the component’s architecture, performance, and accessibility, while merchants control the content and approved visual options.

Frequently Asked Questions

What are sections in Shopify?

Shopify sections are reusable Liquid components that form configurable areas of a storefront. Their schema lets merchants edit content, design settings, and blocks through the visual theme editor without modifying code.

Can I customize Shopify sections without coding?

Yes. Existing sections can usually be added, reordered, duplicated, hidden, and configured through the theme editor. Creating a new section or changing its available controls generally requires Liquid, HTML, CSS, and JSON.

What is the difference between a section and a block?

A section is a complete page component, such as a testimonial grid. Blocks are smaller items inside compatible sections, such as individual testimonials that merchants can add, remove, customize, and reorder.

Why does my custom section not appear in the theme editor?

The section might have invalid schema, lack a preset, be disabled for the selected template, or belong to an incompatible theme architecture. Check the code editor and Shopify Theme Check for errors.

Can a Shopify section be reused on different pages?

Yes. A section with a preset can usually be added to compatible JSON templates. Each instance stores separate settings, allowing the same component to display different content on different pages.

Do Shopify sections support app blocks?

Yes. Compatible sections can declare support for @app blocks in their schema and render installed app content. The application, section, and selected page type must all support the intended placement.

How many sections can a Shopify template contain?

Shopify currently allows up to 25 sections in a JSON template or section group. Block limits depend on Shopify’s platform limits and the restrictions defined by the theme or section developer.

Should custom section CSS stay inside the Liquid file?

Small, section-specific styles can remain with the section. Larger or widely reused styles are usually better placed in theme assets to reduce repeated output and simplify maintenance across multiple section instances.

Conclusion

Shopify section customization creates a useful balance between merchant flexibility and developer control.

Store owners can use existing sections to update layouts and content without writing code. When the theme cannot support a required experience, developers can build reusable Liquid sections with schema-defined settings, blocks, dynamic sources, and app integrations.

The best custom sections do not expose every possible design option. They provide the controls merchants genuinely need while preserving responsive behaviour, accessibility, performance, and brand consistency.

If your store needs custom components beyond the capabilities of its current theme, experienced Shopify experts can design sections that remain manageable for merchants and maintainable for developers.