Section schema

Section Schema: Define Customizable Settings and Options for Your Sections

Section schema is an essential part of creating sections in your theme. It defines the settings and customization options available for a section, allowing merchants to modify the content and appearance of the section within the theme editor. Section schema is written in JSON format and is embedded within the section file using the {% schema %} tag.

Structure of a Section Schema

A section schema consists of an array of objects, each representing a setting or customization option for the section. Here's a simple example of a section schema structure:

{% schema %}
{
    "name": "Slideshow",
    "settings": [
        {    
            "type": "text",
            "id": "title",
            "label": "Section Title",
            "default": "Default Title"  
        }, 
        {    
            "type": "image_picker",
            "id": "background_image",
            "label": "Background Image"  
        }
    ]
}
{% endschema %}

In this example, the section schema consists of two settings: a text field for the section title and an image picker for the background image.

Available Setting Types

CocoShop supports various setting types to cover a wide range of customization options for your sections. Some of the commonly used setting types include:

• text: A simple text field.

• image_picker: An image selector that lets merchants choose an image from their store's files.

For a complete list of available setting types and their properties, refer to Input settings.

Using Section Settings

To access the values of the settings defined in the section schema, you can use the section.settings object in your code. For example, to display the section title defined in the schema above, you would use the following code:

<h1>{{ section.settings.title }}</h1>

Similarly, to use the background image as a CSS background for a div, you could write:

<div style="background-image: url('{{ section.settings.background_image }}');">
  <!-- Your content here -->
</div>

By leveraging section schemas, you can create highly customizable sections that adapt to the needs and preferences of merchants, providing a more versatile and personalized experience for their online store.