Översikt över block
Fullständig guide till alla tillgängliga temablock och deras anpassningsalternativ.
Tillgängliga block
Appen tillhandahåller 3 appblock och 1 appinbäddning för ditt Shopify-tema. Använd appinbäddningen en gång (rekommenderas), och lägg sedan till blocken i mallarna där du vill att de ska visas.
Breadcrumbs block (App block) — breadcrumbs navigation för samlings- och produktsidor
Subcategories block (Text below) (App block) — underkollektionsnät / karusell med titel under bilden
Subcategories block (Text overlay) (App block) — underkollektionsnät / karusell med överlagrad titel på bilden
Breadcrumbs & Categories (App embed) — laddar globala stilar/script (rekommenderas)
Breadcrumbs block
Lägg till detta block i produkt- och/eller samlingsmallar för att visa en klickbar breadcrumb-väg. Det stöder responsiv visning och flera skiljeteckenstilar.
Layout och typografi
Block max width (
page_width) — maximal behållarbredd i pxFont size (
font_size) — storlek på breadcrumb-textenSeparated icon size (
separated_icon_size) — storlek på skiljeteckensikonenSeparator spacing (
separated_size) — avstånd runt skiljetecknetText alignment (
text_align) — vänster/centrerad/höger
Utfyllnad
Top and bottom (
padding_block) — vertikal utfyllnadLeft and right (
padding_inline) — horisontell utfyllnad
Visningsalternativ
Bold the current item (
bold_current_item_on_breadcrumb) — markera det sista breadcrumb-objektetHover effect (
hover_effect) — Ingen / Understrykning / Skala / Glöd / Studs / SvängEnable horizontal scroll on mobile (
scroll_on_mobile) — scrolla istället för att bryta rad på små skärmarHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — döljer produkttiteln på produktsidor
Färger
Background (
background_color) — blockets bakgrundsfärgText (
text_color) — textfärg
Avancerad anpassning
Breadcrumb divider symbol (
trail_divider_style) — välj en avskiljare: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash
Objektetikett
Konfigurera etiketterna som visas i breadcrumb-vägen (använd ditt butiksspråk).
Home display type (
home_display_type) — Text / Hemikon (Klassisk) / Hemikon (Kontur)Home page (
label_home) — etikett för hemsidanList collection page (
label_list_collections) — etikett för samlingslistans sidaCatalog page (
label_catalog) — etikett för katalogobjektet (använd---för att dölja; se noteringen i inställningen)Custom Catalog link (
custom_catalog_link) — valfri anpassad URL (standard är/collections/all)
Subcategories block (Text below)
Visa underkollektioner som ett nät eller en karusell. Denna layout visar samlingstiteln (och eventuellt produktantal) under bilden.
Allmänt
Block max width (
page_width) — maximal behållarbredd i pxEnable carousel on desktop (
enable_desktop_slider) — aktiverar sliderbeteende på stationära datorerAutoplay (
autoplay_mode) — auto-scroll / auto-slide-lägen (se nedan)Enable the navigation (
slider_enable_navigation) — visar navigeringspilar/prickarVertical spacing (
vertical_spacing) — avstånd mellan rubrik och slider/nätHeading (
title) — sektionens rubriktextImage ratio (
image_ratio) — Anpassa till bild / Kvadrat / Porträtt / Landskap / CirkelImage fit type (
image_fit_type) — Täck / AnpassaImage border radius (
image_border_radius) — gäller ej när bildförhållandet är CirkelNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — utrymme mellan kategorikortContent layout (
content_layout) — Normal / Överlappning / Text Under / Text Under RamText alignment (
text_alignment) — vänster/centrerad/högerShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — begränsa titlar till 5 ordReverse layout (Text on top, Image below) (
reverse_image_position)
Autoplay (auto-scroll / auto-slide)
Gäller endast när Enable carousel on desktop är aktiverat.
Off (
none)Slow – 50px/s (
slow_scroll_50) — kontinuerlig auto-scrollFast – 100px/s (
slow_scroll_100) — kontinuerlig auto-scrollEvery 3 seconds (1 item) (
slide_3s) — slidear ett objekt i tagetEvery 3 seconds (All visible items) (
slide_3s_page) — slidear en sida i taget
Färger
Text (
colors_text)Bakgrund (
colors_background) — används endast när Innehållslayout är Överlapp
Mobil layout
Antal kolumner på surfplatta (
columns_tablet) — 2/3/4Antal kolumner på mobil (
columns_mobile) — 1/2Aktivera svep på surfplatta och mobil (
swipe_on_mobile)
Teckenstorlek för samlingstitel
Teckenstorleken för produktantalet justeras automatiskt baserat på teckenstorleken för samlingstiteln.
Skrivbord (
font_size_desktop)Surfplatta (
font_size_tablet)Mobil (
font_size_mobile)
Underkategoriblok (Textöverlägg)
Visa underkollektioner som ett rutnät eller en karusell med titeln (och valfritt produktantal) ovanför bilden.
Allmänt
Blockets maxbredd (
page_width) — max behållarbredd i pxAktivera karusell på skrivbord (
enable_desktop_slider) — aktiverar reglaget på skrivbordAutospel (
autoplay_mode) — auto-scroll / auto-slide-lägen (se nedan)Aktivera navigering (
slider_enable_navigation) — visar navigeringspilar/prickarVertikalt avstånd (
vertical_spacing) — avstånd mellan rubrik och reglage/rutnätRubrik (
title) — sektionens rubriktextBildförhållande (
image_ratio) — Anpassa till bild / Kvadrat / Porträtt / Landskap / CirkelBildanpassningstyp (
image_fit_type) — Täck / InnehållBildens hörnradie (
image_border_radius) — gäller inte när Bildförhållande är CirkelAntal kolumner på skrivbord (
columns_desktop)Innehållsposition (
content_position) — Överst / Mitten / NederstTextjustering (
text_alignment) — Vänster / Mitten / HögerVisa produktantal (
show_product_count)Aktivera versaler (
enable_uppercase_text)Innehållslayouts riktning (
content_layout_direction) — Enkel rad / Staplad kolumn
Autospel (auto-scroll / auto-slide)
Gäller endast när Aktivera karusell på skrivbord är aktiverat.
Av (
none)Långsam – 50px/s (
slow_scroll_50) — kontinuerlig auto-scrollSnabb – 100px/s (
slow_scroll_100) — kontinuerlig auto-scrollVar 3:e sekund (1 objekt) (
slide_3s) — glider ett objekt i tagetVar 3:e sekund (Alla objekt) (
slide_3s_page) — glider en sida i taget
Mobil layout
Antal kolumner på surfplatta (
columns_tablet) — 2/3/4Antal kolumner på mobil (
columns_mobile) — 1/2Aktivera svep på surfplatta och mobil (
swipe_on_mobile)
Teckenstorlek för samlingstitel
Teckenstorleken för produktantalet justeras automatiskt baserat på teckenstorleken för samlingstiteln.
Skrivbord (
font_size_desktop)Surfplatta (
font_size_tablet)Mobil (
font_size_mobile)
Färg på rubriktext
Färg Text (
colors_text)Färg på överläggstext (
colors_overlay) — överläggsfärg för läsbarhet
Appinbäddning
Appinbäddningen rekommenderas eftersom den laddar global CSS/JS som används av blocken (till exempel: autospel-skript för Underkategorier, valfria i18n-hjälpmedel och Anpassad CSS konfigurerad i appen).
Aktivera den i Theme editor → App embeds
Behåll den aktiverad för att säkerställa att alla block fungerar korrekt
Lägga till block i ditt tema
Gå till din Shopify-admin
Navigera till Online Store › Themes
Klicka på "Anpassa" på ditt aktiva tema
Lägg till appblock där du vill att de ska visas
Anpassa inställningar och spara
Blockinställningar
Alla inställningar som listas ovan konfigureras i Shopify Theme Editor när du väljer blocket. De flesta inställningar är responsiva (dator/surfplatta/mobil).
Bästa praxis
Lägg till Breadcrumbs & Categories på produkt- och samlingsmallar
Använd underkategoriblokker på samlingssidor
Matcha blockets stil med ditt tema
Testa på mobila enheter
Förhandsgranska innan publicering