Overzicht Blokken
Complete gids voor alle beschikbare theme blocks en hun aanpassingsmogelijkheden.
Beschikbare Blokken
De app biedt 3 app-blokken en 1 app-embed voor je Shopify-thema. Gebruik de app-embed één keer (aanbevolen), voeg vervolgens de blokken toe aan de sjablonen waar je ze wilt laten verschijnen.
Breadcrumbs block (App block) — breadcrumbs navigatie voor collectie- en productpagina's
Subcategories block (Text below) (App block) — subcollecties raster / carrousel met titel onder de afbeelding
Subcategories block (Text overlay) (App block) — subcollecties raster / carrousel met overlay titel op de afbeelding
Breadcrumbs & Categories (App embed) — laadt globale stijlen/scripts (aanbevolen)
Breadcrumbs block
Voeg dit blok toe aan product en/of collectie sjablonen om een klikbare breadcrumb-trail te tonen. Het ondersteunt responsieve weergave en meerdere scheidingsstijlen.
Layout en Typografie
Block max width (
page_width) — maximale containerbreedte in pxFont size (
font_size) — breadcrumb tekstgrootteSeparated icon size (
separated_icon_size) — grootte van het scheidingspictogramSeparator spacing (
separated_size) — ruimte rond de scheidingText alignment (
text_align) — links/midden/rechts
Opvulling
Top and bottom (
padding_block) — verticale opvullingLeft and right (
padding_inline) — horizontale opvulling
Weergave-opties
Bold the current item (
bold_current_item_on_breadcrumb) — benadruk het laatste breadcrumb-itemHover effect (
hover_effect) — Geen / Onderstrepen / Schalen / Gloed / Stuiteren / ZwaaienEnable horizontal scroll on mobile (
scroll_on_mobile) — scrollen in plaats van afbreken op kleine schermenHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — verbergt producttitel op productpagina's
Kleuren
Background (
background_color) — achtergrondkleur van het blokText (
text_color) — tekstkleur
Geavanceerde aanpassing
Breadcrumb divider symbol (
trail_divider_style) — kies een scheidingsteken: Chevron Rechts, Dubbele Pijl, Forward Slash, Pipe, Bullet Point, Angle Bracket, Streepje
Item label
Configureer de labels die in de breadcrumb-trail worden weergegeven (gebruik je winkeltaal).
Home display type (
home_display_type) — Tekst / Home-icoon (Klassiek) / Home-icoon (Outline)Home page (
label_home) — label voor het home-itemList collection page (
label_list_collections) — label voor de pagina met collectielijstCatalog page (
label_catalog) — label voor het catalogus-item (gebruik---om te verbergen; zie de opmerking in de instelling)Custom Catalog link (
custom_catalog_link) — optionele aangepaste URL (standaard/collections/all)
Subcategories block (Text below)
Toon subcollecties als een raster of carrousel. Deze lay-out toont de collectietitel (en optioneel het aantal producten) onder de afbeelding.
Algemeen
Block max width (
page_width) — maximale containerbreedte in pxEnable carousel on desktop (
enable_desktop_slider) — schakelt slider-gedrag in op desktopAutoplay (
autoplay_mode) — auto-scroll / auto-slide modi (zie hieronder)Enable the navigation (
slider_enable_navigation) — toont navigatiepijlen/dotsVertical spacing (
vertical_spacing) — ruimte tussen koptekst en slider/rasterHeading (
title) — sectiekoptekstImage ratio (
image_ratio) — Aanpassen aan afbeelding / Vierkant / Portret / Landschap / CirkelImage fit type (
image_fit_type) — Cover / ContainImage border radius (
image_border_radius) — niet van toepassing wanneer Image ratio Cirkel isNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — ruimte tussen categorietegelsContent layout (
content_layout) — Normaal / Overlap / Tekst Onder / Tekst Onder RandText alignment (
text_alignment) — links/midden/rechtsShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — beperk titels tot 5 woordenReverse layout (Text on top, Image below) (
reverse_image_position)
Autoplay (auto-scroll / auto-slide)
Is alleen van toepassing wanneer Enable carousel on desktop is ingeschakeld.
Off (
none)Slow – 50px/s (
slow_scroll_50) — continue auto-scrollFast – 100px/s (
slow_scroll_100) — continue auto-scrollEvery 3 seconds (1 item) (
slide_3s) — schuift per itemEvery 3 seconds (All visible items) (
slide_3s_page) — schuift per pagina
Kleuren
Tekst (
colors_text)Achtergrond (
colors_background) — alleen gebruikt wanneer de inhoudsindeling Overlap is
Mobiele lay-out
Aantal kolommen op tablet (
columns_tablet) — 2/3/4Aantal kolommen op mobiel (
columns_mobile) — 1/2Veegfunctie inschakelen op tablet en mobiel (
swipe_on_mobile)
Lettergrootte collectie titel
De lettergrootte van het productaantal wordt automatisch aangepast op basis van de lettergrootte van de collectie titel.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobiel (
font_size_mobile)
Subcategorieënblok (Tekst overlay)
Toon subcollecties als een raster of een carrousel met de titel (en optioneel het productaantal) bovenop de afbeelding.
Algemeen
Maximale blokbreedte (
page_width) — maximale containerbreedte in pxCarrousel inschakelen op desktop (
enable_desktop_slider) — schakelt slider-gedrag in op desktopAutomatisch afspelen (
autoplay_mode) — auto-scroll / auto-slide modi (zie hieronder)Navigatie inschakelen (
slider_enable_navigation) — toont navigatiepijlen/dotsVerticale afstand (
vertical_spacing) — afstand tussen koptekst en slider/rasterKoptekst (
title) — sectiekoptekstAfbeeldingsverhouding (
image_ratio) — Aanpassen aan afbeelding / Vierkant / Portret / Landschap / CirkelAfbeeldingsaanpassingstype (
image_fit_type) — Cover / ContainAfbeeldingsrandradius (
image_border_radius) — niet van toepassing wanneer Afbeeldingsverhouding Cirkel isAantal kolommen op desktop (
columns_desktop)Inhoudspositie (
content_position) — Boven / Midden / OnderTekstuitlijning (
text_alignment) — Links / Midden / RechtsToon het productaantal (
show_product_count)Hoofdletters inschakelen (
enable_uppercase_text)Inhoudsindelingsrichting (
content_layout_direction) — Enkele regel (rij) / Gestapeld (kolom)
Automatisch afspelen (auto-scroll / auto-slide)
Is alleen van toepassing wanneer Carrousel inschakelen op desktop is ingeschakeld.
Uit (
none)Langzaam – 50px/s (
slow_scroll_50) — continue auto-scrollSnel – 100px/s (
slow_scroll_100) — continue auto-scrollElke 3 seconden (1 item) (
slide_3s) — schuift per itemElke 3 seconden (Alle items) (
slide_3s_page) — schuift per pagina
Mobiele lay-out
Aantal kolommen op tablet (
columns_tablet) — 2/3/4Aantal kolommen op mobiel (
columns_mobile) — 1/2Veegfunctie inschakelen op tablet en mobiel (
swipe_on_mobile)
Lettergrootte collectie titel
De lettergrootte van het productaantal wordt automatisch aangepast op basis van de lettergrootte van de collectie titel.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobiel (
font_size_mobile)
Kleur koptekst tekst
Kleur Tekst (
colors_text)Kleur overlay tekst (
colors_overlay) — overlay kleur voor leesbaarheid
App embed
De app embed wordt aanbevolen omdat het globale CSS/JS laadt die door de blokken wordt gebruikt (bijvoorbeeld: autoplay-script voor Subcategorieën, optionele i18n-hulpmiddelen en Aangepaste CSS geconfigureerd in de app).
Schakel het in via Theme editor → App embeds
Houd het ingeschakeld om te zorgen dat alle blokken correct werken
Blokken toevoegen aan je thema
Ga naar je Shopify-beheerder
Navigeer naar Online Store › Themes
Klik op "Aanpassen" bij je live thema
Voeg app-blokken toe waar je ze wilt laten verschijnen
Pas instellingen aan en sla op
Blokinstellingen
Alle bovenstaande instellingen worden geconfigureerd in de Shopify Theme editor wanneer je het blok selecteert. De meeste instellingen zijn responsief (desktop/tablet/mobiel).
Beste Praktijken
Voeg Breadcrumbs & Categories toe aan product- en collectie-sjablonen
Gebruik sub-categorie blokken op collectiepagina's
Laat de stijl van het blok overeenkomen met je thema
Test op mobiele apparaten
Voorbeeld bekijken voordat je publiceert