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

text.liquid

<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 %}

• Felder definieren

Über die Settings kann man sich Felder für die Eingabe definieren. Hier gibts eine Referenz welche Typen es gibt.

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

• In Template einfügen

Über den Dateinamen (ohne Endung) kann man die Section in einem Template einfügen und nutzen. Z.B. im Cart Template

{% section 'text' %}

Schon kann man die Section nutzen.

Wenn es komplizierter ist

• Manchmal ist es komplizierter z.B. wenn ein Theme unterschiedliche Grundkonfigurationen hat. Im Narrative Theme sind die Presets für die Homepage alle in der

settings_data.json 

Schaut man sich das Template index.liquid für die Homepage an findet man dort nur den Platzhalter:

Vorlage:Content for index

Man muss also nach dieser Variablen suchen und findet sie in settings_data.json

Konfiguriert

TODO