Building Section Presets

1. The "Why" of Presets: Making Sections Discoverable and Usable

From your experience with full-stack development, you know that a good user interface provides sensible defaults. Presets are Shopify's way of achieving this for theme sections. They serve two primary functions:

1. Discoverability: A section will only appear in the theme editor's "Add section" list if its schema contains a presets array. Without presets, the section is essentially hidden from the merchant unless it's hard-coded into a template.
2. Usability: Presets pre-populate a section with default settings and blocks, offering the merchant a well-designed starting point. This demonstrates the section's purpose and saves them from having to build it from scratch.

Let's start with a foundational reading that explains this role clearly.

This establishes the fundamental rule: No presets, no "Add section" option.

2. Anatomy of a Preset

A preset is an object within the presets array in your section's {% schema %} tag. The official Shopify documentation provides the most precise definition of its structure.

According to the documentation, a preset object has a few key attributes:

• name: (Required) The name displayed in the "Add section" picker.
• category: (Optional) A way to group related presets together in the picker (e.g., "Images", "Text"). We'll explore this more in the next lesson.
• settings: (Optional) An object containing default values for the section's main settings. The keys are the id of the settings.
• blocks: (Optional) An array of default blocks to include when the section is added.

Here is a minimal valid preset for an "Image with Text" section. It only has a name, which is enough to make it show up in the editor.

"presets": [
  {
    "name": "Image with Text"
  }
]

3. Providing Default Settings

A preset with only a name will add a blank section. The real power comes from defining default settings. Let's say our "Image with Text" section has a setting for the heading and another for the image position.

A preset could look like this:

"presets": [
  {
    "name": "Image with Text - Image Left",
    "settings": {
      "heading": "Our Feature",
      "image_position": "left"
    }
  },
  {
    "name": "Image with Text - Image Right",
    "settings": {
      "heading": "Another Great Feature",
      "image_position": "right"
    }
  }
]

Now, the merchant sees two options in the "Add section" list. Choosing one adds the section with the heading and image position already configured, providing two distinct starting layouts from a single section file.

This video provides a very clear demonstration of this concept.

4. Providing Default Blocks

Beyond settings, presets can also pre-populate a section with blocks. This is where the merchant experience is truly transformed. Instead of an empty testimonial section, you can provide one with three example testimonials already in place.

To do this, you add a blocks array to your preset object. Each item in the array represents a block and must specify its type. You can also include a settings object to configure that specific block.

Let's see how this is done.

"presets": [
  {
    "name": "Testimonials",
    "blocks": [
      {
        "type": "testimonial",
        "settings": {
          "author": "Jane Doe",
          "quote": "This product is amazing!"
        }
      },
      {
        "type": "testimonial",
        "settings": {
          "author": "John Smith",
          "quote": "I can't live without it."
        }
      }
    ]
  }
]

5. Advanced Presets: A Practical Deep Dive

You can create multiple, complex presets for a single section, each offering a completely different layout or content combination. For example, a single "Featured Content" section could have presets for showcasing products, collections, or a mix of both.

This final video provides an excellent, in-depth demonstration of creating several complex presets for one section.

A Note on Static Sections and the default Property

What if a section is not meant to be added by a merchant, but is instead hard-coded into a template file (e.g., {% section 'my-static-footer' %})?

In this case, the presets array is ignored. To provide a default configuration for these static sections, you use the default property in your schema. Its structure is identical to a single preset object.

// In a section schema...

"settings": [ ... ],
"blocks": [ ... ],

// 'presets' are for merchant-addable sections
"presets": [
  { "name": "My Section" }
],

// 'default' is for statically rendered sections
"default": {
  "settings": {
    "heading": "Default Heading for Static Section"
  },
  "blocks": [
    { "type": "my_block" }
  ]
}

This is an important distinction: presets are for dynamic sections, default is for static sections. You can find more on this in the official Section schema documentation under the default attribute heading.

Conclusion

You now understand how to create a polished, professional experience for merchants. By providing well-designed presets, you transform your sections from empty containers into powerful, ready-to-use components.

Key Takeaways:

• Presets are essential: They are required to make a section available in the "Add section" list in the theme editor.
• They provide defaults: Presets can define initial values for both section-level settings and add a pre-configured set of blocks.
• They offer variety: You can create multiple presets for a single section to offer different starting layouts, styles, or content types.
• They improve usability: A good preset shows a merchant what a section is capable of and saves them significant configuration time.

Now that we can create sections and offer multiple presets for them, our "Add section" list could become long and disorganized. How can we present these options to the merchant in a clean, logical way?

In our next lesson, we will learn to use section groups to organize the theme editor for a better merchant experience, allowing us to group our presets into categories like "Images," "Text," and "Promotions."