Zum Inhalt springen
Docs

Keld · Abschnitte

Alle Seiten
Auf dieser Seite

Abschnitte

Diese Seite beschreibt jeden Abschnitt von Keld mit seinen Blöcken, geordnet danach, wo er erscheint. Die Namen der Einstellungen entsprechen denen im Theme-Editor.

Um einen Abschnitt hinzuzufügen, öffnen Sie die Vorlage im Theme-Editor und klicken Sie auf Abschnitt hinzufügen. Abschnitte mit dem Vermerk nur Vorlage gehören zu einem einzigen Seitentyp und lassen sich nicht anderswo hinzufügen.


Announcement bar

Eine Leiste über dem Header für kurze Mitteilungen. Fügen Sie bis zu 5 Announcement-Blöcke hinzu.

  • Show on all pages: Die Leiste bleibt ausgeblendet, solange die Einstellung aus ist oder es keine Ankündigungen gibt.
  • Rotate announcements: zeigt jeweils eine Ankündigung und wechselt zwischen ihnen. Pausiert, solange ein Besucher mit der Maus über der Leiste ist oder sie fokussiert. Ist die Einstellung aus, zeigt die Leiste alle Ankündigungen und bricht auf schmalen Bildschirmen in mehrere Zeilen um.
  • Seconds per announcement (4–10s): gilt nur, solange die Rotation aktiv ist.
  • Show dismiss button: Besucher können die Leiste ausblenden; sie erscheint wieder, wenn Sie die Ankündigungen ändern.

Announcement-Block: Text (halten Sie ihn bei einer kurzen Zeile; auf Smartphones wird längerer Text mit Auslassungspunkten abgeschnitten), Link label und Link. Der Link erscheint nur, wenn Sie sowohl das Label als auch den Link festlegen.

Logo

  • Logo image: ersetzt das Text-Logo. Verwenden Sie eine transparente .png- oder .svg-Datei.
  • Logo width (50–250px): legt die Breite des Logos auf dem Desktop fest.
  • Text logo: großer Text, der erscheint, wenn es kein Logobild gibt. Lassen Sie beide Felder für das Text-Logo leer, um den Shopnamen zu verwenden.
  • Text logo, second line: kleiner Text in der Label-Schrift neben dem Text-Logo auf dem Desktop. Erscheint nicht auf Smartphones.

Navigation

  • Main menu: Die Menüpunkte der obersten Ebene bilden die Navigation. Fügen Sie einen Mega menu-Block hinzu, um einem Menüpunkt ein Panel zu geben; Menüpunkte mit verschachtelten Links erhalten ein einfaches Dropdown.
  • Enable sticky positioning: hält den Header beim Scrollen oben am Bildschirm. Die Ankündigungsleiste scrollt weg.
  • Show search: zeigt auf dem Desktop ein Suchfeld und auf Smartphones eines im Menü.
  • Show search suggestions: schlägt während der Eingabe Produkte, Kollektionen, Seiten und Beiträge vor (Shopifys Suchvorschläge; einzurichten unter Apps › Search & Discovery). Ist die Einstellung aus oder sind keine Vorschläge verfügbar, sucht das Feld ganz normal.
  • Show vehicle button: zeigt die Schaltfläche „Set my vehicle“ und das Fahrzeug-Badge. Benötigt die Fahrzeugliste in den Theme-Einstellungen.

Mega menu-Block (bis zu 8)

Ein Mega-Menü öffnet ein großes Panel unter einem Menüpunkt der obersten Ebene.

  1. Legen Sie unter Onlineshop › Navigation ein Menü pro gewünschter Spalte an, zum Beispiel ein Menü namens „Suspension“ mit Links zu Ihren Fahrwerksprodukten.
  2. Fügen Sie im Header einen Mega menu-Block hinzu.
  3. Menu item: Geben Sie den Menüpunkt der obersten Ebene ein, zu dem dieses Panel gehört, genau so, wie er im Menü steht (zum Beispiel Suspension).
  4. Column 1 menu, Column 2 menu, Column 3 menu: Jede Spalte ist ein Menü. Spaltenüberschriften erscheinen, wenn Sie mehr als eine Spalte festlegen. Die erste Spalte endet mit einem Link „All …“ zum Menüpunkt.
  5. Feature card (optional): Image (4:3 empfohlen), Heading, Text und Link. Ohne eigenen Link wird der Link des Menüpunkts verwendet. Ein Panel braucht mindestens eine Spalte oder ein Bild.

Fügen Sie bis zu 6 Blöcke hinzu. Jeder Block ist eine Spalte.

  • Show social media icons: verwendet die Links aus Theme-Einstellungen › Social media und überspringt leere.
  • Show payment icons: zeigt die Zahlungsmethoden, die in den Zahlungseinstellungen Ihres Shops aktiviert sind.
  • Show Follow on Shop button: Kunden können Ihrem Shop in der Shop App folgen. Erscheint nur, wenn Shop für Ihren Shop aktiviert ist.
  • Credits: kleiner Text in der unteren Leiste, zum Beispiel eine Fotolizenz.

Blöcke

  • Text: Heading (großer Text oben in der Spalte, gestaltet wie das Text-Logo im Header) und Text (eine kurze Beschreibung des Shops).
  • Link list: Heading (ohne Eingabe der Titel des Menüs) und Footer menu.
  • Country and language: erscheint nur, wenn der Shop in mehr als einem Land oder in mehr als einer Sprache verkauft (Einstellungen › Märkte). Einstellungen: Heading, Show country selector, Show language selector.
  • Newsletter: Heading und Text. Fügt Abonnenten mit dem Tag „newsletter“ zu Ihren Kunden hinzu. Bestätigungs-E-Mails richten Sie unter Einstellungen › Benachrichtigungen ein.

Cart drawer (Overlays)

Das Panel, das hereingleitet, wenn ein Kunde ein Produkt hinzufügt, sofern Theme-Einstellungen › Cart › Cart type auf Drawer steht.

  • Show order note: fügt ein Notizfeld hinzu, das mit dem Warenkorb gespeichert wird und in der Bestellung erscheint.
  • Show fitment warning: zeigt „Not listed for your vehicle“ bei Positionen, deren Produktzuordnung das Fahrzeug des Kunden nicht enthält. Ohne Fahrzeug oder ohne Zuordnungsdaten erscheint nichts.

Vehicle selector (Overlays)

Der Dialog „My vehicle“, der sich über die Fahrzeug-Schaltfläche im Header öffnet. Die Fahrzeuge kommen aus Theme-Einstellungen › Fitment › Vehicle list. Der Abschnitt hat keine eigenen Einstellungen. Lassen Sie ihn in Overlays. Siehe Fahrzeugzuordnung.

Slide-in offer (Overlays)

Eine kleine Karte, die nach einer Verzögerung unten in der Ecke hereingleitet. Sie ist standardmäßig aus und erscheint einmal pro Besucher: Nachdem er sie geschlossen hat oder dem Link gefolgt ist, bleibt sie in diesem Browser ausgeblendet. Wählen Sie den Abschnitt im Editor aus, um sie jederzeit in der Vorschau zu sehen.

  • Show on storefront: Ist die Einstellung aus, lädt der Onlineshop nichts dafür.
  • Seconds before it appears (0–30s): zählt ab dem Laden der Seite.
  • Image: 1:1 empfohlen. Leer lassen für eine reine Textkarte.
  • Heading, Text, Link und Link label. Der Link erscheint nur, wenn Sie sowohl den Link als auch das Link-Label festlegen.

Startseite und Inhaltsabschnitte

Diese Abschnitte lassen sich auf der Startseite und in anderen Vorlagen hinzufügen.

Slideshow

Eine dunkle Slideshow in voller Breite mit bis zu 5 Slide-Blöcken und einem optionalen Vehicle selector-Block.

  • Rotate slides automatically: braucht zwei oder mehr Slides. Pausiert, solange ein Besucher mit der Maus über der Slideshow ist oder sie fokussiert, stoppt, sobald ein Besucher eine Slide auswählt, und bleibt für Besucher aus, die reduzierte Bewegung bevorzugen.
  • Seconds per slide (5–10s).
  • Key facts: Fact 1 bis Fact 4. Bis zu vier kurze Fakten unter der Überschrift, zum Beispiel „12 Plattformen“. Eine Zahl am Anfang erscheint fett. Lassen Sie ein Feld leer, um es auszublenden.

Slide-Block: Image (2400 x 1350px empfohlen; die erste Slide wird zuerst geladen), Subheading, Heading, Text, Photo credit (erscheint in der Ecke als „Photo: …“), Button label und Button link.

Vehicle selector-Block (1 pro Slideshow): bietet Marke, Modell und Baujahr aus der Fahrzeugliste in den Theme-Einstellungen an, speichert das Fahrzeug des Kunden und öffnet die Kollektion mit allen Produkten. Einstellungen: Heading und Button label. Benötigt den Abschnitt Vehicle selector unter Overlays.

Scrolling text

Ein Streifen mit Text oder Logos, der seitwärts scrollt. Besucher, die reduzierte Bewegung bevorzugen, sehen stattdessen eine statische Liste, und jeder Besucher kann ihn mit der Pause-Schaltfläche anhalten.

  • Scroll duration (20–90s): legt die Sekunden für einen vollen Durchlauf fest.

Platform-Block (bis zu 20): Text, Logo (optional; erscheint vor dem Text; verwenden Sie eine transparente .png- oder .svg-Datei) und Link.

Image with hotspots

Ein Foto mit nummerierten Pins. Jeder Pin öffnet eine Karte zu einem Produkt.

  • Image: 3:2 empfohlen. Auf Smartphones wird es auf 4:3 zugeschnitten.
  • Photo credit: erscheint nach der Legende als „Photo: …“.
  • Subheading, Heading, Text.

Pin-Block (bis zu 6):

  • Product: das Produkt, das der Pin öffnet.
  • Label: ein kurzer Name für die Legende und für Screenreader. Ohne Eingabe der Produkttitel.
  • Horizontal position und Vertical position (0–100%): wo der Pin auf dem Bild sitzt. 0% ist der linke bzw. obere Rand.
  • Open on page load: zeigt die Karte dieses Pins, wenn sich die Seite öffnet. Nur der erste Pin mit dieser Einstellung öffnet sich.

Eine Liste von Kollektionen, jede mit einem kurzen Code, Text und Bild. Bis zu 8 Collection-Blöcke.

  • Subheading, Heading, Link label und Link (leer lassen, um auf alle Produkte zu verlinken).

Collection-Block: Collection, Code (kurzer Code in der linken Spalte, zum Beispiel SUS; leer lassen, um die ersten drei Buchstaben des Kollektionstitels zu verwenden), Short text und Image (optional; leer lassen, um das Kollektionsbild zu verwenden).

Ein Raster mit Produkten aus einer Kollektion.

  • Collection, Products to show (4–12), Subheading, Heading, Link label und Link (leer lassen, um auf die Kollektion zu verlinken).
  • Remove top padding: für den Fall, dass der Abschnitt direkt unter einem Abschnitt Featured collections steht.

Before / after

Zwei Bilder mit einem Griff, den der Kunde zieht, um sie zu vergleichen.

  • Subheading, Heading, Text.
  • Before image und After image: 16:9 empfohlen. Verwenden Sie für beide denselben Bildausschnitt.
  • Before label und After label.
  • Start position (0–100%): wo der Griff beim Laden der Seite steht.

Comparison table

Eine Tabelle, die bis zu 4 Optionen über mehrere Zeilen vergleicht. Bis zu 12 Row-Blöcke.

  • Subheading, Heading, Link label und Link (der Link erscheint nur mit Label und URL).
  • Column 1 heading bis Column 4 heading. Lassen Sie Spalte 4 leer für eine dreispaltige Tabelle.
  • Highlighted column: gibt der Spalte eine Überschrift in der Akzentfarbe und eingefärbte Zellen.

Row-Block: Attribute und Column 1 value bis Column 4 value.

Ein Produkt, dargestellt als dunkles Datenblatt mit Bild, Preis und bis zu fünf Spezifikationszeilen.

  • Product: Titel, Bild, SKU, Preis und Spezifikationszeilen kommen aus dem Produkt. Die Spezifikationszeilen lesen das Metafeld custom.spec_sheet und zeigen die ersten fünf. Siehe Metafelder.
  • Image: 4:3 empfohlen. Optional: leer lassen, um das Hauptbild des Produkts zu verwenden.
  • Subheading: Die SKU der Variante wird angehängt, zum Beispiel „Datenblatt · ABC-123“.
  • Heading: leer lassen, um den Produkttitel zu verwenden.
  • Text, Price note und Button label.

Blöcke: Custom Liquid und App-Blöcke.

Product bundles

Gruppen von Produkten, die Kunden mit einem Klick in den Warenkorb legen. Bis zu 6 Bundle-Blöcke.

  • Subheading, Heading, Text.

Bundle-Block:

  • Bundle name: Der Warenkorb speichert ihn bei jeder Position, um die Teile des Bundles zu gruppieren.
  • Short text.
  • Image: 16:10 empfohlen. Optional: leer lassen, um das Bild des ersten Produkts zu verwenden.
  • Products: Wählen Sie bis zu sechs. „Add all“ fügt von jedem vorrätigen Produkt eines hinzu und überspringt ausverkaufte. Bei Produkten mit mehreren Varianten wird die erste verfügbare Variante hinzugefügt.

Fitment steps

Erklärt in bis zu 6 Step-Blöcken, wie die Fahrzeugzuordnung in Ihrem Shop funktioniert.

  • Subheading, Heading, Text.
  • Step-Block: Heading und Text.

Ein Raster aus quadratischen Bildern, zum Beispiel Kundenfotos. Bis zu 12 Blöcke.

  • Subheading, Heading.
  • Image-Block: Image (1:1 empfohlen), Link (optional, zum Beispiel der Beitrag oder das verbaute Produkt) und Caption (ein kurzes Label in der Ecke, zum Beispiel ein Nutzername oder ein Fotonachweis).
  • Für einen Live-Feed von Instagram fügen Sie einen App-Block hinzu; er erscheint in voller Breite unter den Kacheln.
  • Solange Show "Demo fitment" label aktiviert ist, erscheint neben der Überschrift ein Tag Demo images.

Blog posts

Die neuesten Beiträge aus einem Blog.

  • Blog: zeigt die neuesten Beiträge aus diesem Blog.
  • Posts to show (2–6), Subheading, Heading, Text.
  • Remove top padding: für den Fall, dass der Abschnitt auf einen dunklen Abschnitt in voller Breite folgt.

Installer locator

Eine Liste von Montagepartnern mit optionalem Regionsmenü. Es gibt keinen Kartendienst: Sie fügen jede Werkstatt als Block hinzu (bis zu 12).

  • Subheading, Heading.
  • Map or workshop image: 4:3 empfohlen.
  • Image caption: ein kurzes Label in der Ecke des Bildes.

Installer-Block: Name, City, Region (füllt das Regionsmenü; schreiben Sie die Region bei jeder Werkstatt dieser Region gleich, oder lassen Sie das Feld leer, damit die Werkstatt in jeder Region erscheint), Services (eine Zeile) und Distance (beliebiger Text, zum Beispiel „4,2 km“).

Das Regionsmenü erscheint, sobald es zwei oder mehr Regionen gibt.

FAQ

Fragen und Antworten, die sich auf- und zuklappen lassen. Bis zu 20 Question-Blöcke.

  • Subheading, Heading.
  • Open the first question: Die erste Frage ist anfangs aufgeklappt, die übrigen sind zugeklappt.
  • Question-Block: Question und Answer. Verweisen Sie hier auf Ihre Richtlinien, statt Bedingungen zu versprechen, zum Beispiel „Siehe unsere Versandrichtlinie“.

Newsletter

Ein Formular zur Anmeldung per E-Mail. Fügt Abonnenten mit dem Tag „newsletter“ zu Ihren Kunden hinzu.

  • Subheading, Heading, Button label.
  • Note under the form: optionales Kleingedrucktes, zum Beispiel wie oft Sie E-Mails versenden.
  • Image: 16:9 empfohlen. Erscheint auf Smartphones über dem Formular.

Custom Liquid

Fügen Sie Liquid oder HTML hinzu, zum Beispiel das Snippet einer App. Es wird innerhalb des Seitencontainers dargestellt.


Kollektionsseiten und Suchseiten

Collection banner (nur Vorlage: Kollektion)

Der dunkle Kopfbereich oben auf einer Kollektionsseite.

  • Show breadcrumb.
  • Fallback image: 3:1 empfohlen. Erscheint nur, wenn die Kollektion kein eigenes Bild hat.
  • Subheading: eine kleine Zeile über dem Kollektionstitel.
  • Show the collection description und Show the product count.

Product grid (nur Vorlage: Kollektion)

  • Products per page (8–24).
  • Default grid on desktop: drei oder vier Spalten. Kunden können mit dem Spaltenumschalter wechseln; ihr Browser merkt sich die Wahl.
  • Show the column toggle, Show sorting, Show filters. Die Filter kommen aus der App Search & Discovery.
  • Empty collection heading und Empty collection text: erscheinen, wenn die Kollektion keine Produkte hat.

Fits my vehicle: Die Seitenleiste enthält ein Feld „Fits my vehicle“. Es blendet auf der aktuellen Seite Produkte aus, deren Zuordnungsliste das Fahrzeug des Kunden nicht enthält, sowie Produkte ohne Zuordnungsdaten. Siehe Fahrzeugzuordnung.

Promo tile-Block (1): eine dunkle Kachel im Raster, die zwei Spalten einnimmt.

  • Image, Subheading, Heading, Text, Link label, Link (leer lassen, um auf alle Produkte zu verlinken).
  • Position (1–12): wie viele Produkte vor der Kachel kommen.
  • Show on the first page only.

Search results (nur Vorlage: Suche)

  • Results per page (8–24), Default grid on desktop, Show the column toggle, Show sorting, Show filters.
  • Show articles and pages: listet sie unter den Produkten auf. Filter und Sortierung gelten nur für Produkte.
  • Page heading: Show a search field on the page, Banner image (optional) und Subheading.
  • No results: Heading (verwenden Sie {terms} für den Suchbegriff des Kunden) und Text.

Das Feld „Fits my vehicle“ funktioniert genauso wie auf Kollektionsseiten.

Collection list (nur Vorlage: Kollektionsliste)

  • Subheading, Heading (leer lassen, um „Collections“ zu verwenden), Text, Collections per page (8–40).

Produktseite

Der Abschnitt Product und seine Blöcke werden auf einer eigenen Seite beschrieben: Produktseite.

Product recommendations (nur Vorlage: Produkt)

  • Subheading, Heading, Show the "Shop all parts" link, Number of products (2–8).
  • Recommendation type: Related zeigt ähnliche Produkte; Complementary zeigt Produkte, die Sie in Search & Discovery eingerichtet haben. Zeigt nichts, solange Shopify keine Empfehlungen hat.

Die Produktvorlage der Demo verwendet diesen Abschnitt zweimal: einmal für ergänzende und einmal für ähnliche Produkte.


Blog und Beiträge

Blog (nur Vorlage: Blog)

  • Show banner image und Banner image. Ist die Einstellung aus, zeigt die Seite nur die Überschrift.
  • Subheading.
  • Show tag filter: Schaltflächen, die Beiträge nach Tag filtern.
  • Posts per page (6–24).

Article (nur Vorlage: Beitrag)

  • Show featured image, Show date, Show author.
  • Blöcke: Custom Liquid und App-Blöcke.

Warenkorb

Cart page (nur Vorlage: Warenkorb)

  • Show order note: fügt ein Notizfeld hinzu, das mit dem Warenkorb gespeichert wird und in der Bestellung erscheint.
  • Show fitment warning: zeigt „Not listed for your vehicle“ bei Positionen, deren Produktzuordnung das Fahrzeug des Kunden nicht enthält.
  • Blöcke: Custom Liquid und App-Blöcke.

Die Warenkorbseite und die Warenkorb-Seitenleiste zeigen dynamische Checkout-Buttons (zum Beispiel Shop Pay), wie in Ihren Zahlungseinstellungen eingerichtet.


Weitere Seiten

Page (nur Vorlage: Seite)

  • Show page heading.
  • Enable narrow reading width: begrenzt Text auf etwa 72 Zeichen pro Zeile. Schalten Sie die Einstellung für Seiten mit breiten Tabellen oder eingebetteten Inhalten aus.

Contact form (nur Vorlage: Seite)

Wird von der Vorlage page.contact verwendet. Weisen Sie diese Vorlage unter Onlineshop › Seiten Ihrer Kontaktseite zu.

  • Intro text: erscheint über dem Formular, nach dem eigenen Inhalt der Seite. Als Spamschutz verwenden Sie die reCAPTCHA-Einstellung von Shopify für den Onlineshop.
  • Button label.

404 page

  • Heading, Text, Show search form.

Password page

  • Logo und Logo width. Ohne Logo erscheint der Shopname in der Überschriftenschrift.
  • Heading.
  • Show email signup: Abonnenten erhalten unter Kunden die Tags „prospect, password page“.
  • Show social media icons.

Kundenkontoseiten

Anmeldung, Registrierung, Konto, Bestellung, Adressen, Kontoaktivierung und Zurücksetzen des Passworts haben jeweils einen eigenen Abschnitt. Customer account und Customer order nehmen außerdem Custom Liquid und App-Blöcke auf.

Kommen Sie mit Keld nicht weiter? Kontaktieren Sie den Support mit der URL Ihres Shops und der Seite, auf der es passiert.