在主题编辑器中:自定义产品页面添加分区商品页面

商品页面

产品页面的核心:产品图片,以及旁边的购买面板。面板的每个部分都是一个块,可以移动、删除或添加。

在每个产品的“Size guide”字段中为它指定专属尺码指南。没有专属指南的产品会显示在“选项选择器”块中设置的页面。

设置

布局

商品区域宽度
滑块,1000 到 2000 px默认: 1600 px当下方“内容宽度”为“标准”时使用。
电脑上的布局
选项: 对半、舞台默认: 对半对半:方形图片,缩略图在下方,详情在旁边;整个页面一起滚动。舞台:高图片,缩略图在图内,详情卡片叠在上面。
滚动时让图片保持在原处
开启或关闭默认: 开启在大屏幕上,当详情面板比图片高时,滚动面板期间图片保持可见。
手机和平板上的面板对齐方式
选项: 居中、靠侧边默认: 居中居中:标题、价格、选项和数量位于中间。描述和可折叠行因文字较长,仍靠侧边对齐。在桌面端,面板始终靠侧边对齐,位于照片旁边。

照片

照片适配方式
选项: 填满边框、显示完整照片默认: 填满边框“填满边框”会将照片裁切为方形。“显示完整照片”则从不裁切。
显示缩略图
开启或关闭默认: 开启在桌面端和平板上:图片旁边的一列。在手机上:见下一项设置。
手机上也显示缩略图
开启或关闭默认: 开启主图下方的一排缩略图,点按即可选择。
显示箭头
开启或关闭默认: 开启
从最后一张照片继续回到第一张
开启或关闭默认: 开启箭头在末尾不会停止。
显示放大按钮
开启或关闭默认: 开启
自动播放视频
开启或关闭默认: 关闭图库视频滚动到视野内时,会静音循环播放。
在照片上显示徽章
开启或关闭默认: 开启售罄、商品自己的文字或促销。

底部购买栏

显示底部购买栏
开启或关闭默认: 开启当主按钮滚出屏幕时,屏幕底部的边框会变宽,并一直显示商品、当前选择、价格和“加入购物车”,直到页面底部。颜色为边框颜色。在手机上向上滚动时,它会与悬浮菜单互换。
手机上浮动卡片的形状
选项: 浮动卡片、从菜单后方升起、框架升起默认: 浮动卡片浮动卡片:像在电脑上一样,悬浮在底部框架上方一点,底部菜单让出位置。升起:卡片从底部菜单后方升起,菜单保留。框架:框架以全宽升起,菜单让出位置。没有底部菜单时,“升起”变为框架。在电脑上始终是浮动卡片。
浮动卡片颜色
颜色留空:网站的表面,与搜索面板相同。深色上文字会变浅。
浮动卡片边框颜色
颜色浮动卡片周围的边框。留空:与文字同色的细线。
栏中的商品小图
开启或关闭默认: 开启在栏的开头、行内显示一张小图。

页面背景

背景样式
选项: 网站背景、纯色、灯光舞台默认: 网站背景网站背景:页面与网站其他部分一致。纯色:下方的颜色。灯光舞台:由所选颜色构成的舞台,图片和详情后方有柔和光线。深色时文字、线条和按钮会自动变亮。最后两个选项会替代分区的自定义颜色。
配色方案
配色方案舞台的背景和强调色取自此方案。下方选择的颜色优先。
背景颜色
颜色使用灯光舞台时:舞台的色调。默认是全站舞台使用的暖炭灰色。
光线颜色
颜色图片后方和详情后方的柔和光线。留空:白色。
每个分区共有的设置窗格、滚动、间距、颜色、文字样式

窗口、滚动、间距和颜色设置在每个分区中都以相同方式工作。了解它们如何工作。

窗格

拼接
选项: 独立窗格、与上方窗格拼接、与下方窗格拼接、上下都拼接默认: 独立窗格
图片圆角
选项: 圆角、直角默认: 圆角

滚动

滚动时被下一个区块覆盖
开启或关闭默认: 关闭向下滚动时,此区块停留在页眉下方原位,下一个区块从其上方升起覆盖。向回滚动则相反。在编辑器中、对要求减少动态效果的访客以及屏幕很矮时关闭。

间距

为此分区自定义间距
开启或关闭默认: 关闭关闭:使用主题设置中“布局”下的分区间距。开启:在此分区上方和下方使用此处的值。在移动端,大多数分区使用这些值的 65%。
上方间距
滑块,0 到 160 px默认: 12 px
下方间距
滑块,0 到 160 px默认: 32 px
大屏幕上方额外间距
滑块,0 到 96 px默认: 16 px从 990px 屏幕宽度起,加在上方间距之上。
大屏幕下方额外间距
滑块,0 到 96 px默认: 24 px从 990px 屏幕宽度起,加在上方间距之上。
内容宽度
选项: 窄、标准、宽、全宽默认: 标准

颜色

为此区块使用自定义颜色
开启或关闭默认: 关闭否则该区块使用主题颜色。
背景
颜色默认: #F1F1EF
文字
颜色留空:自动。深色背景上用浅色,浅色背景上用深色。

文字样式

为此区块自定义文字样式
开启或关闭默认: 关闭否则该区块使用主题样式。Shopify 字体不包含希伯来文,因此您可以在适用于希伯来文的样式中选择。
标题样式
选项: 主题默认、细体、粗体、衬线体默认: 主题默认
标题大小
滑块,70 到 160 %默认: 100 %
标题颜色
颜色留空:自动,使用区块颜色(深色背景上为浅色)。
文字样式
选项: 主题默认、细体、粗体、衬线体默认: 主题默认
文字大小
滑块,70 到 160 %默认: 100 %
文字颜色
颜色留空:自动,使用区块颜色(深色背景上为浅色)。

块

块是分区里的组成部分。在编辑器中可以添加、删除块,并通过拖动调整顺序。

应用块

已安装的应用可以在这里添加自己的块,例如应用提供的评价或尺码表。

这一部分没有自己的设置。

标题

常规

在标题上方显示合集名称
开启或关闭默认: 开启
强调“ | ”之后的部分
开启或关闭默认: 开启如果商品名称包含“ | ”,其后的部分将以更粗的字重显示。
显示供应商
开启或关闭默认: 关闭
价格

常规

显示折扣百分比
开启或关闭默认: 关闭折扣已显示在照片上。开启后,价格旁边也会显示。
文字

常规

文字
文本标题下方的简短描述。可以与商品字段关联。
选项选择器

常规

样式
选项: 按钮、下拉列表默认: 按钮
颜色
选项: 颜色圆点、下拉列表默认: 颜色圆点仅用于颜色选项。其他选项按上方的样式显示。
尺码指南页面
页面有自己的“尺码指南”字段(custom.size_guide)的产品会显示该页面。否则显示此页面;若为空,则显示主题设置中的页面。
数量

常规

位置
选项: “立即购买”旁边、独立一行默认: “立即购买”旁边“立即购买”旁边:数量位于第一排按钮的开头,“加入购物车”在下方占据整行。独立一行:在按钮上方,带标签。有数量阶梯时,由阶梯取代它。
数量阶梯

常规

标题
文本留空:以顾客的语言显示“数量”。在电脑上仅供屏幕阅读器读取。
1 件的标签
文本留空:以顾客的语言显示件数(“2 件”)。
显示此档位
开启或关闭默认: 开启
件数
滑块,2 到 12默认: 2
折扣
滑块,0 到 60 %默认: 10 %必须与您的自动折扣一致。
标签
文本留空:以顾客的语言显示件数(“2 件”)。
显示此档位
开启或关闭默认: 开启
件数
滑块,2 到 12默认: 3
折扣
滑块,0 到 60 %默认: 18 %必须与您的自动折扣一致。
标签
文本留空:以顾客的语言显示件数(“2 件”)。
突出显示一个档位
选项: 无、第二档、第三档默认: 无
突出显示文字
文本留空:突出显示的阶梯的折扣,例如“优惠 18%”。

购买更多可享更优价格。折扣仅在此处显示:请在 Shopify 后台创建相应的自动折扣,才会真正生效。

每个分区共有的设置颜色

颜色

行背景
颜色留空:使用配色方案的颜色。
所选行的边框
颜色
徽章背景
颜色
徽章文字
颜色
购买选项

常规

标题
文本留空:使用默认文字。
显示节省百分比
开启或关闭默认: 开启
显示方案描述
开启或关闭默认: 开启描述来自订阅应用。
显示订阅政策链接
开启或关闭默认: 开启当店铺设有订阅政策时显示(设置、政策)。

一次性购买和订阅选项,适用于通过订阅应用销售的商品。若没有此区块,带订阅的商品会在加入购物车按钮上方显示这些选项。

购买按钮

常规

“立即购买”按钮
开启或关闭默认: 开启只带着此商品直接前往结账,购物车保持不变。
动态结账按钮
选项: 钱包或 Shopify 的“立即购买”、仅钱包、关闭默认: 钱包或 Shopify 的“立即购买”购买按钮下方的 Shopify 按钮。在支付设置中启用了钱包时显示顾客的钱包(Shop Pay、Apple Pay、Google Pay、PayPal)。开启“立即购买”按钮时,Shopify 自己的“立即购买”永远不会显示,因此只有一个。
支付快捷按钮
开启或关闭默认: 开启bit、信用卡以及您添加的其他方式。加入购物车并前往结账。按钮本身在主题设置的“快捷支付按钮”中设置。
显示礼品卡收件人表单
开启或关闭默认: 开启让买家可以直接把礼品卡发送给他人。显示表单时,礼品卡不显示“立即购买”按钮和动态结账按钮,因为 Shopify 只在加入购物车时核对收件人信息。
配送与保修说明行

常规

配送说明
文本位于购买按钮下方、两条细线之间的一行简短文字,在加入购物车之前可见。例如:8–18 个工作日送货上门。如需为每件商品设置不同的文字,请填写商品字段 custom.delivery_note(单行文本;设置、自定义数据、商品):它的优先级高于此处的文字。如果两者都为空,则显示主题设置(商品)中的配送说明行;若该处也为空,则显示遵循免运费规则(主题设置、免运费)的文字。
保修说明
文本默认关闭:留空即不显示此行。如需为每件商品设置不同的文字,请填写商品字段 custom.warranty(单行文本;设置、自定义数据、商品):它的优先级高于此处的文字。仅填写与该商品相符的内容。
信任标识行

常规

最多三条带图标的简短承诺,其下方为支付图标。它最适合的位置就在购买按钮正下方。

第一项

图标
选项: 包裹(配送)、返回箭头(退货)、盾牌(安全支付)、耳麦(客服)、钻石(品质)、隐藏此项默认: 包裹(配送)
文字
文本留空:根据图标显示默认文字。包裹:遵循免运费规则(主题设置、免运费)的配送承诺。返回箭头和盾牌:一段固定的简短文字。耳麦和钻石没有默认文字,因此只有在此处填写文字时才会显示该项。较长的文字会折成两行并保持均衡。

第二项

图标
选项: 包裹(配送)、返回箭头(退货)、盾牌(安全支付)、耳麦(客服)、钻石(品质)、隐藏此项默认: 返回箭头(退货)
文字
文本留空:根据图标显示默认文字。包裹:遵循免运费规则(主题设置、免运费)的配送承诺。返回箭头和盾牌:一段固定的简短文字。耳麦和钻石没有默认文字,因此只有在此处填写文字时才会显示该项。较长的文字会折成两行并保持均衡。

第三项

图标
选项: 包裹(配送)、返回箭头(退货)、盾牌(安全支付)、耳麦(客服)、钻石(品质)、隐藏此项默认: 盾牌(安全支付)
文字
文本留空:根据图标显示默认文字。包裹:遵循免运费规则(主题设置、免运费)的配送承诺。返回箭头和盾牌:一段固定的简短文字。耳麦和钻石没有默认文字,因此只有在此处填写文字时才会显示该项。较长的文字会折成两行并保持均衡。

支付图标

显示支付方式图标
开启或关闭默认: 开启
预计送达

常规

工作日,最少
滑块,0 到 30默认: 11
工作日,最多
滑块,0 到 45默认: 18
非工作日
选项: 周五和周六、周六和周日、无,每天都算默认: 周五和周六
主行文字
文本[from] 和 [to] 将替换为日期。留空:“今天下单,将于 [from] 至 [to] 之间送达”
第二行文字
文本留空:天数范围,送货上门。
显示日历图标
开启或关闭默认: 开启

按工作日从今天起计算日期范围。日期在顾客的浏览器中计算,因此始终与访问当天一致。

WhatsApp 咨询

常规

问题
文本留空:使用默认文字。
链接文字
文本留空:使用默认文字。
预设消息
文本[product] 将替换为商品名称。留空:“您好,我想咨询 [product]”
在消息中附上商品链接
开启或关闭默认: 开启

一行文字,点击后会打开带有预设消息的 WhatsApp 聊天。号码来自主题设置中的社交媒体。在添加号码之前,此行会指向店铺的联系页面。

描述

这一部分没有自己的设置。

可折叠行

常规

标题
文本
该行显示的内容
选项: 文字或页面、商品规格、带图标的列表默认: 文字或页面
内容
文本
来自页面的内容
页面显示在上方内容之后。
商品规格字段
文本命名空间和键,例如 custom.specs。字段中每行一项详情,格式为“名称:值”。没有该字段的商品不会显示此行。
行
文本每行一句话。图标会根据词语选择:配送、退货、客服、安全或支付(希伯来文亦可)。其他行显示带对勾的盾牌。
配送和退款政策的链接
开启或关闭默认: 开启
优惠气泡

常规

图标
选项: 闪电、礼物、闪光、计时器、爱心、带对勾的盾牌、无图标默认: 闪电
标题
文本留空:以访客语言显示“特别优惠”。
优惠文字
文本例如“订单满 200 美元减 20 美元”。没有文字时不显示气泡。
商品
多个产品气泡只在此处所选的商品上显示。留空:在使用此模板的所有商品上显示。
每个分区共有的设置颜色

颜色

强调色
颜色标签和边框。 留空:所有标签的颜色(边框颜色)。
标签文字颜色
颜色留空:深色标签上用浅色,浅色标签上用深色。
背景颜色
颜色留空:白色。
文字颜色
颜色
倒计时

常规

优惠文字
文本例如“8 折”。留空:如变体有对比价,则显示其折扣百分比。
短文本
文本显示在优惠文字旁边。留空:以访客语言显示“限时”。
商品
多个产品此栏仅在此处选择的商品上显示。留空:任何商品都不显示。用于有真实结束日期的真实促销。

计时器

结束日期和时间
文本年-月-日 时:分,例如 2026-10-20 18:00,按商店时区。留空或无效:商店中不显示横条,编辑器会显示商店所理解日期的提示。
显示秒数
开启或关闭默认: 开启偏好减少动态效果的访客不会看到秒数,计时器每分钟更新一次。
时间用尽时
选项: 显示优惠已结束的消息、横条消失默认: 横条消失
结束消息
文本留空:以访客的语言显示“此优惠已结束。感谢您的关注。”

背景

背景颜色
颜色留空:店铺的墨色。灯光舞台由此颜色生成。
背景样式
选项: 纯色、灯光舞台默认: 灯光舞台灯光舞台:自上而下的柔和光线,向下逐渐减弱,由所选颜色生成。浅色时顶部变白;深色时成为深色舞台。
光线颜色
颜色来自顶部中央的柔和光线。留空:白色。
文字颜色
颜色留空:自动。深色背景上用浅色,浅色背景上用深色。
自定义 Liquid

常规

自定义 Liquid
代码用于高级自定义和应用代码片段。

这里有内容与编辑器中看到的不一致?告诉我们,我们会修正指南。