Create your first section

Goal: a “Trust strip” section (cash on delivery, free returns…) that merchants can add to any page, edit and reorder without code.

You need: a theme copy open in the code editor (Quick start shows how).

1. Add the file. In the file tree, open the actions of the sections folder, choose Add file, type trust-strip and choose Create file. The editor starts you off with settings, a theme block and a preset; replace it with the code below.

2. Write the section.

   sections/trust-strip.liquid

   <div class="section scheme-{{ section.settings.color_scheme }}">
     <div class="page-width">
       {%- if section.settings.heading != blank -%}
         <h2 class="h3">{{ section.settings.heading }}</h2>
       {%- endif -%}
       <ul class="trust-strip" role="list">
         {%- for block in section.blocks -%}
           <li class="trust-strip__item" {{ block.shopify_attributes }}>
             <strong>{{ block.settings.title }}</strong>
             <span>{{ block.settings.text }}</span>
           </li>
         {%- endfor -%}
       </ul>
     </div>
   </div>
   
   {% stylesheet %}
     .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; padding: 0; list-style: none; }
     .trust-strip__item { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
   {% endstylesheet %}
   
   {% schema %}
   {
     "name": "Trust strip",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Why shop with us" },
       { "type": "select", "id": "color_scheme", "label": "Color scheme", "default": "1",
         "options": [{ "value": "1", "label": "Scheme 1" }, { "value": "2", "label": "Scheme 2" }, { "value": "3", "label": "Scheme 3" }] }
     ],
     "blocks": [
       {
         "type": "item",
         "name": "Item",
         "settings": [
           { "type": "text", "id": "title", "label": "Title", "default": "Cash on delivery" },
           { "type": "text", "id": "text", "label": "Text", "default": "Pay when your order arrives." }
         ]
       }
     ],
     "max_blocks": 4,
     "presets": [
       {
         "name": "Trust strip",
         "blocks": [
           { "type": "item" },
           { "type": "item", "settings": { "title": "Free returns", "text": "Within 14 days of delivery." } }
         ]
       }
     ]
   }
   {% endschema %}

   • settings become inputs in the visual editor; their values are on section.settings.
   • blocks defines what merchants can add inside the section, here up to four items.
   • A preset makes the section appear in Add section, filled in the way the preset says.
   • {{ block.shopify_attributes }} lets the editor highlight and select each block.
   • {% stylesheet %} CSS is added to the page once, however many times the section is used.

3. Save with Ctrl + S. If the schema has a mistake, the theme check shows the line.

4. Add it to the home page. Choose Customize to open the visual editor on the copy. Under the template’s sections, choose Add section and pick Trust strip. Change the heading, add a third item with Add block, drag the items into a new order, and Save.

Make the text translatable

Merchants with an Arabic storefront translate section text in Storefront › Translate, so you don’t need anything for setting values. Labels in the editor can be translated too: replace "name": "Trust strip" with "name": "t:sections.trust_strip.name" and add the key to locales/en.default.schema.json and locales/ar.schema.json. See Locales.

Next

• Sections: every schema key, section groups, enabled_on.
• Blocks: theme blocks that many sections can share.
• Input setting types: all 34 setting types.