使用标准颜色名称配置颜色色板（OS 3.0 主题）

颜色色板让顾客可以透过视觉化的色板选择商品的颜色规格，而不必从文字列表中选择。OS 3.0 主题使用标准颜色名称（即标准化的 CSS 颜色关键字，例如红色、藏青色或珊瑚色，每个关键字都对应一个特定的十六进制颜色代码）来生成这些色板，使商品的颜色规格值自动显示为正确的色板颜色。

本指南将说明标准颜色名称的运作方式、颜色色板在商品列表页与商品详情页的显示效果、如何透过【多款式选择器】组件进行配置，并提供完整的颜色名称与对应十六进制代码对照表。

OS 3.0 主题中【多款式选择器】在线上商店的显示效果

OS 3.0 主题使用标准颜色名称来驱动【多款式选择器】组件，让顾客可以选择颜色规格，并直接在商品卡片上将商品加入购物车。

OS 3.0 主题使用标准颜色名称来驱动【多款式选择器】组件，将商品的颜色规格以色板形式显示。顾客可在【商品列表页】与【商品详情页】上看到这些色板，也可以添加至其他与商品相关的组件中（例如【单个商品】组件）。

本文聚焦于商品列表页与商品详情页，因为这是顾客最常接触到颜色色板的位置以下小节将分别说明两者的顾客端呈现效果。

商品列表页

• 顾客选择颜色后，商品图片会更新为该颜色对应的图片。
  
• 在【商品列表页】的商品卡片上点击颜色色板后，会跳转至该颜色规格对应的【商品详情页】。

商品详情页

• 当顾客从【商品列表页】跳转过来时，其点击的颜色已预先被选中。
• 在【商品详情页】点击其他颜色色板，效果相同页面网址会更新为该颜色对应的 SKU，并选中该色板。
  
• 顾客选择尺寸后，须点击【加入购物车】才能将商品加入购物车仅选择颜色及尺寸并不会自动加入购物车。

在商品列表页配置颜色色板

【多款式选择器】是一个商品卡片组件，可将商品的颜色规格以色板形式显示；顾客选择颜色及（如适用）其他规格属性（例如尺寸）后，即可将商品加入购物车。如需在商品列表页添加并配置【多款式选择器】，请按以下步骤操作：

1. 在主题编辑器中，从页面选择器选择【商品列表页】。在左侧图层菜单中，依序进入【商品列表】>【商品卡片】>【商品信息区域】，然后添加【多款式选择器】组件。
2. 添加该组件后，颜色规格会以色板形式显示在商品卡片上，当顾客将鼠标悬停在商品图片上时，会显示其他规格属性（例如尺寸）。
   
3. 为【多款式选择器】组件配置以下设置：
   
   • 色板样式：方形、圆形或圆角矩形。
   • 色板最大显示数量：拖动滑杆或直接输入数字，设置显示的颜色色板数量，可设置范围为 1 至 6。
   • 色板显示方式：仅显示一行、左右滑动或平铺显示。
   • 色板显示大小：小、中或大。
   • 电脑端显示规格 / 移动端显示规格：开启后，会在色板旁以文字显示其他规格属性（例如尺寸）。电脑端与移动端可分别独立设置。
   • 规格尺寸：小、中或大，用于设置启用显示规格后所显示的规格文字大小。
4. 点击【保存】以套用您的更改。

在商品详情页配置颜色色板

在商品详情页中，【多款式选择器】是位于【商品信息】下的内建组件与商品列表页不同，无须手动添加。

如需配置：

1. 在主题编辑器中，从页面选择器选择【商品详情页】。在左侧图层菜单中，依序进入【商品】>【商品版块】>【商品信息】，然后选择【多款式选择器】。
   
2. 开启【启用颜色调色板】。启用后，颜色调色板预设会以平铺检视显示。为【多款式选择器】组件配置以下设置：
   

• 调色板样式：设置颜色色板的形状（例如方形）。
• 标题字体样式：设置规格选项标题所使用的字体样式（例如 Body 3）。
• 缺货规格样式：设置缺货规格的显示方式（例如半宽斜线（灰阶显示））。此设置仅适用于文字/图片按钮 颜色色板按钮不支持此设置。
• 已选规格样式：设置已选规格的醒目提示方式（例如边框强调）。
• 显示大小：设置颜色色板的显示大小（例如中）。
• 电脑端版面：设置电脑端的版面配置方向（例如水平版面）。
• 移动端版面：设置移动端的版面配置方向（例如垂直版面）。

3. 点击【保存】以套用您的更改。 

OS 3.0 主题的标准颜色名称对照表

下表列出了 OS 3.0 主题支持的所有标准颜色名称及其对应的十六进制颜色代码。这些名称遵循标准 CSS 颜色模块关键字列表，因此相同的名称和数值在您店铺前台的各个位置均保持一致。

标准颜色

扩展颜色