Wikizone - Benutzerbeiträge [de]

Shopify - Sections & Snippets

2020-06-01T09:26:47Z

84.155.177.71: /* Neue Section erstellen - Überblick */

== Ü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
<pre>
<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 %}
</pre>
* 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.
<pre>
<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 %}
</pre>

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:
{{ content_for_index }}
Man muss also nach dieser Variablen suchen und findet sie in settings_data.json

Shopify - Sections & Snippets

2020-06-01T09:16:48Z

84.155.177.71: /* Einleitung */

Shopify - Sections & Snippets

2020-06-01T09:07:40Z

84.155.177.71:

== Einleitung ==

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

== 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
<pre>
<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 %}
</pre>
* 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:
{{ content_for_index }}
Man muss also nach dieser Variablen suchen und findet sie in settings_data.json

Konfiguriert

TODO

Shopify - Theme erstellen

2020-06-01T09:06:42Z

84.155.177.71:

== Links ==
Anpassung von Themes - https://help.shopify.com/de/manual/using-themes/change-the-layout
Design richtlinie https://help.shopify.com/de/manual/using-themes/theme-support#shopify-designrichtlinie

== Aufbau von Themes ==
https://help.shopify.com/de/manual/using-themes/theme-structure
=== Wichtige Dateien ===
Config
Globale Einstellungen für das Theme (Grundfarben, Logo...)
settings_data.json
settings_scheme.json

=== Einstellungen für Themes ===
https://shopify.dev/docs/themes/settings#about-settings_schema-json
Definiert in
settings_data.json

=== Seitenelemente ===
Seitenelemente

Alle Seiten eines Themes beinhalten diese Seitenelemente:

Nachricht (= Contentbereich)
Fußzeile
Header - Enthält normalerweise den Namen Ihres Shops, Ihr Logo, die Hauptmenü-Navigation und das Warenkorbsymbol.
Navigation - Ein Menü oder eine Reihe von Menüs Die Hauptmenü-Navigation ist in der Kopfzeile eines Themes enthalten.

=== Seitentypen ===
Alle Themes umfassen diese Seitentypen:

* '''Artikel''' Die Artikelseite enthält den Inhalt eines einzelnen Blog-Artikels.
* '''Blog''' Die Blog-Seite enthält den Titel und die Beschreibung Ihres Blogs sowie Auszüge und Links zu Ihren Blog-Artikeln.
* '''Warenkorb''' Die Warenkorbseite zeigt eine Zusammenfassung aller Produkte, die Kunden ihrem Warenkorb hinzugefügt haben, eine Zwischensumme und einen Gesamtpreis für die Bestellung sowie einen Checkout-Button, über die Kunden zu den sicheren Checkout-Seiten von Shopify geleitet werden. Wenn keine Produkte hinzugefügt wurden, wird auf der Seite mit dem leeren Warenkorb der Link Shopping fortsetzen angezeigt, mit dem Kunden wieder auf Ihre Produkte geleitet werden.
* '''Kategorie''' Sie können Ihre Produkte in Kategorien organisieren, damit sie für die Kunden leichter zu finden sind. Auf der Kategorieseite werden alle Produkte angezeigt, die in einer bestimmten Kategorie enthalten sind.
* '''Kategorieliste''' Die Kategorielistenseite zeigt alle Kategorien Ihres Shops an. Diese Seite finden Sie unter der URL `your-store.com/collections`.
* '''Kontakt''' Die Kontaktseite enthält ein Formular, über das Kunden mit Ihnen Kontakt aufnehmen können.
* '''Benutzerdefiniert''' Eine benutzerdefinierte Seite ist jede Seite, die Sie im Abschnitt Seiten in Ihrem Shopify-Adminbereich erstellen.
* '''Kunde''' Kundenseiten sind nur verfügbar, wenn Sie Kundenkonten unter Einstellungen > Checkout im Adminbereich aktiviert haben. Sie enthalten die Seite, auf der sich Kunden registrieren können, die Seite, auf der sich Kunden einloggen können, und die Kundenkontoseite. Die Kundenkontoseite enthält die Lieferadresse des Kunden und Informationen über aufgegebene Bestellungen.
* '''Home''' Die Homepage ist die Startseite Ihres Onlineshops. Dies ist die Standardseite, die geöffnet wird, wenn ein Kunde Ihre Website besucht.
* '''Passwort''' Die Passwortseite ist eine einzelne Seite, mit der Sie Ihren Onlineshop vorübergehend für Kunden ausblenden können. Sie können eine Passwortseite verwenden, bevor Sie Ihren Shop öffnen oder wenn Sie im Urlaub sind. Auf Ihrer Passwortseite können Sie den Launch-Termin Ihres Shops, die Art von Produkten, die Sie verkaufen, die aktuelle Berichterstattung in den Medien oder Details zu einer bevorstehenden Verkaufsaktion anzeigen. Die Passwortseite enthält auch ein E-Mail-Feld, über das Kunden sich anmelden können, wenn sie in Zukunft Newsletter von Ihnen erhalten möchten.
* '''Produkt''' Die Produktseite präsentiert ein Produkt und seine Varianten. Sie enthält Produktbilder, Preisinformationen, eine Produktbeschreibung und eine Schaltfläche Zum Warenkorb hinzufügen.
* '''Suchen''' Die Suchseite enthält eine Suchleiste und eine Liste mit Suchergebnissen.

=== Snippets ===
Shopify - Snippets
=== Section ===
Shopify - Sections & Snippets
== Themes erstellen ==
Am Besten zu beginn ein vorhandenes runterladen und anschauen.

== Tutorials ==
Kleines Setup Template zum Üben (Github/Youtube)
https://www.youtube.com/watch?v=zBtwd2OfZsI

== Neues Theme aus vorhandenem erstellen ==

# Themes > aktuelles Theme > Aktionen > Theme Dateien herunterladen

== Liquid Skripte ==
Shopify Themes / Templates werden in Liquid geschrieben. Damit lassen sich normale HTML Templates mit Plathaltern und einfachen Befehlsstrukturen versehen.

[[Liquid für Shopify Themes]]

Shopify - Theme erstellen

2020-06-01T09:04:07Z

84.155.177.71:

== Links ==
Anpassung von Themes - https://help.shopify.com/de/manual/using-themes/change-the-layout
Design richtlinie https://help.shopify.com/de/manual/using-themes/theme-support#shopify-designrichtlinie

== Aufbau von Themes ==
https://help.shopify.com/de/manual/using-themes/theme-structure
=== Wichtige Dateien ===
Config
Globale Einstellungen für das Theme (Grundfarben, Logo...)
settings_data.json
settings_scheme.json

=== Einstellungen für Themes ===
https://shopify.dev/docs/themes/settings#about-settings_schema-json
Definiert in
settings_data.json

=== Seitenelemente ===
Seitenelemente

Alle Seiten eines Themes beinhalten diese Seitenelemente:

Nachricht (= Contentbereich)
Fußzeile
Header - Enthält normalerweise den Namen Ihres Shops, Ihr Logo, die Hauptmenü-Navigation und das Warenkorbsymbol.
Navigation - Ein Menü oder eine Reihe von Menüs Die Hauptmenü-Navigation ist in der Kopfzeile eines Themes enthalten.

=== Seitentypen ===
Alle Themes umfassen diese Seitentypen:

* '''Artikel''' Die Artikelseite enthält den Inhalt eines einzelnen Blog-Artikels.
* '''Blog''' Die Blog-Seite enthält den Titel und die Beschreibung Ihres Blogs sowie Auszüge und Links zu Ihren Blog-Artikeln.
* '''Warenkorb''' Die Warenkorbseite zeigt eine Zusammenfassung aller Produkte, die Kunden ihrem Warenkorb hinzugefügt haben, eine Zwischensumme und einen Gesamtpreis für die Bestellung sowie einen Checkout-Button, über die Kunden zu den sicheren Checkout-Seiten von Shopify geleitet werden. Wenn keine Produkte hinzugefügt wurden, wird auf der Seite mit dem leeren Warenkorb der Link Shopping fortsetzen angezeigt, mit dem Kunden wieder auf Ihre Produkte geleitet werden.
* '''Kategorie''' Sie können Ihre Produkte in Kategorien organisieren, damit sie für die Kunden leichter zu finden sind. Auf der Kategorieseite werden alle Produkte angezeigt, die in einer bestimmten Kategorie enthalten sind.
* '''Kategorieliste''' Die Kategorielistenseite zeigt alle Kategorien Ihres Shops an. Diese Seite finden Sie unter der URL `your-store.com/collections`.
* '''Kontakt''' Die Kontaktseite enthält ein Formular, über das Kunden mit Ihnen Kontakt aufnehmen können.
* '''Benutzerdefiniert''' Eine benutzerdefinierte Seite ist jede Seite, die Sie im Abschnitt Seiten in Ihrem Shopify-Adminbereich erstellen.
* '''Kunde''' Kundenseiten sind nur verfügbar, wenn Sie Kundenkonten unter Einstellungen > Checkout im Adminbereich aktiviert haben. Sie enthalten die Seite, auf der sich Kunden registrieren können, die Seite, auf der sich Kunden einloggen können, und die Kundenkontoseite. Die Kundenkontoseite enthält die Lieferadresse des Kunden und Informationen über aufgegebene Bestellungen.
* '''Home''' Die Homepage ist die Startseite Ihres Onlineshops. Dies ist die Standardseite, die geöffnet wird, wenn ein Kunde Ihre Website besucht.
* '''Passwort''' Die Passwortseite ist eine einzelne Seite, mit der Sie Ihren Onlineshop vorübergehend für Kunden ausblenden können. Sie können eine Passwortseite verwenden, bevor Sie Ihren Shop öffnen oder wenn Sie im Urlaub sind. Auf Ihrer Passwortseite können Sie den Launch-Termin Ihres Shops, die Art von Produkten, die Sie verkaufen, die aktuelle Berichterstattung in den Medien oder Details zu einer bevorstehenden Verkaufsaktion anzeigen. Die Passwortseite enthält auch ein E-Mail-Feld, über das Kunden sich anmelden können, wenn sie in Zukunft Newsletter von Ihnen erhalten möchten.
* '''Produkt''' Die Produktseite präsentiert ein Produkt und seine Varianten. Sie enthält Produktbilder, Preisinformationen, eine Produktbeschreibung und eine Schaltfläche Zum Warenkorb hinzufügen.
* '''Suchen''' Die Suchseite enthält eine Suchleiste und eine Liste mit Suchergebnissen.

== Themes erstellen ==
Am Besten zu beginn ein vorhandenes runterladen und anschauen.

== Tutorials ==
Kleines Setup Template zum Üben (Github/Youtube)
https://www.youtube.com/watch?v=zBtwd2OfZsI

== Neues Theme aus vorhandenem erstellen ==

# Themes > aktuelles Theme > Aktionen > Theme Dateien herunterladen

== Liquid Skripte ==
Shopify Themes / Templates werden in Liquid geschrieben. Damit lassen sich normale HTML Templates mit Plathaltern und einfachen Befehlsstrukturen versehen.

[[Liquid für Shopify Themes]]

Shopify - Theme erstellen

2020-06-01T08:59:25Z

84.155.177.71:

== Links ==
Anpassung von Themes - https://help.shopify.com/de/manual/using-themes/change-the-layout
Design richtlinie https://help.shopify.com/de/manual/using-themes/theme-support#shopify-designrichtlinie

== Aufbau von Themes ==
https://help.shopify.com/de/manual/using-themes/theme-structure

=== Einstellungen für Themes ===
https://shopify.dev/docs/themes/settings#about-settings_schema-json
Definiert in
settings_data.json

=== Seitenelemente ===
Seitenelemente

Alle Seiten eines Themes beinhalten diese Seitenelemente:

Nachricht (= Contentbereich)
Fußzeile
Header - Enthält normalerweise den Namen Ihres Shops, Ihr Logo, die Hauptmenü-Navigation und das Warenkorbsymbol.
Navigation - Ein Menü oder eine Reihe von Menüs Die Hauptmenü-Navigation ist in der Kopfzeile eines Themes enthalten.

=== Seitentypen ===
Alle Themes umfassen diese Seitentypen:

* '''Artikel''' Die Artikelseite enthält den Inhalt eines einzelnen Blog-Artikels.
* '''Blog''' Die Blog-Seite enthält den Titel und die Beschreibung Ihres Blogs sowie Auszüge und Links zu Ihren Blog-Artikeln.
* '''Warenkorb''' Die Warenkorbseite zeigt eine Zusammenfassung aller Produkte, die Kunden ihrem Warenkorb hinzugefügt haben, eine Zwischensumme und einen Gesamtpreis für die Bestellung sowie einen Checkout-Button, über die Kunden zu den sicheren Checkout-Seiten von Shopify geleitet werden. Wenn keine Produkte hinzugefügt wurden, wird auf der Seite mit dem leeren Warenkorb der Link Shopping fortsetzen angezeigt, mit dem Kunden wieder auf Ihre Produkte geleitet werden.
* '''Kategorie''' Sie können Ihre Produkte in Kategorien organisieren, damit sie für die Kunden leichter zu finden sind. Auf der Kategorieseite werden alle Produkte angezeigt, die in einer bestimmten Kategorie enthalten sind.
* '''Kategorieliste''' Die Kategorielistenseite zeigt alle Kategorien Ihres Shops an. Diese Seite finden Sie unter der URL `your-store.com/collections`.
* '''Kontakt''' Die Kontaktseite enthält ein Formular, über das Kunden mit Ihnen Kontakt aufnehmen können.
* '''Benutzerdefiniert''' Eine benutzerdefinierte Seite ist jede Seite, die Sie im Abschnitt Seiten in Ihrem Shopify-Adminbereich erstellen.
* '''Kunde''' Kundenseiten sind nur verfügbar, wenn Sie Kundenkonten unter Einstellungen > Checkout im Adminbereich aktiviert haben. Sie enthalten die Seite, auf der sich Kunden registrieren können, die Seite, auf der sich Kunden einloggen können, und die Kundenkontoseite. Die Kundenkontoseite enthält die Lieferadresse des Kunden und Informationen über aufgegebene Bestellungen.
* '''Home''' Die Homepage ist die Startseite Ihres Onlineshops. Dies ist die Standardseite, die geöffnet wird, wenn ein Kunde Ihre Website besucht.
* '''Passwort''' Die Passwortseite ist eine einzelne Seite, mit der Sie Ihren Onlineshop vorübergehend für Kunden ausblenden können. Sie können eine Passwortseite verwenden, bevor Sie Ihren Shop öffnen oder wenn Sie im Urlaub sind. Auf Ihrer Passwortseite können Sie den Launch-Termin Ihres Shops, die Art von Produkten, die Sie verkaufen, die aktuelle Berichterstattung in den Medien oder Details zu einer bevorstehenden Verkaufsaktion anzeigen. Die Passwortseite enthält auch ein E-Mail-Feld, über das Kunden sich anmelden können, wenn sie in Zukunft Newsletter von Ihnen erhalten möchten.
* '''Produkt''' Die Produktseite präsentiert ein Produkt und seine Varianten. Sie enthält Produktbilder, Preisinformationen, eine Produktbeschreibung und eine Schaltfläche Zum Warenkorb hinzufügen.
* '''Suchen''' Die Suchseite enthält eine Suchleiste und eine Liste mit Suchergebnissen.

== Themes erstellen ==
Am Besten zu beginn ein vorhandenes runterladen und anschauen.

== Tutorials ==
Kleines Setup Template zum Üben (Github/Youtube)
https://www.youtube.com/watch?v=zBtwd2OfZsI

== Neues Theme aus vorhandenem erstellen ==

# Themes > aktuelles Theme > Aktionen > Theme Dateien herunterladen

== Liquid Skripte ==
Shopify Themes / Templates werden in Liquid geschrieben. Damit lassen sich normale HTML Templates mit Plathaltern und einfachen Befehlsstrukturen versehen.

[[Liquid für Shopify Themes]]

Shopify - Sections & Snippets

2020-06-01T08:46:03Z

84.155.177.71:

== Einleitung ==

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

== 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
<pre>
<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 %}
</pre>
* 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:
{{ content_for_index }}
Man muss also nach dieser Variablen suchen und findet sie in settings_data.json

Konfiguriert

TODO

Shopify - Sections & Snippets

2020-06-01T08:42:43Z

84.155.177.71:

== Einleitung ==
https://shopify.dev/docs/themes/settings#input-setting-type - Referenz zu den Einstellugsfeldern

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

== Links ==

== 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
<pre>
<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 %}
</pre>
* 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:
{{ content_for_index }}
Man muss also nach dieser Variablen suchen und findet sie in settings_data.json

Konfiguriert

TODO