一、通过主题编辑器自定义产品标题和价格
Boundless主题作为Shopify官方免费主题之一，提供了较为完善的可视化编辑功能。对于不想碰代码的卖家来说，主题编辑器是最简单直接的入口。首先登录Shopify后台，进入在线商店，点击主题，在当前使用的Boundless主题上点击自定义按钮，即可进入主题编辑器界面。
进入编辑器后，在顶部下拉菜单中选择产品页面，系统会加载默认的产品页模板。此时在左侧的面板中可以看到产品标题、价格、产品描述等模块。点击产品标题模块，右侧会展开对应的设置项，通常包括字号大小、对齐方式、文字颜色等选项。Boundless主题强调极简大图风格，默认标题字号偏大，如果你觉得过于突兀，可以适当调小字号，让页面整体更协调。
价格部分的设置同样在产品页模块中。Boundless允许你控制价格是否显示、显示位置以及是否突出显示划线价。比如在做促销活动时，开启比较价格后，原价会以删除线形式展示，促销价则以醒目颜色呈现，能有效提升点击和转化。需要注意的是，价格颜色通常跟随主题的全局颜色设置，如果你只想改价格颜色而不影响其他文字，就需要借助代码方式，下文会详细说明。
二、修改代码实现更精细的样式控制
当主题编辑器提供的选项无法满足需求时，就需要直接编辑主题代码。在Shopify后台的主题页面，点击Boundless主题右侧的操作按钮，选择编辑代码，进入代码编辑界面。这里建议先复制一份主题备份，避免误操作后无法恢复。
产品标题的样式主要由主题的CSS文件控制。在代码编辑器左侧的Assets目录下找到主题的样式文件，通常是theme.scss.liquid或类似名称。搜索与产品标题相关的类名，Boundless中产品标题一般使用product-single__title这类类名。找到后，你可以在文件末尾追加自己的样式规则，例如修改字体大小、字重、颜色和间距。示例写法如下：
.product-single__title { font-size: 26px; color: #333333; font-weight: 600; letter-spacing: 0.5px; }
价格的样式修改方式类似。Boundless主题中价格通常使用product-single__price相关的类名，原价（比较价格）则对应price-old之类的类。你可以单独为促销价设置醒目的红色，为原价设置灰色并添加删除线，让促销信息一目了然。示例如下：
.product-single__price { color: #d0021b; font-size: 22px; font-weight: 700; }
.price-old { color: #999999; text-decoration: line-through; font-size: 16px; }
修改完成后点击保存，刷新店铺前台页面即可看到效果。如果样式没有生效，多半是被主题原有规则覆盖了，可以在属性后面加上!important提升优先级，或者检查选择器是否写对了层级。
三、调整标题和价格的内容显示逻辑
除了样式，有些卖家还想控制标题和价格的内容本身。比如让标题换行显示、限制标题长度，或者针对特定市场隐藏价格。这类需求需要在模板文件中操作。Boundless主题的产品页模板位于Sections目录下的product-template.liquid文件中。
打开该文件后，可以搜索title和price相关的Liquid标签。标题输出一般类似{{ product.title }}，如果你想在标题后追加自定义文字，比如附上品牌名或卖点短语，可以直接在该标签后面拼接文本。如果想截断过长的标题，可以使用Liquid的truncate过滤器，写成{{ product.title | truncate: 40 }}，这样超过40个字符的标题会自动截断并显示省略号。
价格部分如果需要隐藏，可以把输出价格的代码用Liquid注释包裹起来，也就是用comment标签包住对应代码块。还有一种常见需求是仅对登录会员显示价格，这需要结合customer对象的判断条件，写成unless customer为空才输出价格，否则显示请登录查看价格之类的提示文字。这样既能做B2B批发模式，也能营造会员专属感。
四、修改时的注意事项和常见问题
第一，修改代码前务必备份主题。在主题页面点击操作下拉菜单，选择复制，得到一份备份副本。一旦代码改坏，可以直接回退，不影响线上店铺运营。
第二，注意移动端适配。Boundless是移动优先设计的主题，你在电脑端改好的样式，在手机上可能显示效果完全不同。建议同时用小字号规则覆盖移动端，或者使用媒体查询针对不同屏幕宽度设置不同字号，确保手机用户也能获得良好的阅读体验。
第三，主题更新会覆盖自定义修改。Boundless属于官方主题，Shopify会不定期推送更新。如果你直接在原主题上改代码，更新后修改内容可能丢失。稳妥的做法是新建一个副本主题进行修改，或者每次更新后重新检查并补回自定义代码。
第四，善用浏览器开发者工具调试。在正式写入代码前，可以先用Chrome等浏览器的检查功能，在页面上找到标题和价格对应的类名，实时预览样式效果，满意后再把规则写进主题文件，能大大提高效率，减少反复保存刷新的次数。
Shopify Boundless主题产品标题自定义价格显示设置 修改时间：2026-09-09 19:45:34