With the release of the new theme editor I've been assigned to build a new client's website using Shopify's new theme builder framework.
Everything has been going fine except that when I go to create a new 'Section' in the backend it fails to appear within the Theme Editor's 'Sections' area.
Any idea what's going wrong here? Is there another JSON file that is associated with sections that I'm missing?
<div id="callToActions">
<div class="grid grid--no-gutters">
<div class=""></div>
</div>
</div>
{% schema %}
{
"name": "Call to Actions",
"class": "index-section index-section--flush",
"settings": [
{
"id": "cta_1_title",
"type": "text",
"label": "CTA 1 Title",
"default": "Dryups Specials"
}
]
}
{% endschema %}
Below the HTML and Liquid markup we have our section settings, contained in our {% schema %} tags. Each setting is represented by an object, where we can define the setting id , its type and how it will appear on the editor. To access a section's setting in Liquid, append its id to the section.
You're almost there, just missing one thing. Sections will only show up as options to be added if they have a preset defined.
This update will make it show up:
{% schema %}
{
"name": "Call to Actions",
"class": "index-section index-section--flush",
"settings": [
{
"id": "cta_1_title",
"type": "text",
"label": "CTA 1 Title",
"default": "Dryups Specials"
}
],
"presets": [{
"name": "Call to Actions",
"category": "Text"
}]
}
{% endschema %}
Note the category. If omitted, it'll end up under Miscellaneous.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With