How to create a global section

[luigi-ib]

Hi Shopify community,

I'm using the official Shopify theme Dawn. I created a section that should be added and configured dynamically in more templates by the user in the Shopify theme editor. How can I make it available globally such like these ones:

• https://github.com/Shopify/dawn/blob/main/sections/rich-text.liquid
• https://github.com/Shopify/dawn/blob/main/sections/multicolumn.liquid

[BosiDev]

Hey @luigi-ib 🙂 

thank you for posting that Problem and im glad to help you 🙂 
Can you post your code in here so i can look at it? 

[luigi-ib]

Hi @BosiDev 

the code the section is the following:

<div class="gallery-carousel">
  <div class="gallery-carousel__title">
    <h2>{{ "sections.settings.title" }}</h2>
  </div>
  <div class="gallery-carousel__body"></div>
</div>

{% schema %}
{
  "name": "Gallery carousel",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Carousel title"
    }
  ]
}
{% endschema %}

I would create a theme where this section is globally available so the merchant can add it in any page he wishes from Shopify theme editor. Like these ones:

[juanvisbal · Accepted solution]

Hi @luigi-ib 

You need to add preset settings in the schema so it will show in the list of sections in Theme Editor. Here's how the section code will look like:

<div class="gallery-carousel">
  <div class="gallery-carousel__title">
    <h2>{{ "sections.settings.title" }}</h2>
  </div>
  <div class="gallery-carousel__body"></div>
</div>

{% schema %}
{
  "name": "Gallery carousel",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Carousel title"
    }
  ],
  "presets": [
    {
      "name": "Gallery carousel"
    }
  ]
}
{% endschema %}

[BosiDev]

@juanvisbal come on, let me help that guy 😂 Yes indeed, just add the presets and it will work smoothly 🙂 

[luigi-ib]

It works as expected. Thank you for the help!