So fügen Sie einer beliebigen Vorlage einen Shopify-Homepage-Abschnitt hinzu

Shopify-Designs bieten dynamische Abschnitte auf jeder Homepage. Inhalte wie Hero-Banner, Karussells, vorgestellte Blogs und Sammlungen, um nur einige zu nennen. Dadurch wird das Bearbeiten Ihrer Homepage und das Versehen Ihres Shops mit einem benutzerdefinierten Aussehen zum Kinderspiel!

Wäre es jedoch nicht schön, einige dieser Abschnitte mit dynamischen Inhalten an anderer Stelle verfügbar zu haben? Wollten Sie schon immer ein Hero-Banner oder ein vorgestelltes Produkt zu einer regulären Inhaltsseite hinzufügen?

Bevor wir beginnen, würde ich empfehlen, eine lokale Entwicklungsumgebung zum Bearbeiten Ihrer Designdateien einzurichten. Mit Theme Kit können Sie direkt auf Ihrem lokalen Computer mit Ihrem bevorzugten Code-Editor bearbeiten. Dies ist optional, macht das Schreiben und Verwalten von Code jedoch viel einfacher.

Die Schritte

Gehen wir die Schritte durch, um genau das zu tun! Für dieses Tutorial gehen wir davon aus, dass Sie ein Hero-Banner zu einer Seite mit dem Namen About hinzufügen.

Themendateien

1. Suchen Sie für den Hero-Abschnitt, den Sie hinzufügen möchten, die vorhandene Datei unter [your-site-name]/sections/hero.liquid . Erstellen Sie eine Kopie für jede Seite , von der Sie eine Instanz haben möchten. In unserem Fall eine für die About-Seite: hero-about.liquid .
2. Erstellen Sie für die Seite, in der Sie den Hero-Abschnitt verwenden möchten, eine neue Seitenvorlage . Suchen Sie [your-site-name]/templates/page.liquid und erstellen Sie eine Kopie: page.about.liquid .
3. Fügen Sie in page.about.liquid den Liquid-Code hinzu, um Ihren neuen Heldenabschnitt einzuschließen: {% section 'hero-about' %} .

Shopify-Admin

1. Navigieren Sie im Shopify-Adminbereich zu Onlineshop > Seiten und bearbeiten Sie Ihre Info-Seite.
2. Verwenden Sie im Abschnitt „Vorlage“ das Dropdown-Menü, um Ihre neue Vorlage auszuwählen. Es sollte als page.about verfügbar sein.
3. Navigieren Sie zurück zum Online Store und aktivieren Sie den Anpassen-Link für Ihr aktuelles Design.
4. Verwenden Sie die Seitenauswahl oben links, um die Info-Seite zu finden.
5. Der neue Abschnitt sollte in der Seitenleiste des Editors zur Bearbeitung verfügbar sein.

Und da haben Sie es! Ihre Seite sollte jetzt eine eindeutige Instanz des Hero-Banner-Abschnitts enthalten, den Sie der Über-Seite-Vorlage hinzugefügt haben. Gut gemacht! 🙌

Bewerben Sie sich woanders

Die gleichen grundlegenden Schritte können auch angewendet werden, um einen dynamischen Inhaltsbereich zu jeder in Ihrem Design verfügbaren Vorlage hinzuzufügen. Es wäre wichtig, eine Kopie der Abschnittsdatei ( hero-[template-name].liquid ) zu erstellen und den Abschnittscode in die Vorlage aufzunehmen, wo der Abschnitt ausgegeben werden soll ( {% section 'hero-[template-name]' %} ).

Stellen Sie sicher, dass Sie keinen Abschnitt in einen anderen Abschnitt einfügen, da dies dazu führt, dass auf Ihrer Website ein Fehler ausgegeben wird.

Hat dieses Tutorial geholfen? Fehlten Schritte? Haben Sie ein süßes Shopify-Theme zum Angeben? Lass es mich in den Kommentaren wissen!

Fröhliches Hacken! 💻😄💖