Abschnitte für Debut

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 Debut und wie du diese optimale an dein Geschäft anpasst.

Debut enthält die folgenden statischen Abschnitte:

  • Header
  • Fußzeile
  • Produktseiten
  • Kategorieseiten
  • Listenseite für Kategorien
  • Blog-Seiten
  • Beiträge
  • Warenkorbseite

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.

Debut enthält die folgenden dynamischen Abschnitte:

  • Blog-Beiträge
  • Kategorieliste
  • Vorgestellte Kategorie
  • Galerie
  • Bild mit Text
  • Bild mit Textüberlagerung
  • Logoliste
  • Slideshow
  • Vorgestelltes Produkt
  • Newsletter
  • Karte
  • Rich Text
  • Testimonials
  • Textspalten mit Fotos
  • Video
  • Personalisierter Content

Im Header-Abschnitt kannst du den Inhalt bearbeiten, der oben auf jeder Seite deines Shops angezeigt wird. Du kannst ein Logo-Bild hinzufügen, das anzuzeigende Menü auswählen und eine Ankündigungsnachricht erstellen.

Die Header-Leiste auf einer Website namens

So passt du den Header-Abschnitt an:

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke auf Kopfzeile.

  4. Um die Ausrichtung deines Logos festzulegen, wähle im Bereich Logo-Ausrichtung die Option Links oder Mittig aus. Wenn du kein Logo-Bild hinzufügst, wird stattdessen der Name deines Shops als Text angezeigt. Du kannst den Namen deines Shops auf der Seite Allgemeine Einstellungen im Adminbereich ändern.

  5. Um ein Logo hinzuzufügen, klicke im Bereich Logo-Bild auf Bild auswählen. Um ein Bild von deinem Computer hochzuladen, klicke auf Hochladen. Um ein kostenloses Bild aus Burst zu verwenden, klicke auf Kostenlose Bilder.

  6. Um die Größe deines Logos zu ändern, stelle den Schieberegler Benutzerdefinierte Logobreite auf die gewünschte Breite ein. Durch das Anpassen der Logobreite wird das Logo nicht verzerrt.

  7. Um auszuwählen, welches Menü im Header angezeigt werden soll, klicke im Bereich Menü auf Ändern. Wähle ein vorhandenes Menü oder erstelle ein neues Menü, indem du auf Menü erstellen klickst. Wenn in deinem Header kein Menü angezeigt werden soll, klicke auf Entfernen.

  8. Führe die folgenden Schritte aus, um eine Ankündigungsnachricht oben auf der Seite anzuzeigen:

  9. Aktiviere im Bereich Ankündigungsleiste die Option Ankündigung anzeigen.

  10. Um die Ankündigung nur auf der Startseite anzuzeigen, aktiviere Nur Startseite. Andernfalls wird die Ankündigung auf jeder Seite in deinem Shop angezeigt.

  11. Gib den Text für die Ankündigung in das Feld Text ein.

  12. Um einen Link zur Ankündigung hinzuzufügen, gib die URL in das Feld Link ein.

  13. Um die Farbe des Ankündigungs leisten Hintergrunds zu ändern, klicken Sie auf das Farbfeld Farbe für die Leiste und wählen Sie eine Farbe aus.

  14. Um die Farbe des Ankündigungstexts zu ändern, klicke auf das Farbfeld Text und wähle eine Farbe aus.

  15. Klicke auf Speichern.

Fußzeile

Die Fußzeile Ihres Themes ist der Abschnitt, der unten auf jeder Seite Ihres Shops angezeigt wird. Du kannst die folgenden Funktionen zu deiner Fußzeile hinzufügen:

  • Zahlungssymbole
  • Quick-Links
  • Newsletter-Anmeldung
  • ein Textabschnitt mit Informationen zu deinem Geschäft
  • Social-Media-Symbole
  • eine Sprachauswahl
  • eine Währungsauswahl

Fußzeilenbereich einer Website, in dem ein Menü, eine Newsletter-Anmeldung und ein Copyright-Text angezeigt werden.

Hinzufügen von Zahlungssymbolen

Du kannst in deiner Fußzeile Symbole für die von dir akzeptierten Zahlungsmethoden anzeigen. In diesem Bereich werden die Symbole angezeigt, die mit dem Zahlungsanbieter verknüpft sind, den du im Abschnitt Zahlungseinstellungen in deinem Adminbereich aktiviert hast.

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Gehe in deinem Shopify-Adminbereich auf <strong>Onlineshop</strong> &gt; <strong>Themes</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div>
</div>



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

  2. Klicke dann auf Fußzeile.

  3. Siehe Zahlungs-Symbole anzeigen.

  4. Klicke auf Speichern.

Hinzufügen eines Menüs, einer Newsletter-Anmeldung oder eines Texts

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Gehe in deinem Shopify-Adminbereich auf <strong>Onlineshop</strong> &gt; <strong>Themes</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div>
</div>



1. Klicken Sie neben **Debut**auf **Anpassen**.
  1. Klicke auf Abschnitte.

  2. Klicke dann auf Fußzeile.

  3. Um einen Inhalts-Block in den Inhalts-Bereich hinzuzufügen, klicke auf Inhalt hinzufügen. Wähle den Blocktyp aus den folgenden Optionen aus:

- Menü - Newsletter - Text

Du kannst bist zu 4 Inhalts-Blocks hinzufügen.

Um einen Inhaltsblock zu verschieben, klickst du auf das ⋮⋮ Symbol und ziehst den Block an eine andere Stelle.

Um einen Inhaltsblock zu entfernen, klickst du auf den Block und dann auf Inhalt entfernen.

Um einen Inhaltsblock anzupassen, klickst du auf den Block und bearbeitest die Einstellungen.

  1. Klicke auf Speichern.

Hinzufügen von Social-Media-Symbolen

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke dann auf Fußzeile.

  4. Klicke auf den Abschnitt Theme-Einstellungen.

  5. Gib im Feld für relevante Social-Media die URL deines Profils ein.

  6. Klicke auf Speichern.

Eine Sprachauswahl hinzufügen

Du solltest nur dann eine Sprachauswahl hinzufügen, wenn du mehrere Shop-Sprachen aktiviert hast.

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke dann auf Fußzeile.

  4. Wähle unter Sprachauswahl die Option Sprachauswahl anzeigen aus.

  5. Klicke auf Speichern.

Eine Währungsauswahl hinzufügen

Du solltest nur dann eine Währungsauswahl hinzufügen, wenn du mehrere Währungenaktiviert hast.

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Gehe in deinem Shopify-Adminbereich auf <strong>Onlineshop</strong> &gt; <strong>Themes</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>Tippe in der <a href="https://www.shopify.com/install/detect">Shopify App</a> auf <strong>Shop</strong>.
</li><li>Tippe unter <strong>Vertriebskanäle</strong> auf <strong>Onlineshop</strong>.
</li><li>Tippe auf <strong>Themes verwalten</strong>.
</li></ol></div>
</div>



1. Klicken Sie neben **Debut**auf **Anpassen**.
  1. Klicke auf Abschnitte.

  2. Klicken Sie auf Fußzeile.

  3. Wähle unter Währungsauswahl die Option Währungsauswahl anzeigen.

Produktseiten

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

  • Eine Mengenauswahl
  • Variantenbezeichnungen
  • Die Produktmarke oder den Produktanbieter
  • Bildzoom
  • Einen dynamischen Checkout-Button
  • Social-Sharing-Schaltflächen
  • Produktempfehlungen

Du kannst auch die Größe deiner Bilder festlegen.

Einstellungen der Produktseite bearbeiten

  1. Wählen Sie im Dropdown-Menü der oberen Leiste die Option Produktseitenaus.

  2. Klicke auf Abschnitte.

  3. Klicke auf Produktseiten.

  4. Um die Größe Ihrer Bilder festzulegen, wählen Sie im Dropdown-Menü Bildgröße eine Bildgröße aus.

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

  6. Um Variantenbezeichnungen wie "Größe" und "Farbe" anzuzeigen, aktiviere die Option Variantenbezeichnungen anzeigen. Die angezeigten Variantenbezeichnungen basieren auf den Optionennamen der Varianten für das Produkt.

  7. Um die Produktmarke und den Lieferanten anzuzeigen, aktiviere Lieferanten anzeigen. Damit eine Marke oder der Lieferant angezeigt werden können, musst du dem Produkt einen Lieferanten hinzufügen.

  8. Wenn du möchtest, dass Kunden Produktbilder vergrößern können, indem du mit dem Mauszeiger darüber fährst, aktiviere die Option Bildzoom aktivieren.

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

  10. Um Social-Sharing-Buttons anzuzeigen, aktiviere das Kontrollkästchen für die Option Schaltflächen für das Teilen in sozialen Netzwerken anzeigen.

  11. Klicke auf Speichern.

Hinzufügen oder Entfernen von Produktempfehlungen

Du kannst Produktempfehlungen auf Produktseiten anzeigen, um Kunden das Entdecken anderer Produkte zu erleichtern, die sie interessieren könnten.

  1. Wählen Sie im Dropdown-Menü der oberen Leiste die Option Produktseitenaus.

  2. Klicke auf Produktempfehlungen.

  3. Verwende das Kontrollkästchen Dynamische Empfehlungen anzeigen, um Produktempfehlungen auf deinen Produktseiten anzuzeigen oder auszublenden.

  4. Optional: Um den Titel zu ändern, der über den Produktempfehlungen angezeigt wird, gib einen neuen Titel in das Feld Überschrift ein.

  5. Optional: Um Lieferanten in den Produktbeschreibungen ein- oder auszublenden, verwende das Kontrollkästchen Lieferant anzeigen.

  6. Klicke auf Speichern.

Kategorieseiten

Du kannst deine Kategorieseiten so einrichten, dass deine Kunden Produkte in der Kategorie filtern und sortieren können. Du kannst ein Kategorielayout (entweder ein Raster oder eine Liste) auswählen und festlegen, wie viele Produkte angezeigt werden sollen.

So legst du das Layout deiner Kategorieseiten fest:

  1. Gehe im Theme-Editor auf eine Kategorieseite.

  2. Klicke auf den Tab Abschnitte.

  3. Klicke auf Kategorieseiten.

  4. Wähle in der Layout-Liste entweder Raster oder Liste.

  5. Wähle die Anzahl der Produkte pro Zeile und die Anzahl der Zeilen pro Seite (wenn du den Rasterstil ausgewählt hast) aus den Listen aus.

  6. Wenn du ein Kategoriebild oben auf der Seite anzeigen möchtest, aktiviere die Option Kategoriebild anzeigen.

  7. Wenn Sie die Produktmarke oder den Anbieter anzeigen möchten, aktivieren Sie die Option Produktanbieter anzeigen.

  8. Wähle die Option Sortierung aktivieren aus, um ein Sortiermenü anzuzeigen.

  9. Aktiviere die Option Tag-Filter aktivieren, damit deine Kunden die Kategorie nach Produkt-Tags filtern können.

  10. Klicke auf Speichern.

Listenseite für Kategorien

Die Listenseite für Kategorien zeigt ein Raster all deiner Produktkategorien an. Deine Kunden können die Listenseite für Kategorien verwenden, um schnell die gewünschte Kategorie zum Durchsuchen zu finden. In Debut ist die Listenseite für Kategorien ein übergeordneter Link im Kopfzeilenmenü.

Hinweis: Der Name deines übergeordneten Listenmenüs für Kategorien kann variieren. In diesem Beispiel heißt das Menü "Katalog".

Du kannst Miniaturansichten aller deiner Kategorien in einem Raster oder eine ausgewählte Kategorie anzeigen. Du kannst auch auswählen, wie Kategorien auf der Seite angeordnet werden sollen.

So legst du das Layout deiner Listenseite für Kategorien fest:

  1. Gehe auf deine Listenseite für Kategorien, indem du auf das übergeordnete Element des Kategoriemenüs klickst.

  2. Klicke auf den Tab Abschnitte.

  3. Klicke auf Listenseite für Kategorien.

  4. Führe einen der folgenden Schritte aus:

    1. Um Miniaturansichten aller deiner Kategorien in einem Raster anzuzeigen, wähle die Option Alle.
    2. Um eine Kategorie in der Listenseite für Kategorien anzuzeigen, markiere Ausgewählt.
  5. Wenn du im vorherigen Schritt Alle ausgewählt hat, führe die folgenden Schritte aus:

    1. Wähle eine Sortieroption aus der Liste Kategorien sortieren nach aus.
    2. Wähle die Anzahl der Kategorien pro Zeile in der Liste Kategorien pro Zeile aus.
  6. Klicke auf Speichern.

Blog-Seiten

Mit Debut kannst du deine Blog-Beiträge auflisten oder in einem Raster darstellen. Wenn du mehr als einen Autor für deine Blog-Beiträge hast, kannst du den Namen des Autors für jeden Beitrag anzeigen lassen. Du kannst auch das Datum anzeigen, an dem jeder Blog-Beitrag veröffentlicht wurde.

  1. Navigiere zu deiner Blog-Seite im Vorschaubereich des Theme-Editors.

  2. Klicke auf Abschnitte.

  3. Klicke auf Blog-Seiten.

  4. Wähle in der Liste Layout aus, ob Blog-Beiträge in einer Liste oder einem Raster angezeigt werden sollen.

  5. Aktiviere die Option Autor anzeigen, um den Namen des Autoren anzuzeigen.

  6. Aktiviere die Option Datum anzeigen, um das Datum anzuzeigen, an dem der Blog-Beitrag veröffentlicht wurde.

  7. Klicke auf Speichern.

Warenkorbseite

Im Bereich Warenkorb kannst du die folgenden Einstellungen aktivieren:

  • Warenkorbanmerkungen
  • Automatische Warenkorbaktualisierungen

Warenkorbanmerkungen hinzufügen

Du kannst deinen Kunden die Möglichkeit geben, auf der Warenkorbseite Anmerkungen zu ihrer Bestellung hinzuzufügen.

  1. Wähle im Drop-down-Menü in der oberen Leiste den Eintrag Warenkorb.

  2. Klicke auf den Tab Abschnitte.

  3. Klicke auf die Warenkorbseite.

  4. Aktiviere die Option Warenkorbanmerkungen aktivieren.

  5. Klicke auf Speichern.

Automatische Warenkorbaktualisierungen aktivieren

Du kannst im Warenkorb aktualisierte Informationen anzeigen lassen, sobald ein Kunde Änderungen an seiner Bestellung vornimmt. Zum Beispiel kann sich die Zwischensumme ändern, wenn der Kunde die Anzahl der Artikel in seinem Warenkorb ändert. So aktivierst du automatische Warenkorbaktualisierung:

  1. Wähle im Drop-down-Menü in der oberen Leiste den Eintrag Warenkorb.

  2. Klicke auf den Tab Abschnitte.

  3. Klicke auf die Warenkorbseite.

  4. Aktiviere die Option Automatische Warenkorbaktualisierungen aktivieren.

  5. Klicke auf Speichern.

Vorgestellte Kategorie

Sie können eine Kategorie auf Ihrer Startseite vorstellen. Mit Kategorien können Sie Werbung für Verkäufe und neue Kollektionen machen.

Mit Debut kannst du eine Schaltfläche "Alle anzeigen" hinzufügen, damit Kunden sich die gesamte Kategorie anzeigen lassen können. Außerdem kannst du unter jedem Produktbild den Anbieternamen anzeigen.

So stellst du eine Kategorie auf deiner Startseite vor:

  1. Klicke auf den Tab Abschnitte.

  2. Klicke auf den Abschnitt Vorgestellte Kategorie.

  3. Wenn du den Text ändern möchtest, der über der Kategorie angezeigt wird, gib den entsprechenden Text in das Feld Überschrift ein.

  4. Wähle in der Liste Kategorie die Kategorie aus, die du anzeigen lassen möchtest. Um Produkte aus der ausgewählten Kategorie hinzuzufügen oder zu entfernen, klicke auf den Link Kategorie bearbeiten, um die Seite Kategorien in einer neuen Registerkarte zu öffnen.

  5. Wähle in der Liste Produkte pro Zeile die Anzahl der Produkte aus, die in jeder Zeile angezeigt werden sollen.

  6. Wähle in der Liste Zeilen die Anzahl der Produktzeilen aus, die angezeigt werden sollen.

  7. Wenn du den Anbieter- oder Markennamen unter jedem Produktbild anzeigen möchtest, aktiviere die Option Produktanbieter anzeigen.

  8. Wenn du möchtest, dass Kunden alle Produkte in der Kategorie anzeigen können, aktiviere die Option Schaltfläche "Alle anzeigen" bereitstellen.

  9. Klicke auf Speichern.

Bild mit Text

Mit Debut kannst du ein Bild mit Text rechts oder links des Bildes hinzufügen. Du kannst auch eine Schaltfläche hinzufügen, die auf eine Seite in deinem Shop verweist:

In der Regel verwendest du einen Abschnitt Bild mit Text, um für ein Produkt oder eine Kategorie zu werben oder den Website-Traffic auf deine Blog-Seite zu bringen.

So fügst du deinerr Startseite einen Bereich mit Bild und Text hinzu:

  1. Klicke auf den Tab Abschnitte.

  2. Klicke auf den Abschnitt Bild mit Text.

  3. Klicke im Bereich Bild auf Bild auswählen und führe dann einen der folgenden Schritte aus:

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. Wählen Sie in der Liste Layout aus, ob das Bild rechts oder links vom Text angezeigt werden soll.

  2. Gib einen neuen Titel für diesen Abschnitt in das Feld Überschrift ein.

  3. Gib den Text, der unterhalb der Kopfzeile angezeigt werden soll, in das Feld Text ein.

  4. Gib im Feld Button-Beschriftung den Text ein, der auf der Schaltfläche angezeigt werden soll.

  5. Wähle im Feld Schaltflächenlink eine Seite in deinem Shop aus, zu der die Schaltfläche verlinken soll.

  6. Klicke auf Speichern.

Bild mit Textüberlagerung

Du kannst ein großes Bild mit einer benutzerdefinierten Textüberlagerung auf deiner Startseite anzeigen.

Der Abschnitt "Bild mit Text" umfasst die folgenden Einstellungen:

  • Bild – Wähle ein Bild aus, das zum Abschnitt hinzugefügt werden soll.
  • Bildausrichtung – Lege fest, wie das Bild auf der Seite ausgerichtet werden soll.
  • Layout: Lege die Breite des Bereichs fest.
  • Abschnittshöhe: Lege die Höhe des Bereichs fest. Um das Beschneiden von Bildern zu verhindern, wähle Bild anpassen aus, wodurch die Höhe des Abschnitts anhand der Höhe deines Bildes festgelegt wird.
  • Schriftgröße: Legen Sie die Größe des Texts fest.
  • Überschrift – Füge eine Überschrift zum Abschnitt hinzu.
  • Text – fügen Sie Text zum Abschnitt hinzu. Der Abschnitt Bild mit Textüberlagerung wird automatisch in die Überschrift umbenannt, die Sie angeben.
  • Schaltflächenbeschriftung – Füge eine Schaltfläche mit einer Beschriftung zum Abschnitt hinzu.
  • Schaltflächenlink – Verlinke deine Schaltfläche auf eine andere Seite oder Website.

Deiner Homepage ein Bild mit Text hinzufügen

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitt hinzufügen > Bild mit Text > Hinzufügen.

  3. Verwende die Einstellungen, um deinen Überlagerungsabschnitt "Bild mit Text" anzupassen.

  4. 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ügst du eine Newsletter-Anmeldung zu deiner Startseite hinzu:

  1. Klicken Sie neben Debutauf 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.

  6. Klicke auf Speichern.

Video

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

Der Videoabschnitt umfasst die folgenden Einstellungen:

  • Video Höhe – legen Sie die Höhe Ihres Videos fest.
  • Textgröße – Fügen Sie Ihrem Video einen Text hinzu. Wenn Sie den Stil Ihres Videos auf Bild mit Play-Button setzen, wird der Text bei der Wiedergabe des Videos entfernt.
  • Overlay Anzeigen – fügen Sie eine Farbschicht zu Ihrem Video hinzu, damit Text leichter lesbar wird. Wenn Sie den Video Stil auf Bild mit Play Buttonfestlegen, wird das Overlay entfernt, während das Video wiedergegeben wird.
  • Stil – Lege den Stil des Videos fest. Der Stil Hintergrund-Video ist nur auf Desktop-Geräten verfügbar. Wenn Kunden deinen Online Shop mit einem Theme großartigShop über ein Tablet oder ein mobiles Gerät besuchen, sehen sie immer den Stil Bild mit Play-Button.
  • Überschrift – Fügen Sie Ihrem Video eine Überschrift hinzu.
  • Videolink – Füge die YouTube-URL für dein Video hinzu.
  • Titelbild – fügen Sie Ihrem Video ein Titelbild hinzu. Das Titelbild wird während der Wiedergabe des Videos ausgeblendet.
  • Bildausrichtung – Richte dein Titelbild so aus, dass der wichtigste Bereich immer sichtbar ist.

Ein Video zu deiner Startseite hinzufügen

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitt hinzufügen > Video.

  3. Verwende die Einstellungen, um deinen Videoabschnitt anzupassen.

  4. Klicke auf Speichern.

Slideshow

Du kannst eine Slideshow mit Bildern zu deiner Startseite hinzufügen. Im Bereich Slideshow kannst du die Höhe der Folien festlegen, Text und Schaltflächen hinzufügen und festlegen, ob deine Slideshow automatisch wiedergegeben wird.

Die Startseite eines Onlineshops namens

Informationen zum Beschneiden von Slideshow-Bildern und zu empfohlenen Bildgrößen findest du in den folgenden Richtlinien.

So erstellen Sie eine Slideshow:

  1. Klicken Sie neben Debutauf Anpassen.

  2. Klicke auf Abschnitte.

  3. Klicke auf Slideshow.

  4. Lege die Höhe für deine Folien im Dropdown-Menü Folienhöhe fest.

    Erfahre mehr darüber, wie sich die Folienhöhe auf deine Slideshow auswirkt.

  5. Legen Sie die Größe Ihrer Überschriften und Unterüberschriften im Dropdown-Menü Textgröße fest.

  6. Lege die Position des Textes auf deinen Folien im Dropdown-Menü Textausrichtung fest.

  7. Optional: überprüfe Überlagerung anzeigen. Eine Bildüberlagerung ist eine Farbschicht zwischen einem Bild und einem beliebigen Text, der über dem Bild platziert wird. Überlagerungen verbessern den Farbkontrast und die Lesbarkeit. Du kannst die Farbe und Opazität der Überlagerung in den Farbeinstellungen festlegen.

  8. Optional: Aktiviere die Option Folien automatisch wechseln, um die Slideshow automatisch wiederzugeben. Wähle mit dem Schieberegler Anzeige der nächsten Folie alle aus, wie lange jede Folie angezeigt werden soll.

  9. So kannst du eine Folie mit einem Bild hinzufügen:

    1. Klicke im Bereich Inhalt auf Folie mit Bild hinzufügen.
    2. Klicken Sie unter Bild auf Bild auswählen. Um ein Bild von Ihrem Computer hochzuladen, klicken Sie auf Hochladen. Um ein kostenloses Bild aus Burst zu verwenden, klicken Sie auf Kostenlose Bilder.
    3. Um festzulegen, wie das Bild in der Slideshow ausgerichtet werden soll, wählen Sie eine Position aus dem Dropdown-Menü Bildposition aus. Mehr über die Bildposition erfahren Sie in den unten aufgeführten Richtlinien.
    4. Um Text zur Bildfolie hinzuzufügen, gib Text in das Feld Überschrift, das Feld Unterüberschrift oder in beide Felder ein.
    5. Füge eine Schaltfläche zu deiner Bildfolie hinzu, indem du Text in das Feld Text für Schaltflächenbezeichnung eingibst. Wähle im Feld Schaltflächenlink einen Bereich deines Onlineshops aus, auf den die Schaltfläche verlinken soll.
  10. Klicke auf Speichern.

Richtlinien für Slideshows

Du kannst die unten aufgeführten Einstellungen und Bildempfehlungen verwenden, um festzulegen, wie deine Slideshow in deinem Onlineshop dargestellt werden soll. Die folgenden Faktoren bestimmen, wie deine Folien dargestellt werden:

  • Die Abmessungen deiner Bilder
  • Deine Einstellungen für die Bildposition
  • Deine Einstellungen für die Folienhöhe
  • Das Verhältnis von Breite zu Höhe deiner Bilder

Aufgrund von Unterschieden in der Bildschirmgröße und -form können deine Folien auf Mobilgeräten und Desktopgeräten unterschiedlich aussehen.

Empfehlungen für die Bildgröße

Die empfohlenen Abmessungen für Slideshow-Bilder hängen von deinen Einstellungen für die Folienhöhe ab. Beachte die folgenden Richtlinien:

Empfehlungen für die Bildgröße nach Einstellung
Einstellung der Folienhöhe Empfohlene Breite Empfohlene Höhe
An erstes Bild anpassen 1200 Pixel 600 Pixel
Klein 1200 Pixel 475 Pixel
Mittel 1200 Pixel 489 Pixel
Groß 1200 Pixel 775 Pixel

Informationen zum Anzeigen oder Ändern der Einstellungen für die Folienhöhe finden Sie in Schritt 5 der Anleitung zum Erstellen einer Slideshow.

Abgeschnittene Bilder

Sie können Maßnahmen ergreifen, um zu steuern, wie Ihre Bilder abgeschnitten werden, oder um das Beschneiden von Bildern insgesamt zu vermeiden.

Abgeschnittene Bilder steuern

In den folgenden Fällen können Sie bei einigen Bildschirmgrößen mit abgeschnittenen Bildern rechnen:

  • Deine Bilder haben nicht das gleiche Verhältnis von Breite zu Höhe.
  • Deine Folienhöhe ist auf Klein, Mittel oder Groß eingestellt.
  • Deine Folienhöhe ist auf An erstes Bild anpassen eingestellt und deine Bilder sind größer als der Gerätebildschirm oder das Browserfenster.

Du kannst steuern, wie deine Bilder abgeschnitten werden, indem du die Einstellung Bildposition verwendest.

Du kannst für jedes Bild auswählen, welcher Bereich beim Beschneiden angezeigt werden soll. Im folgenden Beispiel kannst du sehen, wie das gleiche Bild für einige Bildschirmgrößen abgeschnitten wird. Bei der linken Folie ist die Bildposition auf Mitte zentriert eingestellt. Bei der rechten Folie ist die Bildposition auf Oben links eingestellt.

Eine Beispielfolie, die je nach Einstellung der Bildposition unterschiedlich beschnitten wird.

Um deine Einstellungen für die Bildposition aufzurufen oder zu ändern, lies bitte Schritt 10 in den Anweisungen zur Erstellung einer Slideshow.

Vermeide abgeschnittene Bilder

Um abgeschnittene Bilder in deiner Slideshow zu vermeiden, kannst du die folgenden Schritte probieren:

  • Stelle deine Folienhöhe auf An erstes Bild anpassen ein.
  • Verwende Bilder, die doppelt so breit wie hoch sind. Solche Bilder haben ein Verhältnis von Breite zu Höhe von 2:1. Die empfohlenen Abmessungen sind 1200 x 600 Pixel.
  • Stelle sicher, dass alle deine Folien das gleiche Breite-zu-Höhe-Verhältnis haben. Das Verhältnis deiner Folien ist wichtiger als ihre Abmessungen in Pixeln.

Im folgenden Beispiel wird ein Slideshow-Bild mit einem Verhältnis von 2:1 auf einem Desktop- und einem Mobilgerät angezeigt:

Eine Folie wird auf einem Desktop und einem Mobilgerät ohne Zuschneiden angezeigt.

Diahöhe

Die Breite des Slideshow-Bereichs beträgt immer 100 % des Browserfensters. Die Höhe deiner Folien ist relativ zur Breite. Aufgrund der Unterschiede in der Bildschirmgröße variieren die Breite und Höhe deiner Folien auf unterschiedlichen Geräten. Die Höhe deiner Folien wird auch von den Einstellungen für die Folienhöhe beeinflusst.

Sie können die Einstellung an erstes Bild anpassen verwenden, um die Höhe ihrer Slideshow auf der Höhe Ihres ersten Bildes zu basieren. Diese Einstellung funktioniert am besten, wenn alle Ihre Bilder die gleiche Größe haben oder das gleiche Breite-zu-Höhe-Verhältnis haben. Wenn Ihre Bilder unterschiedlich groß sind oder unterschiedliche Verhältnisse haben, können Sie die Reihenfolge ihrer Folien ändern, um zu sehen, wie Sie mit verschiedenen Höhen aussehen.

Im folgenden Beispiel befindet sich die kleinste Folie an erster Stelle:

Eine kleinere Folie bestimmt die Höhe der beiden anderen Folien. Da die anderen Folien höher sind, werden sie oben und unten abgeschnitten.

Im nächsten Beispiel befindet sich eine größere Folie an erster Stelle:

Eine Folie mit mittlerer Höhe bestimmt die Höhe der anderen beiden Folien. Die Folie, die größer ist, wird oben und unten abgeschnitten. Die Folie, die kleiner ist, wird an den Seiten abgeschnitten.

Wenn Sie stattdessen die Höheneinstellungen Klein, Mittel oder Groß verwenden, lesen Sie die Empfehlungen zur Bildgröße für Ihre Folien.

Bildverhältnisse

Wenn du Abgeschnittene Bilder in deiner Slideshow vermeiden möchtest, beträgt das empfohlene Verhältnis von Breite zu Höhe für deine Bilder 2:1.

Wenn du dir keine Gedanken um abgeschnittene Bilder auf Desktopbildschirmen machst und auf Mobilgeräten Eindruck hinterlassen möchtest, dann verwende am Besten quadratische Bilder oder Bilder, die höher als breit sind. Die folgende Beispielfolie zeigt ein quadratisches Bild mit einem Verhältnis von Breite zu Höhe von 1:1.

Eine quadratische Folie wird auf einem Desktop und einem mobilen Gerät angezeigt. Das Bild wird auf dem Desktopgerät abgeschnitten, aber nicht auf dem mobilen Gerät.

Die nächste Beispielfolie zeigt ein Porträtbild mit einem Verhältnis von Breite zu Höhe von 2:3.

Eine große Folie wird auf einem Desktop und einem mobilen Gerät angezeigt. Das Bild wird auf dem Desktopgerät abgeschnitten, aber nicht auf dem mobilen Gerät.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren