Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to create a global section

Solved

How to create a global section

luigi-ib
Shopify Partner
19 0 8

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 8

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 8

It works as expected. Thank you for the help!