Blocks Overview

Layout and Typography

• Block max width (page_width) — max container width in px

• Font size (font_size) — breadcrumb text size

• Separated icon size (separated_icon_size) — divider icon size

• Separator spacing (separated_size) — spacing around the divider

• Text alignment (text_align) — left/center/right

Padding

• Top and bottom (padding_block) — vertical padding

• Left and right (padding_inline) — horizontal padding

Display options

• Bold the current item (bold_current_item_on_breadcrumb) — emphasize the last breadcrumb item

• Hover effect (hover_effect) — None / Underline / Scale / Glow / Bounce / Swing

• Enable horizontal scroll on mobile (scroll_on_mobile) — scroll instead of wrapping on small screens

• Hide product name in breadcrumbs (hidden_product_name_on_breadcrumb) — hides product title on product pages

Colors

• Background (background_color) — background color of the block

• Text (text_color) — text color

Advanced customization

• Breadcrumb divider symbol (trail_divider_style) — choose a divider: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash

Item label

Configure the labels shown in the breadcrumb trail (use your storefront language).

• Home display type (home_display_type) — Text / Home Icon (Classic) / Home Icon (Outline)

• Home page (label_home) — label for the home item

• List collection page (label_list_collections) — label for the collections list page

• Catalog page (label_catalog) — label for the catalog item (use --- to hide; see the note in the setting)

• Custom Catalog link (custom_catalog_link) — optional custom URL (defaults to /collections/all)

General

• Block max width (page_width) — max container width in px

• Enable carousel on desktop (enable_desktop_slider) — enables slider behavior on desktop

• Autoplay (autoplay_mode) — auto-scroll / auto-slide modes (see below)

• Enable the navigation (slider_enable_navigation) — shows navigation arrows/dots

• Vertical spacing (vertical_spacing) — spacing between heading and slider/grid

• Heading (title) — section heading text

• Image ratio (image_ratio) — Adapt to image / Square / Portrait / Landscape / Circle

• Image fit type (image_fit_type) — Cover / Contain

• Image border radius (image_border_radius) — not applicable when Image ratio is Circle

• Number of columns on desktop (columns_desktop)

• Card spacing (card_spacing_desktop) — space between category cards

• Content layout (content_layout) — Normal / Overlap / Text Below / Text Below Border

• Text alignment (text_alignment) — left/center/right

• Show the product count (show_product_count)

• Enable uppercase text (enable_uppercase_text)

• Truncate long titles (truncate_title) — limit titles to 5 words

• Reverse layout (Text on top, Image below) (reverse_image_position)

Autoplay (auto-scroll / auto-slide)

Only applies when Enable carousel on desktop is enabled.

• Off (none)

• Slow – 50px/s (slow_scroll_50) — continuous auto-scroll

• Fast – 100px/s (slow_scroll_100) — continuous auto-scroll

• Every 3 seconds (1 item) (slide_3s) — slides by one item

• Every 3 seconds (All visible items) (slide_3s_page) — slides by one page

Colors

• Text (colors_text)

• Background (colors_background) — only used when Content layout is Overlap

Mobile Layout

• Number of columns on tablet (columns_tablet) — 2/3/4

• Number of columns on mobile (columns_mobile) — 1/2

• Enable swipe on tablet and mobile (swipe_on_mobile)

Collection title font size

The product count font size is automatically adjusted based on the collection title font size.

• Desktop (font_size_desktop)

• Tablet (font_size_tablet)

• Mobile (font_size_mobile)

General

• Block max width (page_width) — max container width in px

• Enable carousel on desktop (enable_desktop_slider) — enables slider behavior on desktop

• Autoplay (autoplay_mode) — auto-scroll / auto-slide modes (see below)

• Enable the navigation (slider_enable_navigation) — shows navigation arrows/dots

• Vertical spacing (vertical_spacing) — spacing between heading and slider/grid

• Heading (title) — section heading text

• Image ratio (image_ratio) — Adapt to image / Square / Portrait / Landscape / Circle

• Image fit type (image_fit_type) — Cover / Contain

• Image border radius (image_border_radius) — not applicable when Image ratio is Circle

• Number of columns on desktop (columns_desktop)

• Content position (content_position) — Top / Center / Bottom

• Text alignment (text_alignment) — Left / Center / Right

• Show the product count (show_product_count)

• Enable uppercase text (enable_uppercase_text)

• Content layout direction (content_layout_direction) — Single line (row) / Stacked (column)

Autoplay (auto-scroll / auto-slide)

Only applies when Enable carousel on desktop is enabled.

• Off (none)

• Slow – 50px/s (slow_scroll_50) — continuous auto-scroll

• Fast – 100px/s (slow_scroll_100) — continuous auto-scroll

• Every 3 seconds (1 item) (slide_3s) — slides by one item

• Every 3 seconds (All items) (slide_3s_page) — slides by one page

Mobile Layout

• Number of columns on tablet (columns_tablet) — 2/3/4

• Number of columns on mobile (columns_mobile) — 1/2

• Enable swipe on tablet and mobile (swipe_on_mobile)

Collection title font size

The product count font size is automatically adjusted based on the collection title font size.

• Desktop (font_size_desktop)

• Tablet (font_size_tablet)

• Mobile (font_size_mobile)

Color header text

• Color Text (colors_text)

• Color overlay text (colors_overlay) — overlay color for readability