Blocks Overview
Complete guide to all available theme blocks and their customization options.
Available Blocks
The app provides 3 app blocks and 1 app embed for your Shopify theme. Use the app embed once (recommended), then add the blocks to the templates where you want them to appear.
Breadcrumbs block (App block) — breadcrumbs navigation for collection and product pages
Subcategories block (Text below) (App block) — subcollections grid / carousel with title below the image
Subcategories block (Text overlay) (App block) — subcollections grid / carousel with overlay title on the image
Breadcrumbs & Categories (App embed) — loads global styles/scripts (recommended)
Breadcrumbs block
Add this block to product and/or collection templates to show a clickable breadcrumb trail. It supports responsive display and multiple divider styles.
Layout and Typography
Block max width (
page_width) — max container width in pxFont size (
font_size) — breadcrumb text sizeSeparated icon size (
separated_icon_size) — divider icon sizeSeparator spacing (
separated_size) — spacing around the dividerText alignment (
text_align) — left/center/right
Padding
Top and bottom (
padding_block) — vertical paddingLeft and right (
padding_inline) — horizontal padding
Display options
Bold the current item (
bold_current_item_on_breadcrumb) — emphasize the last breadcrumb itemHover effect (
hover_effect) — None / Underline / Scale / Glow / Bounce / SwingEnable horizontal scroll on mobile (
scroll_on_mobile) — scroll instead of wrapping on small screensHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — hides product title on product pages
Colors
Background (
background_color) — background color of the blockText (
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 itemList collection page (
label_list_collections) — label for the collections list pageCatalog 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)
Subcategories block (Text below)
Display subcollections as a grid or a carousel. This layout shows the collection title (and optionally product count) below the image.
General
Block max width (
page_width) — max container width in pxEnable carousel on desktop (
enable_desktop_slider) — enables slider behavior on desktopAutoplay (
autoplay_mode) — auto-scroll / auto-slide modes (see below)Enable the navigation (
slider_enable_navigation) — shows navigation arrows/dotsVertical spacing (
vertical_spacing) — spacing between heading and slider/gridHeading (
title) — section heading textImage ratio (
image_ratio) — Adapt to image / Square / Portrait / Landscape / CircleImage fit type (
image_fit_type) — Cover / ContainImage border radius (
image_border_radius) — not applicable when Image ratio is CircleNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — space between category cardsContent layout (
content_layout) — Normal / Overlap / Text Below / Text Below BorderText alignment (
text_alignment) — left/center/rightShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — limit titles to 5 wordsReverse 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-scrollFast – 100px/s (
slow_scroll_100) — continuous auto-scrollEvery 3 seconds (1 item) (
slide_3s) — slides by one itemEvery 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/4Number of columns on mobile (
columns_mobile) — 1/2Enable 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)
Subcategories block (Text overlay)
Display subcollections as a grid or a carousel with the title (and optionally product count) on top of the image.
General
Block max width (
page_width) — max container width in pxEnable carousel on desktop (
enable_desktop_slider) — enables slider behavior on desktopAutoplay (
autoplay_mode) — auto-scroll / auto-slide modes (see below)Enable the navigation (
slider_enable_navigation) — shows navigation arrows/dotsVertical spacing (
vertical_spacing) — spacing between heading and slider/gridHeading (
title) — section heading textImage ratio (
image_ratio) — Adapt to image / Square / Portrait / Landscape / CircleImage fit type (
image_fit_type) — Cover / ContainImage border radius (
image_border_radius) — not applicable when Image ratio is CircleNumber of columns on desktop (
columns_desktop)Content position (
content_position) — Top / Center / BottomText alignment (
text_alignment) — Left / Center / RightShow 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-scrollFast – 100px/s (
slow_scroll_100) — continuous auto-scrollEvery 3 seconds (1 item) (
slide_3s) — slides by one itemEvery 3 seconds (All items) (
slide_3s_page) — slides by one page
Mobile Layout
Number of columns on tablet (
columns_tablet) — 2/3/4Number of columns on mobile (
columns_mobile) — 1/2Enable 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
App embed
The app embed is recommended because it loads global CSS/JS used by the blocks (for example: autoplay script for Subcategories, optional i18n helpers, and Custom CSS configured in the app).
Enable it in Theme editor → App embeds
Keep it enabled to ensure all blocks work correctly
Adding Blocks to Your Theme
Go to your Shopify admin
Navigate to Online Store › Themes
Click "Customize" on your live theme
Add app blocks where you want them to appear
Customize settings and save
Block Settings
All settings listed above are configured in the Shopify Theme Editor when you select the block. Most settings are responsive (desktop/tablet/mobile).
Best Practices
Add breadcrumbs to product and collection templates
Use sub-categories blocks on collection pages
Match block styling to your theme
Test on mobile devices
Preview before publishing