Pop

Hinweis: Das Pop-Theme wurde am 30. September 2019 aus dem Theme Store entfernt und wird in Zukunft nicht mehr aktualisiert. Wenn Sie Pop verwenden, können Sie 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 Ihre 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 Sie problemlos auf Ihren Inhalt zugreifen können.

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 Ihres 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 Ihrem 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 bearbeiten Sie die Einstellungen für Produktseiten:

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

  2. Klicke auf Abschnitte.

  3. Klicken Sie auf Produktseiten.

  4. Um den Produktanbieter oder den Markennamen anzuzeigen, aktivieren Sie Produktanbieter anzeigen. Damit eine Marke oder der Anbieter angezeigt werden können, müssen Sie dem Produkt einen Anbieter hinzufügen.

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

  6. Um eine Auswahl ähnlicher Produkte unten auf der Seite anzuzeigen, aktivieren Sie 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, müssen Sie 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, aktivieren Sie die Option Mengenauswahl anzeigen.

  8. Um einen dynamischen Checkout-Button anzuzeigen, aktivieren Sie 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

Sie können eine Newsletter-Anmeldung zu Ihrer Startseite hinzufügen. Auf diese Weise können Sie E-Mail-Adressen von Kunden für E-Mail-Marketingkampagnen sammeln. Auf dem Shopify Blog können Sie 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. Klicke neben Pop auf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicken Sie auf Bereich hinzufügen > Newsletter.

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

  5. Geben Sie im Feld Subtext eine Unterüberschrift für Ihre Newsletter-Anmeldung ein. Der Standardtext lautet "Werbeaktionen, neue Produkte und Verkäufe. Direkt in Ihren Posteingang."

  6. Legen Sie die Hintergrundfarbe für den Newsletter-Anmeldebereich fest, indem Sie auf das Farbfeld Hintergrundfarbe klicken und eine Farbe auswählen.

  7. Klicke auf Speichern.

Video

Sie können Ihrer Startseite ein auf YouTube oder Vimeo gehostetes Video hinzufügen. Videos können Kunden gewinnen und Interesse an Ihrem Geschäft wecken.

So fügen Sie Ihrer Startseite ein Video hinzu:

  1. Klicke neben Pop auf Anpassen.

  2. Klicke auf Abschnitte.

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

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

  5. Geben Sie 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 erfahren Sie, wie Sie den Link zum Teilen eines YouTube-Videos kopieren.

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

  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. Klicke neben Pop auf Anpassen.

  2. Klicken Sie auf Abschnitte.

  3. Klicke auf Abschnitt hinzufügen.

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

  5. Klicken Sie auf Benutzerdefiniertes HTML und geben Sie den HTML-Code ein, den Sie auf Ihrer Startseite hinzufügen möchten.

  6. Klicke auf Speichern.

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 neben Pop auf Anpassen.

  2. Klicken Sie 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. Klicken Sie 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. Klicke neben Pop auf Anpassen.

  2. Klicke auf Theme-Einstellungen.

  3. Klicke auf Soziale Medien.

  4. Um ein Social-Sharing-Bild hochzuladen, klickst du 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 den Konten in die dafür vorgesehenen Felder ein. Geben Sie vollständige Links ein, z. B. https://instagram.com/shopify oder https://twitter.com/shopify.

    Links zu Ihren Social-Media-Konten werden in der Fußzeile Ihres Onlineshops angezeigt.

  6. Um Ihren Produkten und Blog-Beiträgen Schaltflächen für das Teilen in sozialen Netzwerken hinzuzufügen, aktivieren Sie 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, müssen Sie die Schaltflächen auch in den Abschnitten für diese Seiten aktivieren.

Untermenüs zur Seitenleiste hinzufügen

Um Dropdown-Menüs zu Ihrem Hauptmenü hinzuzufügen, müssen Sie zuerst Menüs auf Ihrer Navigationsseite erstellen. In diesem Artikel erfahren Sie, wie Sie dafür vorgehen müssen.

Optimale Größe des Shop-Logos

Ein proportional kompaktes Logo wird im Pop-Theme am besten aussehen, da es Ihr 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 Ihr Logo beträgt 450 Pixel und die maximale Höhe 200 Pixel. Ihre hochgeladene Logodatei wird so angepasst, dass sie diesen Einschränkungen entspricht.

Das ideale Format ist PNG.

Vergrößern Ihres Logos auf mobilen Geräten

Um Ihr Logo in jedem Layout größer zu machen, ist es zunächst äußerst wichtig, sämtlichen Weißraum oder transparente Pixel, die Ihre 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 Sie wissen, dass Ihr Logo nicht aufgrund des Weißraums verkleinert wurde, können Sie die Höhe Ihres mobilen Headers anpassen, damit Ihr Logo etwas mehr Platz erhält. Dadurch wird Ihr 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 Ihres Logos in der Seitenleiste

Um Ihr Logo in jedem Layout größer zu machen, ist es zunächst äußerst wichtig, sämtlichen Weißraum oder transparente Pixel, die Ihre 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 Sie wissen, dass Ihr Logo nicht aufgrund des Weißraums verkleinert wurde, können Sie die Breite Ihrer Seitenleiste anpassen, damit Ihr Logo etwas mehr Platz erhält. Dadurch wird Ihr Logo größer.

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

Reduzieren des Weißraums um das Logo der Seitenleiste

Bevor Sie die durch das Pop-Design eine über und unter Ihrem Logo hinzugefügte Füllung entfernen, ist es äußerst wichtig, eventuelle Füllungen zu beschneiden, die möglicherweise aus dem Bild selbst stammen. Bevor Sie die Datei in Shopify hochladen, müssen Sie den Weißraum oder die transparenten Pixel, die Ihre 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 Sie ein beschnittenes Logo in Ihre Theme-Objekte hochgeladen haben, können Sie die Breite Ihrer Seitenleiste anpassen, indem Sie zum Theme-Editor gehen. Ändern Sie im Bereich Header & Navigation den Wert "Größe > Breite Desktop-Menü" nach Bedarf.

Wenn Sie die Polsterung über und unter Ihrem Logo reduzieren möchten, gibt es eine weitere, jedoch nicht unterstützte Maßnahme. Gehen Sie 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ügen Sie 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. Speichern Sie Ihre 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 bearbeiten Sie die Einstellungen für Produktseiten:

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

  2. Klicke auf Abschnitte.

  3. Klicken Sie auf Produktseiten.

  4. Um den Produktanbieter oder den Markennamen anzuzeigen, aktivieren Sie Produktanbieter anzeigen. Damit eine Marke oder der Anbieter angezeigt werden können, müssen Sie dem Produkt einen Anbieter hinzufügen.

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

  6. Um eine Auswahl ähnlicher Produkte unten auf der Seite anzuzeigen, aktivieren Sie 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, müssen Sie 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, aktivieren Sie die Option Mengenauswahl anzeigen.

  8. Um einen dynamischen Checkout-Button anzuzeigen, aktivieren Sie 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 Sie die Bildzoomfunktion verwenden, die Sie im Theme-Editor im Abschnitt Produktseiten aktivieren können:

Im Idealfall weisen die Feature-Bilder Ihrer 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