Funktionen

Jede Funktion der Shopify Theme App Extension

SectionGuard ist eine Shopify Theme App Extension: Deine eigenen HTML-Sektionen, dein CSS und deine Metafeld-Anzeigen leben in der App und werden über einen einzigen Theme-Block gerendert. Live-Daten werden serverseitig aufgelöst, die Platzierung ist nativ, und nichts wird in dein Theme kopiert — ein Theme-Update hat also nichts von dir zum Überschreiben. Gebaut für Shop-Betreiber ohne Entwickler, die aus einer von 35 fertigen Vorlagen starten, für Händler und Freelancer, die eigenen Code schreiben, und für Agenturen, die Sektionen über jeden Kundenshop hinweg wiederverwenden.

Add to Shopify — FreeZu den Funktionen springen

Kostenlos für bis zu 3 Sektionen · Keine Kreditkarte · Läuft auf OS 2.0 & Horizon.

Live-Daten-Tokens

01 Live-Daten, kein Liquid-Risiko

Produkt-, Kollektions- und Metafeld-Daten werden serverseitig aufgelöst — in deinem Theme läuft kein Liquid.

  • Tokens werden über Shopifys eigenes Liquid aufgelöst. Setze {{ product.title }} oder {{ product.price }} in dein HTML. Veröffentlichen kompiliert die Sektion in ein app-eigenes Metaobject, abgelegt in Shopify — Shopifys eigenes Liquid rendert es im Storefront. Die Auslieferung hängt nicht an unserem Server, und dein Theme führt nie eine Zeile deines Liquid aus.
  • Token-Autovervollständigung im Editor. Beginne, ein Token zu tippen, und der Editor schlägt die verfügbaren Live-Felder für das aktuelle Produkt, die Kollektion oder den Shop vor. Füge genau das benötigte ein, ohne dir den Objektgraphen zu merken.
  • Ein Block, echte Daten. Das Storefront zeigt die aufgelösten Werte — denselben Titel, Preis und dieselben Metafelder, die deine Kunden sehen — über einen einzigen Theme-App-Extension-Block, nicht über einen Stapel Theme-Dateien.
HTMLCSSJS
Serverseitig aufgelöst
123
<!-- wird aufgelöst, bevor die Seite ausgeliefert wird --><h1>{{ product.title }}</h1><p class="price">{{ product.price }}</p>
deinshop.de/products/aurora-runner-jacket
Aurora Runner Jacket
168,00 €Gerendert von SectionGuard
Von Shopifys eigenem Liquid aufgelöst — nicht deinem Theme.
Metafeld-Anzeige

02 Metafeld-Anzeige mit Live-Suche

Durchsuche jedes Metafeld nach Name und Namespace und füge das exakte mit einem Klick ein.

  • Finde das Feld, nicht die Syntax. Das Metafeld-Panel listet deine Definitionen mit Namespace und Key. Suche nach Namen, wähle das gewünschte, und es landet als fertig gerendertes Token im Code.
  • Mit Namespace und Typ. custom.spec_sheet, reviews.rating, was auch immer du definiert hast — jedes wird mit vollem Namespace eingefügt, damit jedes Mal der richtige Wert aufgelöst wird.
  • Metafeld-Anzeige ohne Theme-Änderungen. Zeige Spec-Tabellen, Pflegehinweise oder Badge-Daten direkt aus deinen Metafeldern, gerendert von der App. Kein Metaobjekt-Liquid, das in Produkt-Templates eingefügt wird.
SucheEinfügen
3 Treffer
123456
suche: "spec"custom.spec_sheet → einfügenreviews.rating → einfügencare.instructions<span>{{ product.metafields.custom.spec_sheet }}</span>
Native Platzierung

03 Nativer Sektions-Picker

Deine Sektionen erscheinen namentlich in Shopifys eigenem Theme-Editor — wähle und platziere sie wie einen eingebauten Block.

  • Als Metaobjekte registriert. Jede Sektion wird registriert, sodass der Theme-Editor sie unter dem von dir vergebenen Namen auflistet. Kein Handle-Tippen, kein Code-Einfügen — wähle den Block und lege ihn in einen beliebigen Sektions-Slot.
  • Platziere sie überall, wo eine Sektion hingehört. Produktseiten, Startseite, Kollektions-Templates — überall, wo der native Editor eine Sektion zulässt, erscheinen deine SectionGuard-Blöcke neben den themeeigenen.
  • Nativ umsortieren und entfernen. Nach oben, nach unten, ausblenden — alles über die gewohnten Theme-Editor-Steuerungen, die Händler bereits kennen. Die App verlangt nie, den Editor zu verlassen.
Add section
  • Rich Text
  • Bild mit Text
  • Produkt-Spec-TabelleApp
  • FAQ-AkkordeonApp
  • Kollektionsliste
  • Newsletter
Versionen

04 Versionen, Diff und Wiederherstellen mit einem Klick

Jedes Speichern und jedes Veröffentlichen ist eine Version. Vergleiche zwei Versionen per Zeilen-Diff und stelle danach eine davon mit einem Klick wieder her.

  • Automatische Snapshots bei Speichern und Veröffentlichen. Kein separater Versionierungs-Schritt zum Merken. Speichern und Veröffentlichen halten je eine Version aus HTML, CSS und JS der Sektion fest, geordnet abgelegt, damit du immer siehst, wo du warst.
  • Versionen per Zeilen-Diff vergleichen. Sieh vor dem Wiederherstellen genau, was sich zwischen zwei Versionen geändert hat — Zeile für Zeile. Kein Rätselraten am rohen Code, welche Zeile das Layout zerschossen hat.
  • Änderungen mit Sicherheitsnetz veröffentlichen. Probiere ein Redesign an einer Live-Sektion aus, im Wissen, dass der letzte gute Stand einen Klick entfernt ist. Die Zuversicht, Dinge zu ändern, ist genau der Punkt.
v14 · beliebige wiederherstellen
123456
v14 aktuell "Pflege-Icons hinzugefügt"v13 vor 2 Std "Preisgröße angepasst"v12 wiederherst. ← "stabiles Layout"v11 gestern// ein Klick stellt die Sektion wieder her, HTML + CSS + JS
Automatische Re-Sync

05 Übersteht Deinstallation und Neuinstallation

Der Quellcode deiner Sektion bleibt in deinem SectionGuard-Konto gesichert — neu installieren, und er synchronisiert und veröffentlicht sich automatisch.

  • Quellcode im Konto gesichert, nicht nur im Theme. HTML, CSS, JS und die Token-Bindungen jeder Sektion werden mit deinem SectionGuard-Konto gespeichert. Eine Deinstallation löscht deine Arbeit nicht.
  • Automatische Re-Synchronisierung bei Neuinstallation. Neu installieren, und deine Sektionen kommen zurück, registrieren sich wieder im Theme-Editor und veröffentlichen sich mit ihren Live-Daten — nichts von Hand neu zu bauen.
  • Ohne Neubau zwischen Themes wechseln. Wechsle oder dupliziere ein Theme und platziere den Extension-Block einmal. Die Sektionen, die du gebaut hast, folgen dir, statt in den Dateien des alten Themes gefangen zu sein.
zsh — Neuinstallation
$ sectionguard reinstallSektionen aus deinem Konto werden wiederhergestellt …✓ 7 Sektionen re-synchronisiert (Code von unserer Seite)✓ im Theme-Editor namentlich neu registriert✓ neu veröffentlicht · Tokens werden wieder aufgelöst
Dateibasierte Apps

Nichts wiederherzustellen — die .liquid war mit dem Update schon weg.

SectionGuard

Neu installiert und mit einem Befehl wieder live. Nichts von Hand neu gebaut.

Kein write_themes

06 Theme bleibt sauber — kein write_themes

Kein write_themes-Scope, keine in dein Theme kopierten Dateien. Ein Theme-Update hat nichts von dir zum Überschreiben.

  • Kein write_themes-Scope. SectionGuard wird ohne den write_themes-Zugriffsscope installiert. Wir können deinen Theme-Code nicht bearbeiten, selbst wenn wir wollten — die Garantie ist architektonisch, kein Versprechen.
  • Nichts wird in .liquid eingefügt. Anders als dateibasierte Sektions-Apps kopieren wir nie .liquid in dein Theme. Es bleiben keine verwaisten Dateien bei der Deinstallation zurück und keine, die das nächste Update wegwischen könnte.
  • Eigenes HTML und CSS, außerhalb des Themes. Schreibe vollständige eigene HTML-Sektionen mit deinem eigenen CSS und JS im App-Editor. Sie werden über den Extension-Block gerendert, sodass deine Theme-Dateien genau so bleiben, wie der Anbieter sie ausgeliefert hat.
Install-Manifest
1234567
scopes: ["read_products","read_metaobjects","write_metaobjects"]// kein write_themes → wir können dein Theme nicht anfassen
Zeitplanung

07 Sektionen nach Zeitplan zeigen und ausblenden

Setze pro Sektion „Anzeigen ab“ und „Ausblenden nach“ — das Zeitfenster wird im Storefront erzwungen, nicht nur im Admin notiert.

  • Anzeigen ab / Ausblenden nach. Lege Start und Ende einer Sektion exakt fest — ein Wochenend-Sale-Banner, das freitags erscheint und montags verschwindet, ohne dass du zweimal in den Theme-Editor musst.
  • Im Storefront erzwungen. Das Zeitfenster ist keine Gedächtnisstütze — die veröffentlichte Sektion prüft es bei jedem Rendern, eine abgelaufene Sektion verschwindet also automatisch.
  • Kein Code, kein Cronjob. Setze beide Daten als einfache Felder in den Sektionseinstellungen. Nichts zu skripten, nichts zum Abschalten zu merken.
Ziel-Templates

08 Sektionen bleiben auf dem Template, zu dem sie gehören

Jede Sektion gehört zu einem Produkt-, Kollektions- oder Seiten-Template — der Block taucht dort gar nicht erst auf, wo er nicht passt.

  • Ziel-Template beim Bauen festlegen. Wähle Produkt, Kollektion oder Seite als Ziel-Template der Sektion — die Block-Auswahl im Theme-Editor bietet sie nur dort an, wo dieses Ziel zutrifft.
  • Fehlplatzierung erklärt, nicht stumm. Legst du den Block trotzdem auf das falsche Template, erklärt er direkt im Theme-Editor, warum — auf Deutsch oder Englisch, statt einer rätselhaften Leerstelle.
  • Weniger „warum ist das leer“-Tickets. Eine reine Produkt-Sektion landet nicht heimlich auf einem Blogbeitrag. Der Fehlpassung wird beim Platzieren sichtbar, nicht erst bei einem verwirrten Kunden.
Sicherheits-Lint

09 Riskanter Code wird vor dem Veröffentlichen blockiert

Veröffentlichen prüft HTML, CSS und JS jeder Sektion und stoppt alles, was dein Storefront gefährden würde.

  • Blockiert externe Skripte und Styles. Externe <script>- und <link>-Tags, Inline-Event-Handler und document.write werden erkannt und beim Veröffentlichen blockiert — nicht erst später im Live-Storefront entdeckt.
  • Erkennt unsichere http://-Links. Jede fest codierte http://-URL wird erkannt, bevor sie eine Mixed-Content-Warnung in deinem Live-Shop auslösen kann.
  • Größen-Limits schützen die Performance. Sektionen sind auf eine sinnvolle Größe begrenzt, damit nichts, was du veröffentlichst, den Storefront heimlich verlangsamt.
Duplizieren & Portabilität

10 Sektion duplizieren oder in einen anderen Shop mitnehmen

Klone eine Sektion als Ausgangspunkt oder exportiere sie als JSON-Datei und importiere sie direkt im nächsten Shop.

  • Duplizieren mit einem Klick. Klone eine bestehende Sektion als Ausgangspunkt für eine Variante, ohne das Original anzufassen.
  • Sektion als JSON exportieren. Lade jede Sektion — inklusive Einstellungen, Tokens und Code — als eine portable JSON-Datei herunter.
  • Im nächsten Shop importieren. Baue eine Sektion einmal in Shop A und importiere dieselbe Datei in Shop B, C und D. Genau der Agentur-Workflow, für den die App gebaut ist.
Globaler Code

11 Shopweites CSS und JS, ohne das Theme anzufassen

Füge CSS oder JS hinzu, das über den gesamten Storefront läuft — als App-Embed, aktiviert per Deeplink statt Theme-Bearbeitung.

  • Ein App-Embed, kein Theme-Snippet. Schalte shopweites CSS oder JS im App-Embeds-Panel des Theme-Editors ein — ohne eine Snippet-Datei im Theme.
  • Übersteht Updates genauso wie Sektionen. Weil es ein App-Embed ist und nie eine Theme-Datei, kann ein Theme-Update oder -Wechsel es nicht entfernen.
  • Ein Ort für shopweites Styling. Liefere eine gemeinsame Schriftart, ein kleines Utility-Skript oder einen shopweiten Banner-Stil einmal, statt ihn in jeder Sektion zu wiederholen.
Platzieren & Vorschau

12 Platzieren direkt aus der App, vorher live ansehen

Ein Deeplink bringt dich direkt in die Block-Auswahl des Theme-Editors, und eine Live-Vorschau zeigt die Sektion auf Desktop und Mobil, bevor du veröffentlichst.

  • „Im Theme-Editor platzieren“-Button. Springe direkt von einer Sektion in der App an die passende Stelle in der Block-Auswahl des Theme-Editors — keine manuelle Suche nach dem richtigen Template.
  • Desktop-/Mobil-Umschalter in der Vorschau. Wechsle die Live-Vorschau während des Bearbeitens zwischen Desktop und Mobil, damit ein Layout-Problem dir auffällt, nicht deinen Kunden.
  • Sandboxed, mit aufgelösten Tokens. Die Vorschau rendert dein HTML, CSS und JS in einer Sandbox mit Beispiel-Token-Daten — was du siehst, geht so live.
Admin-Sprache

13 Der Admin spricht Deutsch und Englisch

Der gesamte Editor — Beschriftungen, Tooltips und die Erklärungen des Sicherheits-Lints — folgt automatisch der Sprache deines Shopify-Admins.

  • Folgt deiner Shopify-Admin-Sprache. Stelle deinen Shopify-Admin auf Deutsch oder Englisch — der Editor von SectionGuard folgt automatisch, kein separater Sprachschalter zu suchen.
  • Auch Fehler- und Lint-Meldungen. Erklärungen zu blockierten Veröffentlichungen und Validierungsmeldungen sind lokalisiert, nicht nur die Menü-Beschriftungen.
  • Für deutschsprachige Händler gebaut. Von Feld-Labels bis Hilfetexten ist der Admin eine vollwertige deutsche Erfahrung, kein englisches Tool mit übersetzter Oberfläche.
Pro

Starte aus 35 fertigen Vorlagen und bearbeite dann den Code

Pro schaltet die vollständige Vorlagen-Bibliothek frei: 35 fertige Sektionen für Produkt-, Kollektions- und Seiten-Templates, vollständig auf Deutsch und Englisch lokalisiert, jede mit echten Beispielinhalten statt leerer Felder.

35 Vorlagen in 3 Kategorien

13 für Produktseiten, 11 für Kollektionsseiten, 11 für eigenständige Seiten — eine Galerie mit Live-Mini-Vorschau zu jeder einzelnen, kein Platzhalterbild.

Bearbeitbar, nicht abgeriegelt

Jede Vorlage ist echtes HTML, CSS und JS, verdrahtet mit Live-Tokens — ein Ausgangspunkt, der dir gehört und den du änderst, kein abgeriegeltes Widget.

Durchstöbere alle 35 Vorlagen auf der Vorlagen-Seite, sieh, wo die Bibliothek im Pro-Plan landet, oder lies die ehrlichen Trade-offs auf der Vergleichsseite.

Baue Sektionen, die dein Theme überdauern

Eigene Sektionen, die jedes Theme-Update überstehen.

Kostenlos starten mit bis zu drei Sektionen. Kein write_themes-Scope, Abrechnung über Shopify, jederzeit kündbar.

Add to Shopify — FreePreise ansehen

Kostenlos für bis zu 3 Sektionen · Keine Kreditkarte · Läuft auf OS 2.0 & Horizon.