Pop

Ein minimalistisches Theme, das dafür sorgen soll, dass deine Inhalte zugänglich bleiben. Pop ist ideal für Shops mit kleinem bis mittelgroßem Inventar. Die Navigation erfolgt über eine große Seitenleiste, mit der du problemlos auf deinen Inhalt zugreifen kannst.

Beispiel-Onlineshop mit dem Theme

Theme-Editor

Verwende den Theme-Editor, um dein Theme anzupassen. Mit dem Theme-Editor kannst du die Inhalte bearbeiten, die in deinem Shop angezeigt werden, indem du Theme-Abschnitte auswählst und bearbeitest. Du kannst das Design und Layout des Shops und die Funktionalitäten mit den Theme-Einstellungen festlegen.

Theme-Inhalte werden über Abschnitte erstellt. Abschnitte sind anpassbare Inhaltsblöcke, die das Layout der verschiedenen Seiten deines Onlineshops bestimmen. Mit dem aktualisierten Theme-Editor kannst du Abschnitte hinzufügen, entfernen, bearbeiten und anpassen.

Die Themes von Shopify haben folgende Arten von Abschnitten:

  • Statische Abschnitte: Abschnitte, die an vordefinierten Standorten in deinem Onlineshop angezeigt werden. Diese Abschnitte können nicht entfernt oder neu angeordnet werden. Statische Abschnitte können Kopfzeilen, Fußzeilen, Navigations- oder Inhaltsabschnitte auf Seiten wie Produktseiten und Kategorieseiten enthalten. So bestimmt beispielsweise der Abschnitt Produkt das Erscheinungsbild jeder Produktseite in deinem Onlineshop.
  • Dynamische Abschnitte: optionale Abschnitte, die du verwenden kannst, um das Layout deiner Startseite anzupassen. Auf der Startseite deines Shops kannst du dynamische Abschnitte Hinzufügen, Neu anordnen und Entfernen, um das Seitenlayout zu erstellen. Du kannst bis zu 25 dynamische Abschnitte auf deiner Startseite haben.

Erfahren Si mehr über die einzigartige Auswahl an Abschnitten von Pop und wie du diese optimale an dein Geschäft anpasst.

Pop enthält die folgenden statischen Abschnitte:

  • Logo und Menü
  • Ankündigungsleiste
  • Fußzeile
  • Produktseiten
  • Kategorieseiten
  • Listenseite für Kategorien
  • Artikel

Dynamische Abschnitte

Du kannst dynamische Abschnitte hinzufügen, neu anordnen und entfernen, um das Layout deiner Startseite anzupassen. Für jedes Theme steht eine einzigartige Auswahl dynamischer Abschnitte zur Verfügung.

Pop enthält die folgenden dynamischen Abschnitte:

  • Blog-Beiträge
  • Kategorieliste
  • Vorgestellte Kategorie
  • Bild mit Text
  • Slideshow
  • Vorgestelltes Produkt
  • Newsletter
  • Karte
  • Rich Text
  • Video
  • Benutzerdefiniertes HTML

Produktseiten

Im Abschnitt Produktseite kannst du die folgenden Elemente hinzufügen oder entfernen:

  • Die Produktmarke oder den Produktanbieter
  • Bildzoom
  • Ähnliche Produkte
  • Eine Mengenauswahl
  • Eine dynamische Checkout-Button
  • Social-Sharing-Symbole

So bearbeitest du die Einstellungen für Produktseiten:

  1. Wähle im Dropdown-Menü der oberen Leiste den Eintrag Produktseiten aus.

  2. Klicke auf Abschnitte.

  3. Klicke auf Produktseiten.

  4. Um die Produktmarke und den Lieferanten anzuzeigen, aktiviere Produktanbieter anzeigen. Damit eine Marke oder ein Produktanbieter angezeigt werden kann, musst du dem Produkt einen Anbieter hinzufügen.

  5. Wenn du möchtest, dass Kunden Produktbilder vergrößern können, indem sie mit dem Mauszeiger darüber fahren, aktiviere die Option Bildzoom aktivieren.

  6. Um eine Auswahl ähnlicher Produkte unten auf der Seite anzuzeigen, aktiviere die Option Ähnliche Produkte anzeigen. Die Kategorie, zu der das Produkt gehört, bestimmt die ähnlichen Produkte, die angezeigt werden. Damit ähnliche Produkte angezeigt werden, musst du für das Produkt eine Kategorie erstellen oder es zu einer vorhandenen Kategorie hinzufügen. Wenn das Produkt nicht Teil einer Kategorie ist, werden keine ähnlichen Produkte angezeigt.

  7. Um eine Mengenauswahl anzuzeigen, aktiviere die Option Mengenauswahl anzeigen.

  8. Um einen dynamischen Checkout-Button anzuzeigen, aktiviere die Option dynamischen Checkout-Button anzeigen.

  9. Um die Social-Sharing-Symbole anzuzeigen, aktiviere die Option Teilen von Produkten aktivieren.

  10. Klicke auf Speichern.

Newsletter

Du kannst eine Newsletter-Anmeldung zu deiner Startseite hinzufügen. Auf diese Weise kannst du E-Mail-Adressen von Kunden für E-Mail-Marketingkampagnen sammeln. Auf dem Shopify Blog kannst du mehr über E-Mail-Marketing erfahren.

So fügst du eine Newsletter-Anmeldung zu deiner Startseite hinzu:

  1. Klicke auf Abschnitte.

  2. Klicke auf Bereich hinzufügen > Newsletter.

  3. Gib im Feld über Schrift eine Überschrift für deine Newsletter-Anmeldung ein. Die Standardüberschrift ist "Abonniere unseren Newsletter".

  4. Gib im Feld Subtext eine Unterüberschrift für deine Newsletter-Anmeldung ein. Der Standardtext lautet "Werbeaktionen, neue Produkte und Verkäufe. Direkt in deinen Posteingang."

  5. Lege die Hintergrundfarbe für den Newsletter-Anmeldebereich fest, indem du auf das Farbfeld Hintergrundfarbe klickst und eine Farbe auswählst.

  6. Klicke auf Speichern.

Video

Du kannst deiner Startseite ein auf YouTube oder Vimeo gehostetes Video hinzufügen. Videos können Kunden gewinnen und Interesse an deinem Geschäft wecken.

So fügst du deiner Startseite ein Video hinzu:

  1. Klicke auf Abschnitte.

  2. Klicke auf Abschnitt hinzufügen > Video.

  3. Gib im Feld Überschrift eine Überschrift für das Video ein.

  4. Gib den Link zum Teilen des Videos in das Feld Video-Link ein.

  5. Klicke auf Speichern.

Benutzerdefiniertes HTML

Im Abschnitt Benutzerdefiniertes HTML kannst du HTML-Code verwenden, um benutzerdefinierte Inhalte für deine Startseite zu erstellen. Beispielsweise kannst du mit HTML Textblöcke formatieren, Tabellen erstellen oder Inhalte von einer externen Website einbetten.

Deiner Startseite einen benutzerdefinierten HTML-Abschnitt hinzufügen

  1. Klicke auf Abschnitt hinzufügen.

  2. Klicke auf Benutzerdefiniertes HTML und dann auf Auswählen.

  3. Klicke auf Benutzerdefiniertes HTML und gib den HTML-Code ein, den du auf deiner Startseite hinzufügen möchtest.

  4. Klicke auf Speichern.

Mithilfe der Theme-Einstellungen kannst du die Farben und die Typografie in deinem Onlineshop anpassen. Du kannst auch Links zu deinen Social-Media-Konten einrichten, deine Warenkorbeinstellungen bearbeiten und ein Favicon hinzufügen.

Pop enthält die folgenden Theme-Einstellungen:

  • Farben

  • Typografie

  • Favicon

  • Warenkorbseite

  • Social Media

  • Checkout

Farben

Du kannst die Farben für die verschiedenen Abschnitte deines Onlineshops bestimmen.

Farbeinstellungen anpassen

  1. Klicke auf Theme-Einstellungen.
  2. Klicke auf Farben.
  3. Um die Farbauswahl zu öffnen, klicke auf das Farbfeld für die Farbe des Inhaltstyps, die du ändern möchtest. Der Bereich Zuletzt ausgewählt zeigt Farben an, die du kürzlich für dein Theme ausgewählt hast. Im Bereich Aktuell verwendet werden Farben angezeigt, die du derzeit in anderen Teilen deines Themes verwendest.

    Um einen bestimmten Hex-Farbcode festzulegen, klicke auf das Textfeld, um die Farbe einzugeben.

    Um die Farbe auf transparent setzen zu können, lösche den Hex-Codewert aus dem Textfeld.

  4. Klicke auf Speichern.

Typografie

Du kannst die Schriftart und Schriftgröße für Texte in deinem Onlineshop festlegen. Du kannst eine Systemschriftart oder eine benutzerdefinierte Schriftart auswählen.

Es wird empfohlen, dass du in deinem Shop Systemschriftarten verwendest. Die Verwendung von Systemschriftarten verhindert, dass neue Schriftarten auf den Computer deines Kunden heruntergeladen werden, was sich negativ auf die Ladegeschwindigkeit deines Shops auswirken kann. Die Schriftart, die auf dem Computer deines Kunden angezeigt wird, hängt von dessen Betriebssystem ab. Mehr Informationen über Systemschriftarten.

Typografieeinstellungen anpassen

  1. Klicke auf Theme-Einstellungen.

  2. Klicke auf Typografie.

  3. Klicke für jede Art von Text auf Ändern, um die Schriftartenauswahl zu verwenden.

  4. Erkunde die verfügbaren Schriftarten über das Suchfeld oder indem du auf Weitere laden klickst.

    Um alle verfügbaren Schriftarten anzuzeigen, sieh dir die Schriftartenbibliothek von Shopify an.

  5. Klicke auf den Namen der Schriftart, die du verwenden möchtest.

  6. Um die Schriftart in eine andere Formatvorlage zu ändern, klicke auf den Namen der aktuellen Schriftart und wähle dann eine neue Schriftart aus dem Dropdown-Menü aus.

  7. Klicke auf Auswählen.

  8. Klicke auf Speichern.

Social Media

Du kannst Social-Sharing-Schaltflächen für deine Produkte und Blog-Beiträge sowie Links zu deinen Social-Media-Konten hinzufügen.

So passt du die Social-Media-Einstellungen an:

  1. Klicke auf Theme-Einstellungen.

  2. Klicke auf Social Media.

  3. Um ein Social-Sharing-Bild hochzuladen, klicke im Bereich Social-Sharing-Bild auf Bild auswählen oder auf Kostenlose Bilder entdecken.

  4. Um Links zu deinen Social-Media-Konten hinzuzufügen, gib im Bereich Social-Media-Konten die Links zu den Konten in die dafür vorgesehenen Felder ein. Gib vollständige Links ein, z. B. https://instagram.com/shopify oder https://twitter.com/shopify.

  5. Um deinen Produkten und Blog-Beiträgen Schaltflächen für das Teilen in sozialen Netzwerken hinzuzufügen, aktiviere im Bereich Social-Sharing-Option einige oder alle Kontrollkästchen.

- **Share on Facebook**
- **Tweet on Twitter**
- **Pin on Pinterest** (not available for blog post sharing)
  1. Klicke auf Speichern.

Untermenüs zur Seitenleiste hinzufügen

Um Pulldown-Menüs zu deinem Hauptmenü hinzuzufügen, musst du Menüs auf deiner Navigationsseite erstellen. In diesem Artikel erfährst du, wie du diesen Prozess durchläufst.

Optimale Größe des Shop-Logos

Ein proportional kompaktes Logo wird im Pop-Theme am besten aussehen, da es dein Logo in einer Seitenleiste anzeigt. Bannerähnliche Logos mit einer großen Breite und einer relativ geringen Höhe werden in diesem Theme dagegen nicht gut aussehen.

Die maximale Breite für dein Logo beträgt 450 Pixel und die maximale Höhe 200 Pixel. Deine hochgeladene Logodatei wird so angepasst, dass sie diesen Einschränkungen entspricht.

Das ideale Format ist PNG.

Reduzieren des Weißraums um das Logo der Seitenleiste

Bevor du die durch das Pop-Design eine über und unter deinem Logo hinzugefügte Füllung entfernst, ist es äußerst wichtig, eventuelle Füllungen zu beschneiden, die möglicherweise aus dem Bild selbst stammen. Bevor du die Datei in Shopify hochlädst, musst du den Weißraum oder die transparenten Pixel, die deine Logografik umgeben, abschneiden.

Hier ist ein Logo mit viel Weißraum drumherum:

Hier ist das gleiche Logo nach entsprechendem Beschnitt (nachdem der Weißraum beschnitten wurde):

Das unbeschnittene Logo wird unten im Pop-Theme angezeigt:

Das beschnittene Logo wird unten im Pop-Theme angezeigt:

Sobald du ein getrimmtes Logo in deine Theme-Assets hochgeladen hast, kannst du die Breite deiner Seitenleiste anpassen, indem du zum Theme-Editor gehst. Bearbeite im Abschnitt Header & Navigation den Wert "Größe > Desktop-Menü Breite" nach deinem Geschmack.

Wenn du die Polsterung über und unter deinem Logo reduzieren möchtest, gibt es eine weitere, jedoch nicht unterstützte Maßnahme. Gehe hierbei folgendermaßen vor:

  1. Klicke unter Assets auf Timber. scss. Liquid, um dein Theme-Stylesheet im Online-Code-Editor zu öffnen, oder gehe zu dieser URL.

  2. Füge am Ende der Datei Folgendes hinzu:

{% comment %}
  The following media query function produces this:
  @media screen and (min-width: 1025px) { ... }
  Sidebar is only shown when width > 1025 pixels.
{% endcomment %}

@include at-query ($min, $large) {
  .header-logo {
    margin-bottom: 30px /* original is 60px */;
  }

  .site-header {
    padding-top: 30px /* original is 90px */;

    .hr--small {
      margin: 0 auto 10px /* original is 15px auto 30px */;
    }
  }
}
  1. Speichere deine Datei.

Einstellungen für die Produktseite bearbeiten

Im Abschnitt Produktseite kannst du die folgenden Elemente hinzufügen oder entfernen:

  • Die Produktmarke oder den Produktanbieter
  • Bildzoom
  • Ähnliche Produkte
  • Eine Mengenauswahl
  • Eine dynamische Checkout-Button
  • Social-Sharing-Symbole

So bearbeitest du die Einstellungen für Produktseiten:

  1. Wähle im Dropdown-Menü der oberen Leiste den Eintrag Produktseiten aus.

  2. Klicke auf Abschnitte.

  3. Klicke auf Produktseiten.

  4. Um die Produktmarke und den Lieferanten anzuzeigen, aktiviere Produktanbieter anzeigen. Damit eine Marke oder ein Produktanbieter angezeigt werden kann, musst du dem Produkt einen Anbieter hinzufügen.

  5. Wenn du möchtest, dass Kunden Produktbilder vergrößern können, indem sie mit dem Mauszeiger darüber fahren, aktiviere die Option Bildzoom aktivieren.

  6. Um eine Auswahl ähnlicher Produkte unten auf der Seite anzuzeigen, aktiviere die Option Ähnliche Produkte anzeigen. Die Kategorie, zu der das Produkt gehört, bestimmt die ähnlichen Produkte, die angezeigt werden. Damit ähnliche Produkte angezeigt werden, musst du für das Produkt eine Kategorie erstellen oder es zu einer vorhandenen Kategorie hinzufügen. Wenn das Produkt nicht Teil einer Kategorie ist, werden keine ähnlichen Produkte angezeigt.

  7. Um eine Mengenauswahl anzuzeigen, aktiviere die Option Mengenauswahl anzeigen.

  8. Um einen dynamischen Checkout-Button anzuzeigen, aktiviere die Option dynamischen Checkout-Button anzeigen.

  9. Um die Social-Sharing-Symbole anzuzeigen, aktiviere die Option Teilen von Produkten aktivieren.

  10. Klicke auf Speichern.

Welche Produktbilder eignen sich am besten für Pop?

Fotos mit höherer Auflösung sehen im Pop-Theme eleganter und professioneller aus und sollten daher idealerweise mindestens 1024 x 1024 Pixel groß sein. Bilder werden bei Bedarf automatisch verkleinert. Je höher die Qualität ist, desto besser.

Fotos mit höherer Auflösung sind besonders wichtig, wenn du die Bildzoomfunktion verwendest, die du im Theme-Editor im Abschnitt Produktseiten aktivieren kannst.

Im Idealfall weisen die Feature-Bilder deiner Produkte das gleiche Verhältnis der Breite zur Höhe auf, um auf den Kategorieseiten optimal dargestellt zu werden.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen