How to Create a Simple Custom Shopify Section: Boost Your Store’s Flexibility

Shopify sections empower merchants to customize their store easily without touching complex code. Creating a simple Shopify section can significantly enhance the flexibility of your theme. Let’s walk through creating a straightforward yet powerful custom section in your Shopify theme.

Step 1: Create the Section File

Navigate to your Shopify admin, then click on Online Store > Themes > Actions > Edit Code. In the Sections folder, click Add a new section and name it simple-section.

Step 2: Add Basic Section Structure

Replace the default content in your newly created simple-section.liquid with this simple code:

{% schema %}
{
  "name": "Simple Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to Our Store"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>This is a simple customizable section.</p>"
    }
  ],
  "presets": [
    {
      "name": "Simple Section",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="simple-section">
  <h2>{{ section.settings.heading }}</h2>
  <div>{{ section.settings.content }}</div>
</div>

Step 3: Use Your Section in the Theme Customizer

Head to your theme customizer (Online Store > Themes > Customize). Add your newly created section by clicking Add Section, then selecting Simple Section from the Custom category.

You can now edit the heading and content directly in the theme customizer without needing to change the code.

Step 4: Customize and Style

Feel free to add CSS to your stylesheet to customize the appearance further:

.simple-section {
  padding: 20px;
  background-color: #f7f7f7;
  text-align: center;
}

.simple-section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

Summary

You’ve successfully created a simple yet customizable Shopify section! Experiment further with additional settings to expand your store’s functionality and customization options.