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

Welche Produktbilder eignen sich am besten für Supply?

Fotos mit höherer Auflösung sehen im Supply-Theme besser aus und sollten daher mindestens 1024 x 1024 Pixel groß sein. Bilder werden bei Bedarf automatisch verkleinert.

Fotos mit höherer Auflösung sind besonders wichtig, wenn du die Option Bildzoom aktivieren nutzt. Du kannst sie aktivieren, indem du in der Vorschau des Theme-Editors eine Produktseite öffnest und dann auf Produkt unter der Registerkarte Bereiche klickst.

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

Die Kopfzeile verkleinern

Es gibt einige Möglichkeiten, wie du den oberen Abschnitt deiner Seite verkleinern kannst.

Wenn dein Logo zu groß ist, kannst du dessen Größe reduzieren, indem du in den Theme-Einstellungen die maximale Breite anpasst. Wenn du die Breite deines Logos verringerst, wird analog dazu auch die Höhe reduziert, da Shopify dein Logo verkleinert und dabei dessen Proportionen beibehält. Passe im Theme-Editor im Abschnitt Überschrift den Wert für die Benutzerdefinierte Logobreite an. Der Standardwert beträgt 305. Verwende einen kleineren Pixelwert, um die Größe deines Logos und damit auch die Höhe deiner Überschrift zu verringern.

Dein Logo kann auch unsichtbare oder weiße Pixel enthalten, die zum weißen Bereich über und unter dem Bild beitragen. Mit einem Programm wie Photoshop kannst du diese Pixel von deinem Logo abschneiden. Nachdem dein Logo zugeschnitten wurde, lade es erneut mit dem Theme-Editor hoch. Wenn du den Weißraum in deinem Logobild zuschneidest, kann die Höhe deiner Kopfzeile erheblich reduziert werden.

Die Slideshow verkleinern

Verwende Bilder im Querformat (Bilder, die breiter als hoch sind).

Obwohl der Theme-Editor das Hochladen von Bildern vorschlägt, die 1000 Pixel breit und 500 Pixel hoch sind, kannst du auch kleinere Bilder verwenden. Eine Breite von 1000 Pixel wird empfohlen, damit deine Folien auf größeren Bildschirmen links und rechts keinen Leerraum haben. Bilder mit einer geringeren Breite werden in deiner Slideshow zentriert:

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 es für eine Zeile in deinem Hauptmenü zu viele Einträge gibt, 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 die Navigationslinks, indem du die Schriftgröße des Hauptmenüs unter Schriftart auf der Registerkarte Theme-Einstellungen reduzierst.
  • 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 Dropdown-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 darüber Unterkategorien von Produkten erstellen.

Entfernen der Seitenleiste

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 optimal zu präsentieren.

Verwenden der erweiterten Gruppenfilterung

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

  1. Definiere deine Gruppen. Im obigen Bild gibt es die Gruppen Brand, Focal Length und Resolution.

  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. Speicher deine .csv-Datei und importiere die Produkte zurück in deinen Shop. Stelle sicher, dass du beim Hochladen der Datei die Option Alle vorhandenen Produkte mit dem gleichen Handle ersetzen aktivierst, um zu verhindern, dass doppelte Produkte erstellt werden.

  5. Öffne im Theme-Editor eine Kategorieseite. Klicke auf der Registerkarte Abschnitte auf Kategorie. Aktiviere dann die Option Nach Gruppe.

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-Experte kann Ihnen 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. Klicke auf der linken Seite unter Assets auf den Link timber.scss.liquid, um das Theme-Stylesheet im Online-Code-Editor zu öffnen.

  2. Füge am Ende der Datei Folgendes 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 Warenkorbmodalen nicht ausgeführt. Es wird nur ausgeführt, wenn du /cart an die URL deines Shops anhängst. Zum Beispiel http://your.store.url/cart.

Du musst den Warenkorbstil auf "Seite" einstellen, wenndSdu ie der Warenkorbseite eine der folgende Funktionen hinzufügen möchten:

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

So änderst du den Warenkorbstil auf "Seite":

  1. Klicke auf Theme-Einstellungen.

  2. Klicken Sie 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