Pop

Hinweis: das Pop-Theme wurde am 30. September 2019 aus dem Theme Store entfernt und erhält keine zukünftigen Aktualisierungen. Wenn du Pop verwendest, kannst du weiterhin Support von Shopify Support erhalten.

Auf der Suche nach Alternativen? Der Shopify Theme Store bietet weitere Themes für Shops mit kleinen Katalogen.

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 und Erscheinungsbild verschiedener Seiten in deinem Onlineshop bestimmen.

Statische Abschnitte sind 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 Abschnitte oder Inhaltsabschnitte auf Seiten wie Produktseiten und Kategorieseiten enthalten. So bestimmt beispielsweise der Abschnitt Produkt das Erscheinungsbild jeder Produktseite in deinem Onlineshop.

Dynamische Abschnitte sind 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 den Produktanbieter oder den Markennamen anzuzeigen, aktiviere Produktanbieter anzeigen. Damit eine Marke oder der Anbieter angezeigt werden können, 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 Überschrift eine Überschrift für die 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.

    Ein YouTube-Link zum Teilen sieht so aus: https://youtu.be/OTJXAUZY9t0. In diesem Hilfeartikel von YouTube erfährst du, wie du den Link zum Teilen eines YouTube-Videos kopierst.

    Ein Vimeo-Link zum Teilen sieht so aus: https://vimeo.com/281332510. In diesem Artikel des Vimeo Help Center erfährst du, wie du den Link zum Teilen eines Vimeo-Videos kopieren kannst.

  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.

Ihrer 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.

    Links zu deinen Social-Media-Konten werden in der Fußzeile deines Onlineshops angezeigt.

  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.

    Du kannst die folgenden Sharing-Schaltflächen hinzufügen:

- Auf Facebook teilen - Auf Twitter twittern - Auf Pinterest pinnen (nicht verfügbar für das Teilen von Blog-Beiträgen)

  1. Klicke auf Speichern.

Hinweis: Um Social-Sharing-Schaltflächen auf Produktseiten und Blog-Beiträgen anzuzeigen, musst du auch die Schaltflächen in den Abschnitten für diese Seiten aktivieren.

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:

```sass {% comment %} Die folgende Medienabfragefunktion erzeugt dies: @media Bildschirm und (Mindestbreite: 1025 Pixel) { ... } Seitenleiste wird nur bei einer Breite von > 1025 Pixel angezeigt. {% 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 den Produktanbieter oder den Markennamen anzuzeigen, aktiviere Produktanbieter anzeigen. Damit eine Marke oder der Anbieter angezeigt werden können, 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. Hinweis: 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 ausprobieren