Schema Settings: Text, Image, Color

1. The Two Halves of a Section: Liquid and Schema

Every section file (e.g., feature-row.liquid) has two distinct parts:

1. The Markup: The HTML, Liquid, CSS, and JavaScript that determines what the section looks like and how it behaves. This is what we've been working with so far.
2. The Schema: A block of JSON enclosed in {% schema %} and {% endschema %} tags. This part does not render anything on the page. Instead, it acts as a configuration file that tells the Shopify Theme Customizer which settings to show the merchant.

Think of it this way: if a section is a component, the schema defines the props it accepts. The markup then uses those props to render the final output.

This image perfectly illustrates the connection: the JSON you write in the schema directly generates the input fields in the theme editor.

To see a quick overview of this concept, the following video explains this dual structure clearly.

2. Anatomy of the Schema

Let's break down the structure of the schema. When you create a new section, it will have a minimal schema block. We'll build upon this.

{% schema %}
  {
    "name": "My Awesome Section",
    "settings": [
      // Input settings go here
    ],
    "presets": [
      {
        "name": "My Awesome Section"
      }
    ]
  }
{% endschema %}

• "name": This is the user-friendly name that appears in the theme editor's "Add section" list.
• "settings": This is an array of JSON objects. Each object in this array defines a single input field for the merchant (like a text box or a color picker).
• "presets": This makes the section easily discoverable and addable by merchants on different pages through the theme editor. For now, just ensure it's there with a name.

Our focus today is on populating the "settings" array.

3. Defining Input Settings

Each setting object within the "settings" array has a few key properties:

• "type": Specifies the kind of input (e.g., "text", "image_picker").
• "id": A unique identifier for this setting. This is crucial because you'll use it to access the merchant's saved value in your Liquid code.
• "label": The descriptive text shown to the merchant in the theme editor.
• "default" (optional): A default value for the setting.
• "info" (optional): Helper text to guide the merchant.

Once a setting is defined, you access its value in your Liquid markup using the syntax: {{ section.settings.your_setting_id }}.

The "Stacking Context" YouTube channel has an incredibly detailed tutorial that walks through almost every setting type. We'll use it as our primary guide. Let's start with the most basic but essential type: text.

Text Inputs: text and textarea

These are used for headings, paragraphs, and other simple text content.

Image Picker

This allows merchants to upload or select an image from their library.

Color Pickers: color and color_background

These settings give merchants control over the branding and style of a section.

<img src="{{ section.settings.featured_image | image_url: width: 800 }}" alt="Featured image">

{% if section.settings.featured_image != blank %}
  <img src="{{ section.settings.featured_image | image_url: width: 800 }}" alt="{{ section.settings.featured_image.alt | escape }}">
{% endif %}

4. Practice: Building a "Feature Box" Section

Let's put this all together. Your task is to create a new section from scratch called feature-box.liquid. This section will display an image, a heading, and be set against a custom background color.

Step 1: Create the file
In your theme code, navigate to the sections directory and create a new file named feature-box.liquid.

Step 2: Define the Schema
Paste the following schema at the bottom of your new file. This defines all the inputs the merchant will need.

{% schema %}
{
  "name": "Feature Box",
  "settings": [
    {
      "type": "image_picker",
      "id": "featured_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Feature Heading"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Use this text to share information about your brand with your customers.</p>"
    },
    {
      "type": "color_background",
      "id": "background_color",
      "label": "Background",
      "default": "linear-gradient(#ffffff, #f3f3f3)"
    }
  ],
  "presets": [
    {
      "name": "Feature Box"
    }
  ]
}
{% endschema %}

Step 3: Write the Liquid Markup
Now, add the Liquid and HTML markup above the {% schema %} tag. This code will render the section using the values from your settings.

<style>
  .feature-box-wrapper {
    background: {{ section.settings.background_color }};
    padding: 50px 20px;
    text-align: center;
  }
  .feature-box-image {
    max-width: 150px;
    height: auto;
    margin: 0 auto 20px;
    border-radius: 50%;
  }
  .feature-box-heading {
    font-size: 24px;
    margin-bottom: 10px;
  }
</style>

<div class="feature-box-wrapper">
  {% if section.settings.featured_image != blank %}
    {{ section.settings.featured_image | image_url: width: 300 | image_tag: class: 'feature-box-image' }}
  {% endif %}

  {% if section.settings.heading != blank %}
    <h2 class="feature-box-heading">{{ section.settings.heading }}</h2>
  {% endif %}

  {% if section.settings.description != blank %}
    <div class="feature-box-description">{{ section.settings.description }}</div>
  {% endif %}
</div>

Step 4: Test it!
Save the file. Now go to your theme editor (run shopify theme dev and click the customize link). On any page (like the homepage), click "Add section" and find your "Feature Box". Add it to the page and try customizing the image, text, and background. You've just empowered a merchant!

5. The Wider World of Settings

We've focused on text, image_picker, and color, but there are many more input types that allow for rich customization. The LINK video we've been using is an exhaustive reference. You don't need to memorize them all now, but it's good to know what's possible:

• range: A slider for numeric values (e.g., setting banner height).
• select, radio, checkbox: For predefined choices.
• product, collection, article: Resource pickers that let merchants link to other parts of their store.
• url: A field for any internal or external link.
• font_picker: Lets merchants choose from Shopify's font library.

Bookmark that video. When you need to build a section and wonder, "Is there an input for...?", the answer is probably in there.

Conclusion

Today, you've unlocked one of the most powerful features of Shopify theme development. You now understand how to decouple a section's presentation from its content, giving merchants the power to customize their own storefront.

Key Takeaways:

• A section file consists of Liquid markup for rendering and a JSON schema for defining settings.
• The settings array in the schema contains objects, each defining one input field for the theme editor.
• Every setting needs a type, id, and label.
• You access a setting's value in Liquid with section.settings.your_id.
• Always check if a setting != blank before using it to avoid errors with un-set optional fields.

In our next lesson, we will build directly on this foundation. Now that you know how to create settings for a whole section, we'll explore how to create settings for repeatable, re-orderable content within a section. We will learn to implement blocks within a section to allow for repeatable, user-generated content, such as for an FAQ, a slideshow, or a list of testimonials.