tutorial

Eine automatische Markenübersichtsseite erstellen

Eine automatische Markenübersichtsseite erstellen
Wer in seinem Shop Produkte vieler verschiedener Marken verkauft, für den kann die Erstellung einer Markenübersichtsseite sinnvoll sein. Wir zeigen Schritt für Schritt, wie Sie in Ihrem Shop eine solche Seite erstellen.

Viele Kunden shoppen nach bestimmten Marken. Da kann es sinnvoll sein, eine Seite zu erstellen, die alle Marken auflistet, die Ihr Shop führt.

Solch eine Seite auf Dauer aktuell zu halten ist aber fehleranfällig und nervig. Man vergisst schnell, neue Marken aufzunehmen und alte, nicht mehr geführte Marken zu löschen.

Glücklicherweise kann man das aber auch automatisieren. In diesem Tutorial zeige ich Ihnen, wie Sie in Ihrem Shop eine Seite erstellen, die alle in Ihrem Shop vorhandenen Marken automatisch alphabetisch auflistet, inkl. Links zu den jeweiligen Markenseiten.

Wichtiger Hinweis

Bevor Sie Änderungen an einem Theme vornehmen, legen Sie unbedingt ein Backup des Themes an! Klicken Sie dazu neben dem Theme, das Sie ändern wollen, auf Actions und dann auf Duplicate.

Neues Page Template erstellen

Zunächst brauchen wir hierfür ein neues Seiten-Template. Gehen Sie in Ihrer Shop-Administration zu Online Store -> Themes und klicken Sie beim aktiven Theme auf Actions und im Dropdown-Menü dann auf Edit HTML/CSS.

Dies öffnet den Theme-Editor. In der linken Spalte sehen Sie nun alle Dateien, aus denen Ihr Theme besteht.

Klicken Sie unter der Überschrift Templates auf Add a new template. In dem Dialog wählen Sie dann im Dropdown-Menü page aus und im Textfeld daneben geben Sie marken ein.

Neues Seiten-Template anlegen

Klicken Sie dann auf Create template.

Damit wird das neue Template erstellt und auch gleich im Editor geöffnet.

Wie dieses Template konkret aussieht, unterscheidet sich von Theme zu Theme. Aber irgendwo im Code dieses Templates sollte sich folgende Zeile befinden:

{{ page.content }}

Diesen Code ersetzen Sie nun einfach mit folgendem Code:

{% assign last_letter = '' %}
{% for vendor in shop.vendors %}
    {% assign current_letter = vendor | slice: 0 %}
    {% if current_letter != last_letter %}
        {% assign last_letter = current_letter %}
        <h2>{{ current_letter | upcase }}</h2>
        {% endif %}
    <p>{{ vendor | link_to_vendor }}</p>
{% endfor %}

Speichern Sie das Template nun, indem Sie in der Editor-Toolbar auf Save klicken.

Die Markenübersichtsseite erstellen

Erstellen Sie nun unter Online Store -> Pages eine neue Seite, geben Sie den gewünschten Seitentitel ein und wählen Sie rechts im Bereich Template das zuvor erstellte Seiten-Template "page.marken".

Markenseite erstellen

Den Seiteninhalt lassen Sie leer, dieser wird beim Aufruf der Seite im Shop automatisch erstellt. Speichern Sie die Seite nun mit einem Klick auf Save.

Wenn Sie die so erstellte Seite nun im Shop aufrufen, sollte Sie so oder so ähnlich wie unten abgebildet aussehen. Das genaue Aussehen bestimmt letztlich das in Ihrem Shop verwendete Theme.

Markenübersichtsseite

Weiterlesen

Shopify-Themes im eigenen Shop testen
Wesentliche Produktmerkmale in Warenkorb und Checkout anzeigen