Pop

Hinweis: Das Pop-Theme wurde am 30. September 2019 aus dem Theme Store entfernt und wird in Zukunft nicht mehr aktualisiert. Wenn du Pop verwendest, kannst du weiterhin Support vom 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. Die Symbolleiste des Theme-Editors ist in Abschnitte und Theme-Einstellungen unterteilt.

Mithilfe von Abschnitten kannst du den Inhalt und das Layout der verschiedenen Seiten in deinem Shop ändern. Mithilfe der Theme-Einstellungen kannst du die Schriftarten und Farben deines Shops anpassen und Änderungen an deinen Social-Media-Links und Checkout-Einstellungen vornehmen.

Abschnitte sind anpassbare Inhaltsblöcke, die das Layout der verschiedenen Seiten deines Onlineshops bestimmen.

  • Home-Abschnitte enthalten bestimmte Features bzw. Extras, z. B. eine Slideshow oder eine Möglichkeit zur Newsletter-Anmeldung, die du hinzufügen, neu anordnen oder entfernen kannst. du kannst bis zu 25 Abschnitte auf deiner Startseite haben.

  • Jeder Seitentyp hat seine eigenen Abschnitte. So bestimmt beispielsweise der Abschnitt "Produktseite" das Layout jeder Produktseite in deinem Onlineshop.

  • Seitenabschnitte befinden sich immer in bestimmten Bereichen in deinem Onlineshop. Du kannst Anpassungen daran vornehmen, sie aber nicht neu anordnen oder entfernen.

  • Jedes Theme enthält feste Abschnitte wie Header und Fußzeile, die auf jeder Seite deines Onlineshops angezeigt werden.

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 können Sie die folgenden Elemente hinzufügen oder entfernen:

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

So bearbeitest du die Einstellungen für Produktseiten:

  1. Wählen Sie 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, aktivieren Sie 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.

Newsletter-Bereich auf einer Website. Es ist ein Feld vorhanden, in dem Kunden eine E-Mail-Adresse eingeben können, und die Schaltfläche

So fügen Sie eine Newsletter-Anmeldung zu Ihrer Startseite hinzu:

  1. Klicken Sie neben Popauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke auf Bereich hinzufügen > Newsletter.

  4. Gib im Feld Überschrift eine Überschrift für die Newsletter-Anmeldung ein. Die Standardüberschrift ist "Abonniere unseren Newsletter".

  5. 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."

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

  7. 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. Klicken Sie neben Popauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicken Sie auf Abschnitt > Video Hinzufügen.

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

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

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

    Ein Link zum Teilen auf Vimeo sieht folgendermaßen aus: https://vimeo.com/281332510. In diesem Artikel des Vimeo-Hilfecenters erfahre, wie du den Link zum Teilen eines Vimeo-Videos kopierst.

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

So fügst du deiner Startseite benutzerdefiniertes HTML hinzu:

  1. Klicken Sie neben Popauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke auf Abschnitt hinzufügen.

  4. Klicke im Bereich Erweitertes Layout auf Benutzerdefiniertes HTML > Hinzufügen.

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

  6. Klicke auf Speichern.

Pop enthält die folgenden Theme-Einstellungen:

  • Farben
  • Typografie
  • Favicon
  • Warenkorbseite
  • Social Media
  • Bezahlung

Farben

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

Farbeinstellungen anpassen

  1. Klicke neben Pop auf Anpassen.

  2. Klicke auf Theme-Einstellungen.

  3. Klicke auf Farben.

  4. Klicke für jeden Inhaltstyp auf das Farbfeld, um die Farbauswahl zu verwenden. Der Bereich Zuletzt ausgewählt zeigt Farben an, die du zuletzt für dein Theme ausgewählt hast. Im Bereich Aktuell verwendet werden Farben angezeigt, die du derzeit in anderen Abschnitten deines Themes verwendest.

    Um die Farbe auf transparent festzulegen, klicke auf Keine.

  5. Klicke auf Speichern.

Typografie

Du kannst die Schriftart und Schriftgröße für Texte in deinem Onlineshop festlegen.

Typografieeinstellungen anpassen

  1. Klicke neben Pop auf Anpassen.

  2. Klicke auf Theme-Einstellungen.

  3. Klicke auf Typografie.

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

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

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

  7. Um den Stil der Schriftart zu ändern (z. B. fett oder kursiv), klicke auf Regulär. Klicke als Nächstes auf den gewünschten Stil und dann auf Auswählen.

  8. Klicke auf Speichern.

Social Media

Du kannst deinen Produkten und Blog-Beiträgen Schaltflächen für das Teilen in sozialen Netzwerken sowie Links zu Social-Media-Konten hinzufügen.

So passt du die Social-Media-Einstellungen an:

  1. Klicken Sie neben Popauf Anpassen.

  2. Klicke auf Theme-Einstellungen.

  3. Klicke auf Soziale Medien.

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

  5. Um Links zu Ihren Social-Media-Konten hinzuzufügen, geben Sie im Bereich Social -Media-Konten die Links zu ihren Konten in die dafür vorgesehenen Felder ein. Geben Sie vollständige Links ein, z. b. https://instagram.com/shopifyoder https://twitter.com/shopify.

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

  6. 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 Schaltflächen für das Teilen in sozialen Netzwerken auf Produktseiten und in Blog-Beiträgen anzuzeigen, musst du die Schaltflächen auch in den Abschnitten für diese Seiten aktivieren.

Untermenüs zur Seitenleiste hinzufügen

Um Dropdown-Menüs zu deinem Hauptmenü hinzuzufügen, musst du zuerst Menüs auf deiner Navigationsseite erstellen. In diesem Artikel erfährst du, wie du dafür vorgehen musst.

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.

Vergrößern deines Logos auf mobilen Geräten

Um dein Logo in jedem Layout größer zu machen, ist es zunächst äußerst wichtig, sämtlichen Weißraum oder transparente Pixel, die deine Logo-Grafik umgeben, vor dem Hochladen der Datei in Shopify zu beschneiden.

Hier ist ein Logo mit viel Weißraum drumherum:

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

Das unbeschnittene Logo wird unten im Pop-Theme angezeigt:

Das beschnittene Logo wird unten im Pop-Theme angezeigt:

Sobald du weißt, dass dein Logo nicht aufgrund des Weißraums verkleinert wurde, kannst du die Höhe deines mobilen Headers anpassen, damit dein Logo etwas mehr Platz erhält. Dadurch wird dein Logo größer.

Begeben Sie sich in den Theme-Editor und erhöhen Sie im Bereich Header & Navigation den Wert "Größe > Höhe mobiles Menü".

Vergrößern deines Logos in der Seitenleiste

Um dein Logo in jedem Layout größer zu machen, ist es zunächst äußerst wichtig, sämtlichen Weißraum oder transparente Pixel, die deine Logo-Grafik umgeben, vor dem Hochladen der Datei in Shopify zu beschneiden.

Hier ist ein Logo mit viel Weißraum drumherum:

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

Das Logo mit Weißraum wird nach Hochladen in das Pop-Theme unten angezeigt:

Das beschnittene Logo wird unten im Pop-Theme angezeigt:

Sobald du weißt, dass dein Logo nicht aufgrund des Weißraums verkleinert wurde, kannst du die Breite deiner Seitenleiste anpassen, damit dein Logo etwas mehr Platz erhält. Dadurch wird dein Logo größer.

Begib dich in den Theme-Editor und erhöhe im Bereich Header & Navigation den Wert "Größe > Breite Desktop-Menü".

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 beschnittenes Logo in deine Theme-Objekte hochgeladen hast, kannst du die Breite deiner Seitenleiste anpassen, indem du zum Theme-Editor gehst. Ändere im Bereich Header & Navigation den Wert "Größe > Breite Desktop-Menü" nach Bedarf.

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. Klicken Sie unter Assets auf den Link timber.scss.liquid, um das Theme-Stylesheet im Online-Code-Editor zu öffnen. Alternativ können Sie auf diese URL gehen.

  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. Speicher deine Datei.

Einstellungen für die Produktseite bearbeiten

Im Abschnitt Produktseite können Sie die folgenden Elemente hinzufügen oder entfernen:

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

So bearbeitest du die Einstellungen für Produktseiten:

  1. Wählen Sie 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, aktivieren Sie 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