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

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

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

进入全局设置

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

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

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

自定义颜色与字体

组件颜色

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

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

设置商品卡片背景色

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

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

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

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

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

字体

【字体】section 控制整个店铺所使用的字体。您可以分别为标题文字和正文文字配置以下选项：

• 字体系列：从可用字体库中选择字体。
• 字体大小：设置文字元素的基础字号。
• 行高：调整文字行间距以提升可读性。

配置商品卡片外观

【商品卡片】section 控制店铺中各商品卡片的外观与交互方式，涵盖分类页、搜索结果页及推荐区块等位置。该区域包含以下配置分类：

商品信息

本区域控制商品卡片上显示的内容及顾客的交互方式。以下设置位于全局设置中的【商品卡片】>【商品信息】。

• 快速加入购物车图标显示：切换商品卡片上快速加购图标的显示状态。
• 加购流程：决定顾客点击加购图标后的操作方式，可选项包括：
  • 快速加入购物车：直接将商品加入购物车。
  • 弹窗选择规格：弹出弹窗，供顾客选择 SKU 后加购。

  • 弹窗商品卡片遮罩：显示商品卡片遮罩层，供顾客选择 SKU。

    注意： 选择弹窗商品卡片遮罩时，请确保每张商品卡片已启用遮罩触发显示功能。若未启用，所选 SKU 将直接加入购物车，不会显示遮罩层。若遮罩层和商品信息区域均设有规格选择器，以遮罩层中选择的 SKU 为准。选择弹窗选择规格时，顾客在弹窗中选择的 SKU 将被加入购物车。

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

商品卡片折扣标签

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

• 促销标签圆角：以像素为单位设置标签的圆角弧度。
• 标签样式：控制折扣标签传递的信息内容，可选项包括：
  • 默认样式：显示通用「促销」标签。
  • 节省金额：显示具体优惠金额。
  • 折扣百分比：显示折扣百分比。
• 字体样式：设置标签文字的字体，可选范围为 Body 至 Body 6。
• 背景透明度：以百分比调整标签背景的透明程度。

商品卡片价格展示样式

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

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

样式、边框与阴影

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

这些区域控制商品卡片容器本身的视觉呈现，包括卡片布局与图片比例（样式）、边框粗细与颜色（边框）以及投影深度（阴影）。

配置其他店铺元素

布局

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

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

按钮

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

这些设置统一定义店铺内所有按钮的视觉样式，包括圆角弧度、尺寸及边框处理，确保各页面的行动号召按钮风格一致。

规格选择器

以下设置位于全局设置中的【规格选择器】。

这些设置控制店铺内商品规格选项选择器（如尺码或颜色按钮）的视觉样式，包括边框与阴影效果。

输入框

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

这些设置控制店铺内所有文字输入框的外观，例如搜索框和表单输入框，包括边框样式与圆角弧度。

下拉菜单与弹窗

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

这些设置控制店铺内下拉菜单与弹窗的视觉样式，包括边框与阴影细节。

抽屉

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

这些设置控制店铺内滑入式抽屉面板的视觉样式，例如购物车抽屉，包括边框与阴影细节。

购物车

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

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

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

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

媒体

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

这些设置控制店铺内图片及媒体元素的视觉样式，包括边框与阴影处理。

内容容器

以下设置位于全局设置中的【内容容器】。

这些设置控制店铺各区块中内容包裹元素的视觉样式，包括边框与阴影处理。

博客卡片

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

这些设置控制博客列表页上博文预览卡片的外观，包括布局样式、边框与阴影。

其他卡片

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

这些设置控制非商品卡片及博客卡片以外的卡片元素的视觉样式，例如促销内容卡片，包括边框与阴影效果。

社交媒体

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

在此处添加店铺各社交媒体主页的链接，这些链接通常显示于店铺页脚。

网站图标

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

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

自定义 CSS

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

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