How to Create and Add a Custom Liquid Section to Your Shopify Store in 2025

Why Add a Custom Section to Your Shopify Store?

Custom sections give you full control over your store’s layout and content. Here’s why they matter:

• Boost Engagement: Tailor content to highlight your brand’s unique offerings.
• Improve SEO: Add keyword-rich sections to rank higher on search engines.
• Save Costs: Avoid third-party apps with Shopify’s built-in theme editor.
• Flexible Design: Create reusable sections for any page, from homepages to product pages.

For more inspiration on custom Shopify sections, check out our Shopify Sections Guide.

Prerequisites

Before starting, ensure you have:

• A Shopify account with admin access.
• Basic knowledge of HTML, CSS, and Shopify’s theme editor.
• A backup of your theme (always duplicate your theme before editing code).

Step 1: Understand Shopify Sections

Shopify sections are reusable, customizable blocks of content you can add to your store’s pages. They’re built using Liquid, Shopify’s templating language, and stored in the sections folder of your theme. Sections can include static content (like text or images) or dynamic content (like product data).

For a deeper dive into Liquid, see Shopify’s official Liquid Reference.

Step 2: Access Your Shopify Theme Editor

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme, click Actions, then select Edit Code.

This opens the theme editor, where you’ll create and manage your custom section.

Step 3: Create a New Section File

Let’s create a custom section to display a promotional banner with a call-to-action (CTA) button.

1. In the theme editor, locate the Sections folder.
2. Click Add a new section and name it promo-banner.
3. Add the following Liquid code to the new file:

‍

{% schema %}
{
  "name": "Promo Banner",
  "settings": [
    {
      "type": "text",
      "id": "banner_title",
      "label": "Banner Title",
      "default": "Welcome to Our Store!"
    },
    {
      "type": "text",
      "id": "banner_subtitle",
      "label": "Banner Subtitle",
      "default": "Shop our exclusive collection today."
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button URL"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f5f5f5"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner",
      "category": "Promotional"
    }
  ]
}
{% endschema %}

<div class="promo-banner" style="background-color: {{ section.settings.background_color }};">
  <div class="promo-content">
    <h2>{{ section.settings.banner_title }}</h2>
    <p>{{ section.settings.banner_subtitle }}</p>
    {% if section.settings.button_url != blank %}
      <a href="{{ section.settings.button_url }}" class="promo-button">{{ section.settings.button_text }}</a>
    {% endif %}
  </div>
</div>

<style>
  .promo-banner {
    padding: 40px 20px;
    text-align: center;
  }

  .promo-content h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
  }

  .promo-content p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
  }

  .promo-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }

  .promo-button:hover {
    background-color: #0056b3;
  }
</style>

4. Click Save.

‍

Code Breakdown

• Schema Settings: The {% schema %} block defines customizable fields (title, subtitle, button URL, etc.) that appear in the theme customizer.
• HTML Structure: The <div class="promo-banner"> contains the banner’s content, dynamically pulling values from the schema.
• CSS Styling: The <style> section ensures the banner looks professional and responsive.
• Presets: The "presets" section makes the section easily selectable in the theme customizer.

‍

Step 4: Add the Custom Section to Your Store

1. In the theme editor, click Customize (or go back to Online Store > Themes > Customize).
2. Select the page where you want the section (e.g., Homepage).
3. Click Add Section in the sidebar.
4. Find Promo Banner under the Promotional category and add it.
5. Customize the section’s settings (e.g., change the title, subtitle, or background color).
6. Click Save.

‍

Step 5: Test Your Custom Section

1. Preview your store to ensure the promo banner displays correctly.
2. Test the CTA button to confirm it links to the right URL.
3. Check responsiveness on mobile and tablet devices.

If the section doesn’t appear, double-check your schema syntax and ensure the section is added to the correct page template.

‍

Step 6: Customize Further (Optional)

• Add Images: Include an "image_picker" in the schema to let users upload a background image. Learn more in Shopify’s Schema Documentation.
• Dynamic Content: Use Liquid loops to display products or collections dynamically.
• Styling: Adjust fonts, colors, or padding in the <style> section to match your brand.

‍

For advanced section ideas, explore our Shopify Sections Guide.

‍

Troubleshooting Tips

• Section Not Showing? Ensure the section is added in the theme customizer and assigned to the correct page.
• Code Errors? Validate your Liquid syntax using tools like Shopify’s Theme Check.
• Not Responsive? Add media queries to the <style> section for mobile compatibility.

‍

Conclusion

Creating a custom section in Shopify is a powerful way to personalize your store and engage customers in 2025. With the Liquid code provided, you can add a promotional banner in minutes and customize it to fit your brand. For more Shopify customization tips, visit our Shopify Sections Guide or explore Shopify’s Theme Development Resources.

Start building your custom section today and take your Shopify store to the next level!