Build Custom Sections in Shopify Dawn Theme

Understanding Dawn's Section Architecture

Dawn uses JSON templates and Liquid section files. Every page is a JSON template (like product.json or index.json) that references section files from the /sections directory. When you create a custom section, you are adding a new Liquid file to this directory that merchants can add to any page through the theme editor.

A section file has three parts: the Liquid/HTML markup, CSS styles (optional, inside <style> tags), and the schema (a JSON block that defines settings, blocks, and presets).

Step 1: Create the Section File

In your Shopify admin, go to Online Store > Themes > Edit code. Scroll to the Sections folder and click "Add a new section." Name it something descriptive with dashes between words, like custom-features.

The file will be created with a basic template. Replace it with your section structure:

<section class="custom-features section-{{ section.id }}">
  <div class="page-width">
    {%- if section.settings.heading != blank -%}
      <h2 class="custom-features__heading">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}
    
    <div class="custom-features__grid">
      {%- for block in section.blocks -%}
        <div class="custom-features__item" {{ block.shopify_attributes }}>
          {%- if block.settings.icon != blank -%}
            <div class="custom-features__icon">
              {{ block.settings.icon }}
            </div>
          {%- endif -%}
          <h3>{{ block.settings.title }}</h3>
          <p>{{ block.settings.text }}</p>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

Step 2: Add the Schema

The schema defines what merchants can customize in the theme editor. Add it at the bottom of your section file inside {% schema %} tags:

{% schema %}
{
  "name": "Custom Features",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Why Choose Us"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "icon",
          "label": "Icon emoji"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Feature Title"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Features"
    }
  ]
}
{% endschema %}

Step 3: Add CSS

Add styles inside <style> tags at the top or bottom of your section file. Use the section-{{ section.id }} class to scope your CSS and avoid conflicts with other sections:

<style>
  .custom-features.section-{{ section.id }} {
    padding: 60px 0;
  }
  .custom-features__heading {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
  }
  .custom-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
  }
  .custom-features__item {
    background: var(--color-background);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
  }
</style>

Step 4: Use Dawn's CSS Variables

Dawn defines CSS custom properties for colors, fonts, and spacing. Use them instead of hardcoding values so your section automatically adapts to the merchant's theme settings:

• var(--color-foreground) for text color
• var(--color-background) for background
• var(--font-heading-family) for heading font
• var(--font-body-family) for body font

Step 5: Restrict to Specific Templates (Optional)

If your section should only appear on certain page types, use the templates attribute in the schema:

"templates": ["product", "collection"]

This prevents merchants from accidentally adding a product-specific section to blog pages where the data would not exist.

Common Mistakes

• Not scoping CSS. Without a unique selector, your styles will bleed into other sections. Always scope with .section-{{ section.id }}.
• Missing shopify_attributes on blocks. This attribute is required for the theme editor to highlight and select blocks. Without it, click-to-edit does not work.
• Hardcoding colors. Use Dawn's CSS variables or add color picker settings in your schema. Hardcoded colors break when merchants change their theme palette.

If you want custom sections built for your store without doing the development yourself, check out my custom section development service.