Pop

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

Abschnitte Abschnitte sind anpassbare Inhaltsblöcke, die das Layout Ihres Onlineshops bestimmen. Jedes Theme enthält statische und dynamische Abschnitte. ### Statische Abschnitte Statische Abschnitte befinden sich immer an spezifischen Stellen in Ihrem Onlineshop. Sie können statische Abschnitte bearbeiten, sie jedoch nicht neu anordnen oder entfernen. Jede Art von Seite in Ihrem Onlineshop enthält verschiedene statische Abschnitte.

Pop enthält die folgenden statischen Abschnitte:

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

Dynamische Abschnitte Sie können dynamische Abschnitte hinzufügen, neu anordnen, und entfernen, um das Layout Ihrer Startseite anzupassen. Jedes Theme hat eine einzigartige Auswahl dynamischer Abschnitte zur Auswahl.

Pop enthält die folgenden dynamischen Abschnitte:

  • Blog-Beiträge
  • Kategorieliste
  • Featured 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
  • Ein dynamischer 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. Klicken Sie 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. Klicken Sie 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. Finden Sie Pop und klicken Sie dann auf Anpassen.

  2. Klicken Sie 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. Klicken Sie 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. Finden Sie Pop und klicken Sie dann auf Anpassen.

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

Benutzerdefiniertes HTML

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

So fügen Sie Ihrer Startseite benutzerdefiniertes HTML hinzu:

  1. Finden Sie Pop und klicken Sie dann auf Anpassen.

  2. Klicken Sie auf Abschnitte.

  3. Klicken Sie auf Abschnitt hinzufügen.

  4. Klicken Sie 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. Klicken Sie auf Speichern.

Pop enthält die folgenden Theme-Einstellungen:

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

Farben

Sie können die Farben für die verschiedenen Abschnitte Ihres Onlineshops bestimmen. So passen Sie die Farben an:

  1. Finden Sie Pop und klicken Sie dann auf Anpassen.
    1. Klicken Sie auf Theme-Einstellungen. 2. Klicken Sie auf Farben 3. Klicken Sie für jede Art von Inhalt auf das Farbfeld, um die Farbauswahl zu verwenden:
      Die Farbauswahl im Theme-Editor
      – Der Bereich Zuletzt ausgewählt zeigt Farben an, die Sie kürzlich für Ihr Theme ausgewählt haben. – Im Bereich Aktuell verwendet werden Farben angezeigt, die Sie derzeit in anderen Abschnitten Ihres Themes verwenden. Um die Farbe auf transparent festzulegen, klicken Sie auf Keine. 4. Klicken Sie auf Speichern.

Typografie

Sie können die Typografie für den Text Ihres Onlineshops bestimmen.

Schritte:

  1. Klicken Sie neben **** auf Anpassen.

  2. Klicken Sie auf Theme-Einstellungen.

  3. Klicken Sie auf Typografie.

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

    Die Schaltfläche

  5. Erkunden Sie die verfügbaren Schriftarten über das Suchfeld oder indem Sie auf Weitere laden klicken.

    Um alle verfügbaren Schriftarten anzuzeigen, sehen Sie sich die Schriftartenbibliothek von Shopify an.

  6. Klicken Sie auf den Namen der Schriftart, die Sie verwenden möchten.

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

    Eine Auswahl an Schriftstärken, die über die Schriftartenauswahl verfügbar sind

  8. Klicken Sie auf Speichern.

Social Media

Sie können Ihren Produkten und Blog-Beiträgen Schaltflächen für das Teilen in sozialen Netzwerken sowie Links zu Social-Media-Konten hinzufügen.

So passen Sie die Social-Media-Einstellungen an:

  1. Finden Sie Pop und klicken Sie dann auf Anpassen.

  2. Klicken Sie auf Theme-Einstellungen.

  3. Klicken Sie auf Soziale Medien.

  4. Um ein Social-Sharing-Bild hochzuladen, klicken Sie 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.

    Sie können 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. Klicken Sie 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. Suchen Sie das Theme, das Sie bearbeiten möchten und klicken Sie dann auf Aktionen > Code bearbeiten.

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

  3. 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
  • Ein dynamischer 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. Klicken Sie 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. Klicken Sie 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.

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus