Shopify - Sections & Snippets

Sections sind sind Inhaltsbausteine, die man über den Theme Editor auf auf der Seite platzieren kann. Sie bieten mehr Möglichkeiten als Snippets

Sections are added into Liquid templates with the variable

{% section 'header' %} 

Im Vergleich so geht's bei Snippets

{% include 'my-snippet-file' %}.

Neue Section erstellen - Überblick

Im Theme Editor Files bearbeiten.

• add new section in der Dateiliste
• Ein Grundgerüst mit folgenden Bereichstags wird automatisch erstellt
  • Schema - JSON für die definition wie der Theme Editor den Inhalt interpretiert.
  • CSS - für extra Styles
  • Javascript - extra JS Funktionen

Beispiel

<div id="textsection">
  <div class="simpletext">
    <h1> {{ section.settings.text-box }} </h1>
    <h3> {{ section.settings.text }} </h3>
  </div>
</div>
{% schema %}
  {
    "name": "Text Box",
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      },
      {
        "id": "text",
        "type": "richtext",
        "label": "Add custom text below",
        "default": "<p>Add your text here</p>"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
view raw

https://shopify.dev/docs/themes/settings#input-setting-types