Blöcke Übersicht
Vollständiger Leitfaden zu allen verfügbaren Theme-Blöcken und deren Anpassungsoptionen.
Verfügbare Blöcke
Die App bietet 3 App-Blöcke und 1 App-Einbettung für Ihr Shopify-Theme. Verwenden Sie die App-Einbettung einmal (empfohlen) und fügen Sie dann die Blöcke zu den Vorlagen hinzu, in denen sie erscheinen sollen.
Breadcrumbs block (App block) — Breadcrumbs-Navigation für Kategorieseiten und Produktseiten
Subcategories block (Text below) (App block) — Unterkategories Raster / Karussell mit Titel unter dem Bild
Subcategories block (Text overlay) (App block) — Unterkategories Raster / Karussell mit überlagertem Titel auf dem Bild
Breadcrumbs & Categories (App embed) — lädt globale Styles/Skripte (empfohlen)
Breadcrumbs block
Fügen Sie diesen Block zu Produkt- und/oder Kategorieseiten-Vorlagen hinzu, um eine klickbare Breadcrumb-Navigation anzuzeigen. Es unterstützt responsive Anzeige und mehrere Trennstile.
Layout und Typografie
Block max width (
page_width) — maximale Containerbreite in pxFont size (
font_size) — Schriftgröße des Breadcrumb-TextesSeparated icon size (
separated_icon_size) — Größe des TrennsymbolsSeparator spacing (
separated_size) — Abstand um den TrennerText alignment (
text_align) — links/zentriert/rechts
Abstand (Padding)
Top and bottom (
padding_block) — vertikaler AbstandLeft and right (
padding_inline) — horizontaler Abstand
Anzeigeoptionen
Bold the current item (
bold_current_item_on_breadcrumb) — hebt das letzte Breadcrumb-Element hervorHover effect (
hover_effect) — Keine / Unterstreichen / Skalieren / Leuchten / Springen / SchwingenEnable horizontal scroll on mobile (
scroll_on_mobile) — scrollen statt umbrechen auf kleinen BildschirmenHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — blendet den Produktnamen auf Produktseiten aus
Farben
Background (
background_color) — Hintergrundfarbe des BlocksText (
text_color) — Textfarbe
Erweiterte Anpassung
Breadcrumb divider symbol (
trail_divider_style) — wählen Sie einen Trenner: Chevron Rechts, Doppelpfeil, Schrägstrich, Rohr, Aufzählungspunkt, Winkelklammer, Bindestrich
Elementbeschriftung
Konfigurieren Sie die Beschriftungen, die in der Breadcrumb-Navigation angezeigt werden (verwenden Sie Ihre Shop-Sprache).
Home display type (
home_display_type) — Text / Home-Symbol (Klassisch) / Home-Symbol (Umriss)Home page (
label_home) — Beschriftung für das Home-ElementList collection page (
label_list_collections) — Beschriftung für die KategorieseitenlisteCatalog page (
label_catalog) — Beschriftung für das Katalogelement (verwenden Sie---zum Ausblenden; siehe Hinweis in der Einstellung)Custom Catalog link (
custom_catalog_link) — optionale benutzerdefinierte URL (Standard ist/collections/all)
Subcategories block (Text below)
Zeigt Unterkategorien als Raster oder Karussell an. Dieses Layout zeigt den Kategorietitel (und optional die Produktanzahl) unter dem Bild.
Allgemein
Block max width (
page_width) — maximale Containerbreite in pxEnable carousel on desktop (
enable_desktop_slider) — aktiviert das Karussell-Verhalten auf dem DesktopAutoplay (
autoplay_mode) — Auto-Scroll / Auto-Slide Modi (siehe unten)Enable the navigation (
slider_enable_navigation) — zeigt Navigationspfeile/Punkte anVertical spacing (
vertical_spacing) — Abstand zwischen Überschrift und Slider/RasterHeading (
title) — AbschnittsüberschriftImage ratio (
image_ratio) — An Bild anpassen / Quadrat / Hochformat / Querformat / KreisImage fit type (
image_fit_type) — Cover / ContainImage border radius (
image_border_radius) — nicht anwendbar, wenn Bildverhältnis Kreis istNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — Abstand zwischen Kategorie-KartenContent layout (
content_layout) — Normal / Überlappen / Text darunter / Text darunter mit RahmenText alignment (
text_alignment) — links/zentriert/rechtsShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — Titel auf 5 Wörter begrenzenReverse layout (Text on top, Image below) (
reverse_image_position)
Autoplay (Auto-Scroll / Auto-Slide)
Gilt nur, wenn Enable carousel on desktop aktiviert ist.
Aus (
none)Langsam – 50px/s (
slow_scroll_50) — kontinuierliches Auto-ScrollSchnell – 100px/s (
slow_scroll_100) — kontinuierliches Auto-ScrollAlle 3 Sekunden (1 Element) (
slide_3s) — rutscht um ein Element weiterAlle 3 Sekunden (Alle sichtbaren Elemente) (
slide_3s_page) — rutscht um eine Seite weiter
Farben
Text (
colors_text)Hintergrund (
colors_background) — wird nur verwendet, wenn das Inhaltslayout Überlappen ist
Mobil-Layout
Anzahl der Spalten auf dem Tablet (
columns_tablet) — 2/3/4Anzahl der Spalten auf dem Mobilgerät (
columns_mobile) — 1/2Swipe auf Tablet und Mobilgerät aktivieren (
swipe_on_mobile)
Schriftgröße des Sammlungstitels
Die Schriftgröße der Produktanzahl wird automatisch basierend auf der Schriftgröße des Sammlungstitels angepasst.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobil (
font_size_mobile)
Unterkategorien-Block (Textüberlagerung)
Zeigt Unterkollektionen als Raster oder Karussell mit dem Titel (und optional der Produktanzahl) über dem Bild an.
Allgemein
Maximale Blockbreite (
page_width) — maximale Containerbreite in pxKarussell auf dem Desktop aktivieren (
enable_desktop_slider) — aktiviert das Slider-Verhalten auf dem DesktopAutoplay (
autoplay_mode) — Auto-Scroll / Auto-Slide Modi (siehe unten)Navigation aktivieren (
slider_enable_navigation) — zeigt Navigationspfeile/Punkte anVertikaler Abstand (
vertical_spacing) — Abstand zwischen Überschrift und Slider/RasterÜberschrift (
title) — AbschnittsüberschriftBildverhältnis (
image_ratio) — An Bild anpassen / Quadrat / Hochformat / Querformat / KreisBildanpassungstyp (
image_fit_type) — Cover / ContainBild-Radius (
image_border_radius) — nicht anwendbar, wenn Bildverhältnis Kreis istAnzahl der Spalten auf dem Desktop (
columns_desktop)Inhaltsposition (
content_position) — Oben / Mitte / UntenTextausrichtung (
text_alignment) — Links / Mitte / RechtsProduktanzahl anzeigen (
show_product_count)Großschreibung des Textes aktivieren (
enable_uppercase_text)Richtung des Inhaltslayouts (
content_layout_direction) — Einzeilig (Reihe) / Gestapelt (Spalte)
Autoplay (Auto-Scroll / Auto-Slide)
Gilt nur, wenn Karussell auf dem Desktop aktivieren eingeschaltet ist.
Aus (
none)Langsam – 50px/s (
slow_scroll_50) — kontinuierliches Auto-ScrollSchnell – 100px/s (
slow_scroll_100) — kontinuierliches Auto-ScrollAlle 3 Sekunden (1 Element) (
slide_3s) — rutscht um ein ElementAlle 3 Sekunden (Alle Elemente) (
slide_3s_page) — rutscht um eine Seite
Mobil-Layout
Anzahl der Spalten auf dem Tablet (
columns_tablet) — 2/3/4Anzahl der Spalten auf dem Mobilgerät (
columns_mobile) — 1/2Swipe auf Tablet und Mobilgerät aktivieren (
swipe_on_mobile)
Schriftgröße des Sammlungstitels
Die Schriftgröße der Produktanzahl wird automatisch basierend auf der Schriftgröße des Sammlungstitels angepasst.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobil (
font_size_mobile)
Farbe des Überschriftentextes
Textfarbe (
colors_text)Farbe der Textüberlagerung (
colors_overlay) — Überlagerungsfarbe für Lesbarkeit
App-Einbettung
Die App-Einbettung wird empfohlen, da sie globales CSS/JS lädt, das von den Blöcken verwendet wird (zum Beispiel: Autoplay-Skript für Unterkategorien, optionale i18n-Hilfen und benutzerdefiniertes CSS, das in der App konfiguriert ist).
Aktivieren Sie es in Theme editor → App embeds
Lassen Sie es aktiviert, um sicherzustellen, dass alle Blöcke korrekt funktionieren
Blöcke zu Ihrem Theme hinzufügen
Gehen Sie zu Ihrem Shopify-Admin
Navigieren Sie zu Online Store › Themes
Klicken Sie auf "Anpassen" bei Ihrem Live-Theme
Fügen Sie App-Blöcke dort hinzu, wo Sie sie anzeigen möchten
Passen Sie die Einstellungen an und speichern Sie
Block-Einstellungen
Alle oben aufgeführten Einstellungen werden im Shopify Theme Editor konfiguriert, wenn Sie den Block auswählen. Die meisten Einstellungen sind responsiv (Desktop/Tablet/Mobil).
Beste Praktiken
Breadcrumbs zu Produkt- und Kategorieseiten hinzufügen
Unterkategorie-Blöcke auf Kategorieseiten verwenden
Block-Styling an Ihr Theme anpassen
Auf mobilen Geräten testen
Vorschau vor der Veröffentlichung