Green Bag Developer logo Green Bag Developer
Sections, Blocks, and Schema Design Intermediate 10 min read

Presets and Sensible Defaults

Learn how to configure section presets and defaults so merchants get a great starting point when adding sections to their theme.

When a merchant adds a section to their page, what do they see? A blank slate or a fully-configured example? Presets and defaults determine the initial state of your sections, making the difference between a confusing first impression and an inspiring starting point.

🛠 Try the Schema Builder: Configure presets visually with our Schema Builder. Set default values, add preset blocks, and see the JSON output in real-time.

What Are Presets?

Presets serve two purposes:

  1. Make sections available in the “Add section” menu
  2. Pre-configure settings and blocks for new instances

Without a preset, a section can only be used if it’s explicitly included in a template file. With a preset, merchants can add it anywhere.

Basic Preset Structure

{% schema %}
{
  "name": "Featured Collection",
  "settings": [...],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

The presets array contains one or more preset objects. At minimum, each needs a name.

Preset with Default Settings

Pre-configure setting values:

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Height",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    }
  ],
  "presets": [
    {
      "name": "Hero Banner",
      "settings": {
        "heading": "Welcome to Our Store",
        "height": "large"
      }
    }
  ]
}
{% endschema %}

The preset overrides the setting’s default value when the section is first added.

Preset with Pre-configured Blocks

Add blocks automatically when the section is added:

{% schema %}
{
  "name": "Slideshow",
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slideshow",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "heading": "Slide 1",
            "button_text": "Shop Now"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "Slide 2",
            "button_text": "Learn More"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "Slide 3",
            "button_text": "Contact Us"
          }
        }
      ]
    }
  ]
}
{% endschema %}

Merchants see three slides immediately, not an empty slideshow.

Multiple Presets

One section can have multiple presets for different use cases:

{% schema %}
{
  "name": "Image with Text",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "image-left", "label": "Image left" },
        { "value": "image-right", "label": "Image right" }
      ],
      "default": "image-left"
    },
    {
      "type": "select",
      "id": "image_width",
      "label": "Image width",
      "options": [
        { "value": "33", "label": "33%" },
        { "value": "50", "label": "50%" },
        { "value": "66", "label": "66%" }
      ],
      "default": "50"
    }
  ],
  "presets": [
    {
      "name": "Image with Text",
      "settings": {
        "layout": "image-left",
        "image_width": "50"
      }
    },
    {
      "name": "Image with Text (Large Image)",
      "settings": {
        "layout": "image-left",
        "image_width": "66"
      }
    },
    {
      "name": "Image with Text (Image Right)",
      "settings": {
        "layout": "image-right",
        "image_width": "50"
      }
    }
  ]
}
{% endschema %}

Each preset appears as a separate option in the “Add section” menu.

Setting Defaults vs Preset Settings

There are two places to set default values:

1. Setting-Level Default

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

This applies:

  • When preset doesn’t specify this setting
  • When the setting is reset to default
  • As a fallback

2. Preset-Level Setting

"presets": [
  {
    "name": "My Section",
    "settings": {
      "heading": "Shop Our Collection"
    }
  }
]

This applies:

  • Only when this specific preset is used
  • Overrides the setting-level default

How They Interact

{% schema %}
{
  "name": "Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Default Heading"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Default Subheading"
    }
  ],
  "presets": [
    {
      "name": "Banner",
      "settings": {
        "heading": "Preset Heading"
      }
    }
  ]
}
{% endschema %}

When added via preset:

  • heading = “Preset Heading” (from preset)
  • subheading = “Default Subheading” (from setting default)

Best Practices for Defaults

1. Provide Meaningful Content

{
  "type": "text",
  "id": "heading",
  "default": "Explore Our Collection"
}

Not:

{
  "type": "text",
  "id": "heading",
  "default": "Heading"
}

2. Use Realistic Block Counts

For a testimonials section, start with 3 testimonials, not 1 or 10:

"presets": [
  {
    "name": "Testimonials",
    "blocks": [
      { "type": "testimonial", "settings": { "author": "Sarah M." } },
      { "type": "testimonial", "settings": { "author": "John D." } },
      { "type": "testimonial", "settings": { "author": "Emily R." } }
    ]
  }
]

3. Match Visual Design

If your section looks best with specific settings, use those as defaults:

"presets": [
  {
    "name": "Hero Banner",
    "settings": {
      "height": "large",
      "text_alignment": "center",
      "overlay_opacity": 40
    }
  }
]

4. Consider Mobile

Don’t default to settings that look bad on mobile:

{
  "type": "range",
  "id": "columns",
  "label": "Columns",
  "min": 1,
  "max": 6,
  "default": 3
}

3 columns scales down better than 6.

Complete Example: FAQ Section

{% schema %}
{
  "name": "FAQ",
  "tag": "section",
  "class": "section-faq",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Frequently Asked Questions"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "accordion", "label": "Accordion" },
        { "value": "list", "label": "List" }
      ],
      "default": "accordion"
    },
    {
      "type": "checkbox",
      "id": "open_first",
      "label": "Open first question by default",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "question",
      "name": "Question",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "What is your question?"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>Provide a helpful answer here.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "settings": {
        "heading": "Frequently Asked Questions",
        "layout": "accordion",
        "open_first": true
      },
      "blocks": [
        {
          "type": "question",
          "settings": {
            "question": "What is your return policy?",
            "answer": "<p>We offer a 30-day return policy on all items. Items must be unworn and in original packaging.</p>"
          }
        },
        {
          "type": "question",
          "settings": {
            "question": "How long does shipping take?",
            "answer": "<p>Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery.</p>"
          }
        },
        {
          "type": "question",
          "settings": {
            "question": "Do you offer international shipping?",
            "answer": "<p>Yes! We ship to over 50 countries worldwide. Shipping costs and times vary by destination.</p>"
          }
        },
        {
          "type": "question",
          "settings": {
            "question": "How can I contact customer support?",
            "answer": "<p>You can reach us via email at [email protected] or through our contact form. We respond within 24 hours.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}

Using the default Property

For template-level defaults (not presets), use the default property at the schema root:

{% schema %}
{
  "name": "Product Grid",
  "settings": [...],
  "blocks": [...],
  "default": {
    "settings": {
      "heading": "Featured Products",
      "columns": 4
    },
    "blocks": [
      { "type": "product" },
      { "type": "product" },
      { "type": "product" },
      { "type": "product" }
    ]
  }
}
{% endschema %}

default is used when a section is referenced in a JSON template without explicit configuration.

Preset Categories

Organize presets with categories (coming in future Shopify updates):

"presets": [
  {
    "name": "Hero Banner",
    "category": "Image"
  }
]

Currently, sections are organized alphabetically in the editor.

Testing Your Presets

  1. Add section via “Add section”: Does it look good immediately?
  2. Check mobile view: Do defaults work on small screens?
  3. Review block count: Is it a useful starting point?
  4. Try each preset: Do multiple presets feel distinct?
  5. Reset to defaults: Does the section recover well?

Practice Exercise

Create presets for a “Newsletter” section with two variations:

  1. Simple Newsletter: Just heading and email input
  2. Newsletter with Image: Includes a side image
{% schema %}
{
  "name": "Newsletter",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Subscribe to our newsletter"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Get updates on new products and sales"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "centered", "label": "Centered" },
        { "value": "with-image", "label": "With image" }
      ],
      "default": "centered"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#f5f5f5"
    }
  ],
  "presets": [
    {
      "name": "Newsletter",
      "settings": {
        "heading": "Stay in the Loop",
        "subheading": "Subscribe for exclusive offers and updates",
        "layout": "centered"
      }
    },
    {
      "name": "Newsletter with Image",
      "settings": {
        "heading": "Join Our Community",
        "subheading": "Be the first to know about new arrivals",
        "layout": "with-image"
      }
    }
  ]
}
{% endschema %}

Key Takeaways

  1. Presets make sections available in the “Add section” menu
  2. Pre-configure settings in presets for a great first impression
  3. Pre-configure blocks so sections aren’t empty
  4. Multiple presets offer variations of the same section
  5. Setting defaults apply when preset doesn’t specify a value
  6. Preset settings override setting-level defaults
  7. Use realistic content in defaults, not placeholder text
  8. Test on mobile to ensure defaults work everywhere

What’s Next?

With presets configured, the next lesson covers Theme Editor UX and how to make your settings panel intuitive for merchants.

Finished this lesson?

Mark it complete to track your progress.

Discussion

Loading comments...