区块概览
所有可用主题区块及其自定义选项的完整指南。
可用区块
该应用为您的 Shopify 主题提供了3 个应用区块和1 个应用嵌入。建议只使用一次应用嵌入,然后将区块添加到您希望显示它们的模板中。
Breadcrumbs block (App block) — 用于集合和产品页面的面包屑导航
Subcategories block (Text below) (App block) — 带有图片下方标题的子集合网格/轮播
Subcategories block (Text overlay) (App block) — 带有图片上方覆盖标题的子集合网格/轮播
Breadcrumbs & Categories (App embed) — 加载全局样式/脚本(推荐)
Breadcrumbs block
将此区块添加到产品和/或集合模板中,以显示可点击的面包屑导航。支持响应式显示和多种分隔符样式。
布局和排版
Block max width (
page_width) — 最大容器宽度(像素)Font size (
font_size) — 面包屑文字大小Separated icon size (
separated_icon_size) — 分隔符图标大小Separator spacing (
separated_size) — 分隔符周围间距Text alignment (
text_align) — 左对齐/居中/右对齐
内边距
Top and bottom (
padding_block) — 垂直内边距Left and right (
padding_inline) — 水平内边距
显示选项
Bold the current item (
bold_current_item_on_breadcrumb) — 突出显示最后一个面包屑项Hover effect (
hover_effect) — 无 / 下划线 / 缩放 / 发光 / 弹跳 / 摆动Enable horizontal scroll on mobile (
scroll_on_mobile) — 小屏幕上启用横向滚动而非换行Hide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — 在产品页面隐藏产品标题
颜色
Background (
background_color) — 区块背景颜色Text (
text_color) — 文字颜色
高级自定义
Breadcrumb divider symbol (
trail_divider_style) — 选择分隔符:右箭头、双箭头、斜杠、竖线、项目符号、尖括号、破折号
项目标签
配置面包屑导航中显示的标签(使用您的店面语言)。
Home display type (
home_display_type) — 文字 / 主页图标(经典) / 主页图标(轮廓)Home page (
label_home) — 主页项目标签List collection page (
label_list_collections) — 集合列表页面标签Catalog page (
label_catalog) — 目录项目标签(使用---隐藏;详见设置说明)Custom Catalog link (
custom_catalog_link) — 可选自定义 URL(默认为/collections/all)
Subcategories block (Text below)
以网格或轮播形式显示子集合。此布局在图片下方显示集合标题(可选显示产品数量)。
通用
Block max width (
page_width) — 最大容器宽度(像素)Enable carousel on desktop (
enable_desktop_slider) — 在桌面端启用滑块功能Autoplay (
autoplay_mode) — 自动滚动/自动滑动模式(见下文)Enable the navigation (
slider_enable_navigation) — 显示导航箭头/点Vertical spacing (
vertical_spacing) — 标题与滑块/网格间距Heading (
title) — 区块标题文字Image ratio (
image_ratio) — 适应图片 / 正方形 / 纵向 / 横向 / 圆形Image fit type (
image_fit_type) — 覆盖 / 包含Image border radius (
image_border_radius) — 图片比例为圆形时不适用Number of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — 分类卡片间距Content layout (
content_layout) — 普通 / 重叠 / 文字下方 / 文字下方带边框Text alignment (
text_alignment) — 左对齐/居中/右对齐Show the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — 标题限制为 5 个单词Reverse layout (Text on top, Image below) (
reverse_image_position)
自动播放(自动滚动/自动滑动)
仅当启用桌面端轮播时生效。
Off (
none)Slow – 50px/s (
slow_scroll_50) — 连续自动滚动Fast – 100px/s (
slow_scroll_100) — 连续自动滚动Every 3 seconds (1 item) (
slide_3s) — 每 3 秒滑动一项Every 3 seconds (All visible items) (
slide_3s_page) — 每 3 秒滑动一页
颜色
文本 (
colors_text)背景 (
colors_background) — 仅在内容布局为重叠时使用
移动布局
平板上的列数 (
columns_tablet) — 2/3/4手机上的列数 (
columns_mobile) — 1/2启用平板和手机上的滑动 (
swipe_on_mobile)
集合标题字体大小
产品数量的字体大小会根据集合标题字体大小自动调整。
桌面 (
font_size_desktop)平板 (
font_size_tablet)手机 (
font_size_mobile)
子类别区块(文字覆盖)
以网格或轮播的形式显示子集合,标题(可选产品数量)显示在图片上方。
常规
区块最大宽度 (
page_width) — 最大容器宽度(像素)启用桌面轮播 (
enable_desktop_slider) — 在桌面上启用滑块功能自动播放 (
autoplay_mode) — 自动滚动/自动滑动模式(见下文)启用导航 (
slider_enable_navigation) — 显示导航箭头/点垂直间距 (
vertical_spacing) — 标题与滑块/网格之间的间距标题 (
title) — 区块标题文本图片比例 (
image_ratio) — 适应图片 / 正方形 / 纵向 / 横向 / 圆形图片填充类型 (
image_fit_type) — 覆盖 / 包含图片边框半径 (
image_border_radius) — 图片比例为圆形时不适用桌面上的列数 (
columns_desktop)内容位置 (
content_position) — 顶部 / 居中 / 底部文本对齐 (
text_alignment) — 左 / 居中 / 右显示产品数量 (
show_product_count)启用大写文本 (
enable_uppercase_text)内容布局方向 (
content_layout_direction) — 单行(行)/ 堆叠(列)
自动播放(自动滚动 / 自动滑动)
仅当启用桌面轮播时生效。
关闭 (
none)慢速 – 50px/s (
slow_scroll_50) — 连续自动滚动快速 – 100px/s (
slow_scroll_100) — 连续自动滚动每3秒(1项) (
slide_3s) — 每次滑动一项每3秒(所有项) (
slide_3s_page) — 每次滑动一页
移动布局
平板上的列数 (
columns_tablet) — 2/3/4手机上的列数 (
columns_mobile) — 1/2启用平板和手机上的滑动 (
swipe_on_mobile)
集合标题字体大小
产品数量的字体大小会根据集合标题字体大小自动调整。
桌面 (
font_size_desktop)平板 (
font_size_tablet)手机 (
font_size_mobile)
标题文字颜色
文字颜色 (
colors_text)覆盖文字颜色 (
colors_overlay) — 为了可读性的覆盖颜色
应用嵌入
推荐使用应用嵌入,因为它加载区块使用的全局 CSS/JS(例如:子类别的自动播放脚本、可选的 i18n 辅助工具和应用中配置的自定义 CSS)。
在主题编辑器 → 应用嵌入中启用
保持启用以确保所有区块正常工作
向您的主题添加区块
进入您的 Shopify 管理后台
导航至在线商店 › 主题
点击您正在使用主题的“自定义”
在您希望显示的位置添加应用区块
自定义设置并保存
区块设置
上述所有设置均在选择区块时于 Shopify Theme Editor 中配置。大多数设置支持响应式(桌面/平板/手机)。
最佳实践
在产品和集合模板中添加 Breadcrumbs
在集合页面使用子类别区块
使区块样式与您的主题匹配
在移动设备上测试
发布前预览