Tipps für Supply

In diesem Artikel erhältst du einige hilfreiche Tipps und Best Practices, die dir bei der Einrichtung von Supply für deinen Onlineshop helfen.

Bildtipps

Produktbilder

Fotos mit höherer Auflösung sehen in Supply hochwertiger und professioneller aus, daher sollten die Bilder mindestens 1.024 Pixel breit und 1.024 Pixel hoch sein. Die Bilder werden bei Bedarf automatisch verkleinert. Fotos mit höherer Auflösung sind besonders wichtig, wenn du den Bildzoom auf deinen Produktseiten aktivierst.

Das optimale Verhältnis von Breite zu Höhe für deine Produktfotos ist ein Quadrat.

Die Slideshow verkleinern

Damit die Slideshow weniger vertikalen Platz auf deiner Startseite einnimmt, solltest du Bilder im Querformat verwenden, also Bilder, die breiter sind als hoch. Du solltest Bilder mit einer Breite von 1.000 Pixel hochladen, damit deine Folien auf größeren Bildschirmen links und rechts keinen Whitespace haben. Bilder mit einer geringeren Breite werden in deiner Slideshow zentriert dargestellt.

Tipps für den Header

Wenn dein Header zu hoch ist, dann kannst du ihn durch Anpassung deines Logos verkleinern. Wenn dein Logo zu groß ist, dann kannst du es verkleinern, indem du die maximale Breite anpasst. Dein Logo kann auch unsichtbare oder weiße Pixel enthalten, die den Whitespace über und unter dem Logo vergrößern. Mithilfe einer Bildbearbeitungssoftware wie Photoshop kannst du diese Pixel aus deinem Logobild herausschneiden. Wenn du dein Logo zugeschnitten hast, kannst du es erneut hochladen. Das Entfernen des Whitespace in deinem Logobild kann die Höhe deines Headers erheblich verringern.

Breite deines Logos anpassen

  1. Klicke auf Header.
  2. Gib im Feld Benutzerdefinierte Logobreite (in Pixel) eine neue Breite ein. Der Standard-Pixelwert ist 305. Verwende einen kleineren Pixelwert, um die Größe deines Logos und damit auch die Höhe deiner Überschrift zu verringern. Wenn du die Breite deines Logos verringerst, wird auch seine Höhe verringert, da dein Logo verkleinert wird, während seine Proportionen erhalten bleiben.
  3. Klicke auf Speichern.

Tipps für die Navigation

Wenn du Supply verwendest, können dir die folgenden Tipps dabei helfen, die Navigation deines Shops zu verbessern.

Ein Dropdown-Menü hinzufügen

Um Dropdown-Menüs zu deinem Hauptmenü hinzuzufügen, musst du zuerst Menüs auf deiner Navigationsseite erstellen.

Best Practices für das Hauptmenü

Wenn eine Zeile in deinem Hauptmenü zu viele Elemente hat, dann werden die letzten Links, die nicht passen, zu einem Dropdown-Menü mit der Bezeichnung Mehr hinzugefügt.

Dieses Verhalten ist nicht strikt von der Anzahl der Links in deinem Hauptmenü abhängig, obwohl es empfehlenswert ist, sich auf fünf oder maximal sechs Links zu beschränken. Wenn du weitere Links hinzufügen möchtest, hast du folgende Möglichkeiten:

  • Verkleinere deine Navigationslinks. Die Schriftgröße dieser Links wird über die Schriftgröße des Hauptmenüs in deinen Typografie-Einstellungen festgelegt.
  • Verwende für jeden Link weniger Zeichen. Ändere zum Beispiel 'Häufig gestellte Fragen' in 'FAQ', 'Kontaktiere uns' in 'Kontakt', 'Katalog' zu 'Shop' und alle 'und' in '&'.

Zu viele Elemente in deiner Navigation zu haben, kann dazu führen, dass deine Seite schwer zu bedienen ist. Mit zu vielen Menüpunkten können deine Kunden wichtige Elemente übersehen. Versuche daher, die Navigation auf fünf oder sechs Elemente zu beschränken. Verwende Drop-down-Menüs, wenn du Zugriff auf mehr als sechs Seiten geben möchtest.

Ein häufiger Fehler ist das Hinzufügen von Links zu jeder Kategorie im Hauptmenü. Versuche stattdessen, die Kategorien in einem Dropdown-Menü unter einem Link wie "Shop" oder "Katalog" aufzulisten. Du kannst die Kategorien auch in Gruppen aufteilen und jeder Gruppe ein Dropdown-Menü zuweisen. Oder du kannst Produkt-Tags verwenden und dadurch Unterkategorien von Produkten erstellen.

Seitenleiste entfernen

Um die Seitenleiste aus deinem Shop zu entfernen, musst du Code zu zwei deiner Theme-Dateien hinzufügen.

  1. Klicke in der Übersicht Abschnitte auf collection-template.liquid.

  2. Findest du has_sidebar in der Datei. Lösche die folgenden Codezeilen:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Klicke auf Speichern.

  2. Klicke in der Übersicht Abschnitte auf collection-list-template.liquid.

  3. Findest du has_sidebar in der Datei. Lösche die folgenden Codezeilen:

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Klicke auf Speichern.

Produkttipps

Die folgenden Tipps helfen dir, deine Produkte mit Supply zu präsentieren.

Verwenden der erweiterten Gruppenfilterung

Wenn du viele Produkte hast, kannst du Untergruppen aktivieren, damit Kunden deine Produkte sortieren können.

  1. Definiere deine Gruppen. Für einen Kamera-Shop können z. B. die Gruppen Marke, Brennweite und Auflösung eingerichtet werden.

  2. Exportiere alle deine Produkte in eine .csv-Datei.

  3. Stelle allen vorhandenen Tags den Namen der Gruppe voran, in der sie sich befinden sollen. Verwende dabei das Format Group_Tag Name an. In diesem Beispiel wären einige der Tags Brand_Canon, Focal Length_18 - 55mm und Resolution_12 MP. Die linke Seite des Unterstrichs ist der Gruppenname und die rechte Seite ist der Tag für das Produkt. Auf jeder Seite des Unterstrichs können Leerzeichen enthalten sein.

  4. Speichere deine .csv-Datei und importiere die Produkte zurück in deinen Shop. Stelle sicher, dass du beim Hochladen der Datei die Option Ersetze alle vorhandenen Produkte, die den gleichen Handle haben. aktivierst, um zu verhindern, dass doppelte Produkte erstellt werden.

  5. Aktiviere die Filterung nach Gruppe auf deinen Kategorieseiten:

    1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
    2. Klicke neben Supply auf Anpassen.
    3. Wähle im Dropdown-Menü oben auf der Seite oder im Menü Vorlagen die Option Kategorieseiten aus.
    4. Klicke auf den Abschnitt Kategorie.
    5. Wähle unter Produktfilter in Seitenleiste die Option Nach Gruppe aus.
    6. Klicke auf Speichern.

Hinweis: Wenn du in deinen Produkt-Tags einfache Anführungszeichen, doppelte Anführungszeichen oder &-Zeichen verwendest, funktioniert die Gruppenfilterung nicht wie erwartet.

Ordne Filtergruppen und Tags neu an

Die Gruppen sowie die in den Gruppen aufgeführten Tags sind alphabetisch sortiert. Ein Shopify Expert kann dir helfen, die Sortierung anzupassen.

Tipps zur Preisgestaltung

Wenn du Supply verwendest, helfen dir die folgenden Tipps bei der Preisgestaltung.

Rundung von Verkaufsbeträgen deaktivieren

  1. Öffne auf der linken Seite unter Assets timber.scss.liquid.

  2. Füge am Ende der Datei den folgenden Code hinzu:

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. Klicke auf Speichern.

Tipps für den Warenkorb

Der folgende Tipp stellt sicher, dass der Warenkorb deines Shops ordnungsgemäß funktioniert, wenn du JavaScript zu Supply hinzugefügt hast.

Ändern des Warenkorbstils, damit erweitertes JavaScript funktioniert

In Supply wird jedes JavaScript, das du zu cart.liquid hinzufügst, in den Warenkorbeinschüben und Warenkorbfenstern nicht ausgeführt. Es wird nur ausgeführt, wenn du /cart an die URL deines Shops anhängst. Zum Beispiel so: http://your.store.url/cart.

Wenn du eine der folgenden Funktionen zu deiner Warenkorbseite hinzufügen möchtest, dann musst du als Warenkorbtyp Seite einstellen:

  • Versandkostenrechner
  • Mehrere Währungen
  • Geschenkpapier
  • Validierung von Warenkorbattributen
  • Datumsauswahl
  • ein Kontrollkästchen mit dem Text "Ich stimme den Bedingungen zu"

Schritte:

  1. Klicke auf Theme-Einstellungen.
  2. Klicke auf Warenkorb.
  3. Wähle in der Dropdown-Liste Warenkorbstil die Option Seite aus.
  4. Klicke auf Speichern.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren