Start Strong
Sell Smart
Manage with Ease
Market to Success

在主题编辑器（OS 3.0）中配置全局设置

全局设置是主题编辑器（OS 3.0）中统一管理店铺整体外观的控制面板。在此处所做的更改将同步应用于您在线商店的每一个页面，包括首页、商品页及分类页。

本指南将介绍如何进入全局设置、各设置分类的作用，以及如何使用最新配置选项打造专属店铺风格。

开始之前：确认您使用的工具

本文介绍的是桌面版主题编辑器中的设置（路径：【在线商店】>【设计】）。如需了解 Shopper App 中的全局主题设置，请参阅《主题设置》。

 

 

进入全局设置

如需打开主题编辑器中的全局设置，请按以下步骤操作：

  1. 在 SHOPLINE 管理后台，前往【在线商店】>【设计】。
  2. 找到当前使用的主题，点击【设计】进入主题编辑器。
  3. 在左侧边栏，点击【全局设置图标】（鼠标悬停可查看「全局设置」标签）。

将弹出主题设置面板。在此面板中所做的所有更改将应用于整个店铺的当前主题。
 

 

配置店铺 Logo

以下设置位于全局设置中的【Logo】。

这些设置控制店铺页眉中显示的 Logo。若页眉区块已单独设置 Logo，则页头 section 的设置优先级高于此处配置。您可以配置以下选项：

  • Logo：上传用作店铺 Logo 的图片文件。
  • 电脑端 Logo 宽度：以像素为单位设置 Logo 在桌面端的显示宽度。
  • 手机端 Logo 宽度：以像素为单位设置 Logo 在移动端的显示宽度。

 

 

自定义颜色与字体

组件颜色

【组件颜色】section 用于定义店铺整体的配色方案。您可以从四套预设方案中选择，并根据品牌需求自定义每套方案中的具体颜色。

如需配置配色方案，请打开全局设置并选择【组件颜色】，选择您想应用的方案，然后按需编辑其中的颜色值。

每套配色方案包含以下颜色设置：

  • 商品
    • 价格：设置商品价格的显示颜色。
    • 折扣金额：设置折扣金额的显示颜色。
    • 折扣标签文字：设置折扣标签上文字的颜色。
  • 其他
    • 背景颜色：设置该方案的默认背景颜色。
    • 购物车提示点：设置购物车提示指示点的颜色。
    • 购物车提示文字：设置购物车提示文字的颜色。
    • 图片背景：设置商品图片后方的背景颜色。
    • 磨砂弹窗背景：设置模态弹窗的背景遮罩颜色。
    • 阴影：设置该方案中阴影效果所使用的颜色。

设置商品卡片背景色

您可以为店铺中的商品卡片容器单独设置背景颜色。当页面背景与卡片背景需要明显区分时，此功能可帮助您更精准地掌控商品卡片的整体视觉呈现。

如需配置卡片背景颜色，请按以下步骤操作：

  1. 在主题编辑器中，点击全局设置图标 打开全局设置。
  2. 前往 【颜色】，选择您想编辑的配色方案。
  3. 找到 【卡片背景】 设置，选择您偏好的颜色。
  4. 点击 【保存】 应用更改。

卡片背景颜色的显示优先级如下：

  • 媒体背景颜色：优先级最高，设置后将应用于商品图片区域。
  • 卡片背景颜色：未设置媒体背景颜色时，应用于商品卡片容器。
  • 默认背景：以上两项均未设置时自动应用。

注意： 

  • 卡片背景颜色仅在商品卡片展示样式设置为「卡片」时生效。媒体背景颜色仅作用于卡片内的商品图片区域；未设置媒体背景颜色时，卡片背景颜色将显示在该区域。
  • 适用主题： 本功能适用于 SHOPLINE 开发的所有 OS 3.0 主题。

为精选区块配置配色方案（Bottle 主题）

Bottle 主题中的精选商品和商品推荐 section 支持在 section 层级配置配色方案。您可以将每个 section 的标题、链接文字及背景颜色与主题配色方案关联，从而更灵活地控制这些区块在店铺中的视觉呈现。

如需为精选商品区块配置配色方案，请按以下步骤操作：

  1. 在主题编辑器中，导航至包含【精选商品】section 的页面。
  2. 点击【精选商品】section 打开其设置。
  3. 在【颜色】下，选择您偏好的配色方案，section 的标题、链接文字及背景颜色将同步更新。
  4. 点击【保存】应用更改。

如需为商品推荐区块配置配色方案，请按以下步骤操作：

  1. 在主题编辑器中，导航至包含【商品推荐】section 的页面。
  2. 点击【商品推荐】section 打开其设置。
  3. 在【颜色】下，选择您偏好的配色方案，区块的标题及背景颜色将同步更新。
  4. 点击【保存】应用更改。

配色方案的显示优先级如下：

  • 模块级配色方案：优先级最高，设置后将应用于该模块的内容区域。
  • 区块级配色方案：应用于 section 整体标题及模块以外的背景区域。

例如，若某个模块设置为白色背景，而所在区块设置为浅灰色背景，则该模块的内容区域显示为白色，周围区块区域保持浅灰色。

注意： 

  • 商品推荐 section 的布局设置已同步调整。现有布局选项已归入 section 设置中的【布局】下拉菜单，使配置面板更加整洁统一。
  • 适用主题： 本功能仅适用于 Bottle 主题。

 

字体

【字体】section 控制整个店铺所使用的字体及文字样式。设置按文字层级组织，标题部分从 Title 到 Title 6，正文部分从 Body 到 Body 6。每个文字层级均可独立配置以下选项：

  • 字体：从可用字体库中选择字体。
  • 字间距：以百分比设置字母间距。
  • 字体大小：以像素设置文字大小。
  • 行高：设置该文字层级的行高。

  • 全大写：开启后，该层级的所有文字将以大写形式显示。

    注意： Body 层级不包含全大写开关。

 

 

配置商品卡片外观与加购行为

【商品卡片】section 控制店铺中各商品卡片的外观与交互方式，涵盖分类页、搜索结果页及推荐区块等位置。除视觉样式外，【商品卡片】section 还支持配置加购体验，包括顾客选择 SKU 及直接从商品卡片完成加购的交互路径。该区域包含以下配置分类：

商品信息

image.png

本区域控制商品卡片上显示的内容及顾客的交互方式，包括用于快速加购的加购路径配置。以下设置位于全局设置中的【商品卡片】>【商品信息】。

  • 快速加入购物车图标显示：切换商品卡片上快速加购图标的显示状态。
  • 加购路径：控制顾客点击商品卡片上的加购图标后的购买路径。您可以根据商品卡片的特点来优化加购体验，例如，针对多规格商品，可选择在加购前增加 SKU 选择步骤。选项如下：
    image.png
    • 快速加入购物车：直接将商品卡片上默认选中的 SKU 加入购物车。
    • 弹出商品选购弹窗：弹出 SKU 选择弹窗，客选择规格后即可完成加购。

    • 弹窗商品卡片浮层：顾客点击加购图标后，商品卡图片上将显示 SKU 选择浮层，顾客选择规格后再次点击加购图标即可完成加购。

      注意： 使用弹出商品卡浮层前，需先在商品卡片中添加顶层图片浮层，并在其设置中启用弹出商品卡浮层选项。商品成功加购后，浮层将自动消失。将鼠标悬停在商品上也会触发浮层更新。建议将浮层内容（例如：多款式选择器）配置为浮层淡入样式。

      顶层图片浮层支持以下三种交互样式：

      image.png

      • 浮层常显：浮层始终显示，鼠标悬停或点击加购图标均不会改变其显示状态。
      • 浮层淡入：鼠标悬停在商品上或点击加购图标时，浮层显示。
      • 浮层淡出：鼠标悬停在商品上或点击加购图标时，浮层消失。

      此外，顶层图片浮层还提供移动端浮层常显开关。启用后，浮层将在移动端始终保持可见，点击加购图标或商品时不会触发淡入或淡出效果。 若浮层与商品信息 section 均设有规格选择器，以浮层中选择的 SKU 为准。选择弹出商品选购弹窗时，顾客在弹窗中选择的 SKU 将被加入购物车。

  • 在桌面端显示商品标题：切换桌面端商品标题的显示状态。
  • 在移动端显示商品标题：切换移动端商品标题的显示状态。
  • 商品标题展示方式：控制卡片上商品标题的显示长度，可选项包括：
    • 完整展示：无论标题长短，均完整显示。
    • 最多显示 1 行：超出部分截断，仅显示一行。
    • 最多显示 2 行：超出部分截断，最多显示两行。

商品卡片折扣标签

本区域控制商品卡片上促销折扣标签的外观。以下设置位于全局设置中的【商品卡片】 > 【商品卡片折扣标签】。

注意： 这些设置仅影响商品卡片上的促销标签。如需配置商品详情页上的标签显示，请前往【商品详情】>【价格】。
  • 促销标签圆角：以像素为单位设置标签的圆角弧度。
  • 标签样式：控制折扣标签传递的信息内容，可选项包括：
    • 默认样式：显示通用「促销」标签。
    • 节省金额：显示具体优惠金额。
    • 折扣百分比：显示折扣百分比。
  • 字体样式：设置标签文字的字体，可选范围为 Body 至 Body 6。
  • 背景透明度：以百分比调整标签背景的透明程度。

商品卡片价格展示样式

以下设置位于全局设置中的【商品卡片】>【商品卡片价格展示样式】。

  • 价格展示方式：控制当商品存在多个价格区间时，商品卡片上的价格显示方式，可选项包括：
    • 最低价格：仅显示最低价。
    • 价格区间：显示完整价格范围（例如：$10 – $30）。
    • 起始最低价格：以「起」字前缀显示最低价（例如：$10 起）。

注意：

  • 价格展示方式仅在商品存在多个价格且商品卡片上未预先选中 SKU 时生效。若已启用默认选中 SKU 功能，商品卡片将直接显示预选 SKU 的价格，此时价格展示方式设置不会生效。 
  • 适用主题： 本功能适用于 SHOPLINE 开发的所有 OS 3.0 主题，但 Bottle 主题除外。

样式、边框与阴影

以下设置位于全局设置中的【商品卡片】>【样式、边框与阴影】。

  • 样式：设置商品卡片的整体布局，可选项包括：
    • 标准：以平面无边框布局展示商品卡片。
    • 卡片：以带有独立卡片容器的布局展示商品卡片。
  • 图片边距：以像素为单位设置商品图片与卡片边缘之间的间距。
    • 边框：控制商品卡片的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置商品卡片的圆角弧度。
  • 阴影：为商品卡片添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

 

 

配置其他店铺元素

布局

以下设置位于全局设置中的【布局】。

  • 页面宽度：设置店铺内容区域的最大宽度。
  • 组件垂直间距：控制页面各区块与组件之间的垂直间距。
  • 网格 — 水平间距：设置网格布局中各元素之间的水平间距，例如商品卡片网格。
  • 网格 — 垂直间距：设置网格布局中各行之间的垂直间距。

按钮

以下设置位于全局设置中的【按钮】。

这些设置统一定义店铺内所有按钮的视觉样式，确保各页面的行动号召按钮（CTA）风格一致。您可以配置以下选项：

  • 边框：控制按钮的视觉外框。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置按钮的圆角弧度，数值越大圆角越明显。
  • 阴影：为按钮添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

多款式选择器

以下设置位于全局设置中的【多款式选择器】。

这些设置控制店铺内商品规格选项选择器（如尺码或颜色按钮）的视觉样式。您可以配置以下选项：

  • 边框：控制规格选择器按钮的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置圆角弧度。
  • 阴影：为规格选择器按钮添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

输入框

以下设置位于全局设置中的【输入框】。

这些设置控制店铺内所有文字输入框的外观，例如搜索框和表单输入框。您可以配置以下选项：

  • 边框：控制输入框的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置输入框的圆角弧度。
  • 阴影：为输入框添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

下拉菜单与弹窗

以下设置位于全局设置中的【下拉菜单与弹窗】。

这些设置控制店铺内下拉菜单与弹窗的视觉样式。您可以配置以下选项：

  • 边框：控制下拉菜单和弹窗的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置圆角弧度。
  • 阴影：为下拉菜单和弹窗添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

购物车

以下设置位于全局设置中的【购物车】。

购物车样式控制顾客的购物车体验呈现方式，可选项包括：

  • 抽屉：以滑入式面板显示购物车，顾客无需离开当前页面。
  • 进入购物车页面：直接跳转至完整购物车页面。
  • 弹窗通知：在商品加入购物车时显示简短通知。

您也可以在本区域配置购物车显示的配色方案。

商品分类卡片

以下设置位于全局设置中的【商品分类卡片】。

这些设置控制店铺内分类预览卡片的外观。您可以配置以下选项：

  • 样式：设置分类卡片的整体布局，可选项包括：
    • 标准：以平面无边框布局展示分类卡片。
    • 卡片：以带有独立卡片容器的布局展示分类卡片。
  • 边框：控制分类卡片的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置分类卡片的圆角弧度。
  • 阴影：为分类卡片添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

博客卡片

以下设置位于全局设置中的【博客卡片】。

这些设置控制博客列表页上博文预览卡片的外观。您可以配置以下选项：

  • 样式：设置博客卡片的整体布局，可选项包括：
    • 标准：以平面无边框布局展示博客卡片。
    • 卡片：以带有独立卡片容器的布局展示博客卡片。
  • 边框：控制博客卡片的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置博客卡片的圆角弧度。
  • 阴影：为博客卡片添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

其他卡片

以下设置位于全局设置中的【其他卡片】。

这些设置控制非商品卡片及博客卡片以外的卡片元素的视觉样式，例如促销内容卡片。您可以配置以下选项：

  • 边框：控制其他卡片元素的外框样式。
    • 粗细：以像素设置边框宽度。
    • 透明度：以百分比调整边框透明度。
    • 圆角：以像素设置圆角弧度。
  • 阴影：为其他卡片元素添加投影效果。
    • 透明度：以百分比设置阴影透明度。
    • 垂直偏移：以像素设置阴影的上下位移。
    • 水平偏移：以像素设置阴影的左右位移。
    • 模糊：以像素控制阴影边缘的柔化程度。

社交媒体

以下设置位于全局设置中的【社交媒体】。

本区域用于关联店铺的社交媒体账号，并配置分享按钮在店铺前台的显示方式。

  • 账号：添加以下平台的店铺主页链接：Facebook、X (Twitter)、Pinterest、Instagram、Snapchat、TikTok、YouTube、Vimeo、Tumblr、WhatsApp、LINE 及 LinkedIn。
  • 自定义社交媒体链接：您最多可新增五个上述列表以外的自定义社交媒体条目。每个条目需填写名称和链接。
  • 分享： 开启后，顾客可直接从店铺前台将商品分享至社交媒体。以下各平台的分享按钮均可单独开启或关闭：
    • 官方图标样式
    • 显示社交媒体名称
    • 分享至 Facebook
    • 发推至 X (Twitter)
    • 钉选至 Pinterest
    • 分享至 LINE
    • 分享至 WhatsApp
    • 分享至 Tumblr

自定义社交媒体图标

为了帮助商家在 Facebook 和 Instagram 等通用图标之外，推广特定平台或地区性平台（如 Discord、Reddit 或 微信），SHOPLINE 现在支持自定义社交媒体展示。这允许您在无需代码开发或第三方应用的情况下，自行上传个性化图标并设置跳转链接。

如何设定

如需为您的商品媒体自定义放大镜设定，请按照以下步骤操作：

  1. 在 SHOPLINE admin 后台，前往【在线商店】 >【 店铺设计】 > 【我的主题】。选择一个 OS 3.0 主题（例如：Fashion）并点击设计以进入主题编辑器。
  2. 在主题编辑器中，前往【主题设置】 > 【社交媒体】。
    image.png
  3. 滚动至底部找到 自定义社交媒体 区域。您将看到五个预设栏位，分别为 自定义社交媒体 1 至 自定义社交媒体 5。选择任一栏位即可开始配置。
    image.png
  4. 为每个项目配置以下设定： 
    • 图标上传：上传您的自定义图片。（在图片成功上传前，图标将显示为灰色）。
    • 链接：输入完整的跳转 URL。
注意：链接字段为必填项。您必须输入有效的 URL 格式（例如：https://...）才能保存更改。
  1. 点击保存以将图标应用到您的 header（页头）或 footer（页脚）。
    image.png

图标规格

为确保最佳显示效果，请遵循以下指南：

  • 支持格式：JPG、SVG 和 PNG。
  • 文件大小：建议不超过 200KB。
  • 建议尺寸：20px x 20px 或 25px x 25px。

功能限制

  • 数量限制：您最多可以添加 5 个自定义社交媒体图标。

主题可用性： 此功能支持除 Bottle 主题外的所有官方 OS 3.0 免费主题；第三方付费主题不支持此功能。

网站图标

以下设置位于全局设置中的【网站图标】。

上传一张小图标，代表您的店铺显示在浏览器标签页和书签中。建议使用正方形图片以获得最佳效果。

自定义 CSS

以下设置位于全局设置中的【自定义 CSS】。

在此处输入的 CSS 代码将应用于在线商店的每一个页面。本区域仅适用于全局样式调整。如需对特定页面进行样式修改，请在该页面的设置中单独添加自定义 CSS。

注意： 如需了解如何编写和应用自定义 CSS，请参阅以下：