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 Static 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.

Neue Dynamic Section erstellen

Für eine dynamische Section, die man in den Shop Einstellungen platzieren kann, müssen wir mehr tun:

• Ein Preset mit Presetname und Kategorie. Presets definieren wie die Section im Theme Editor angezeigt wird.and the presets must have a name and a category.

Beispiel Call to action Button

For example, I’ve created a section for a call to action button with Liquid tags to define a name (header), url, and button text within the schema section.

<div id="section-cta">
  <div class="container">
    <h3> {{ section.settings.text-box }} </h3>
    <a href="{{ section.settings.link }}" class="btn btn--cta">{{ section.settings.linktext }}</a>
  </div>
</div>
{% schema %}
{
  "name": "Call to action",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Title"
    },
    {
      "id": "link",
      "type": "url",
      "label": "Button link"
    },
    {
      "id": "linktext",
      "type": "text",
      "label": "Button text",
      "default": "Click here"
    }
  ],
  "presets": [
    {
      "name": "Call to Action",
      "category": "CTA button"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Hinzu kommt hier die Definition der Presets am Ende der Settings. Dadurch wird es zu einer dynamischen Section die man in der Index Seite verwenden kann.

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 

• Wenn das Preset hinzugefügt ist steht die Section automatisch auf der Index Seite zur Verfügung.

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