Shopify - Sections & Snippets

Übersicht

Sie bieten mehr Möglichkeiten als Snippets. Sections sind sind Inhaltsbausteine. Man kann sie

• statisch einbinden, dann sind sie immer an der gleichen Stelle einer Seite
• oder dynamisch, dann kann man Sie über den Theme Editor auf auf der Seite platzieren.

• Definition der Felder und ggfls. Default Werte definieren -> id der Section kopieren
• User-Eingabe in ein Template integrieren
• Frontend-Ausgabe in ein Template integrieren

Sections einbinden

Sections are added into Liquid templates with the variable

{% section 'header' %} 

Im Vergleich so geht's bei Snippets

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

Links

https://www.shopify.com/partners/blog/how-to-create-your-first-shopify-theme-section - HowTo zum Section erstellen
https://shopify.dev/docs/themes/settings#input-setting-type - Referenz zu den Einstellugsfeldern

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