Solved

How to create a global section

luigi-ib
Shopify Partner
19 0 7

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:

 

Accepted Solution (1)
juanvisbal
Shopify Partner
44 10 8

This is an 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 %}

 

Pasilobus, Inc – Shopify Experts: www.pasilobus.com



Check out Pasilobus apps in Shopify App Store: apps.shopify.com/partners/pasilobus

View solution in original post

Replies 5 (5)

BosiDev
Tourist
9 0 1

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? 

Bosi
luigi-ib
Shopify Partner
19 0 7

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:

 

screenshot.PNG

juanvisbal
Shopify Partner
44 10 8

This is an 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 %}

 

Pasilobus, Inc – Shopify Experts: www.pasilobus.com



Check out Pasilobus apps in Shopify App Store: apps.shopify.com/partners/pasilobus

BosiDev
Tourist
9 0 1

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

Bosi
luigi-ib
Shopify Partner
19 0 7

It works as expected. Thank you for the help!