店面级别设定｜SHOP Builder

SHOPLINE SHOP Builder 支持编辑店面级别的相关设置！您可以自订义网店各区块的颜色、字体，还可以调整商品列表相关的设置，让您设计网页可以兼顾风格及使用者体验。

本文将介绍：

• 前往「店面级别设定」
• 选择／切换主题
• 调整店面级别设定
• 发布页面

⚠️ 开始前请注意：

•  SHOP Builder 目前仅支持 Ultra Chic、Kingsman 、Varm、Philia  版型使用。
• 使用 SHOP Builder 建立分页后，若切换其他商店版型，该分页仍然可以展示，但无法编辑且可能发生跑版情形，在确认发布分页前请多加留意。

• 店面级别设定的调整会影响整间商店的所有页面，并非特定分页。

  

 一、前往「店面级别设定」

前往「SHOPLINE 后台 > 网店设计 > 网店分页」，点按「进阶分页」按钮。

点按左侧栏的「店面级别设定」按钮。

二、选择／切换主题

左侧栏往下拉可看到目前选择的主题。若想更换主题，请点按「前往设计」按钮。

您将被导回后台的「网店设计 > 设计」页面，在这里可以选择想切换的主题。

切换新主题可能会有以下两种情况：

A. 若新主题支持 SHOP Builder

• SHOP Builder 中，字体、颜色等既有数值维持不变。
• 前台店面套用新主题，既有设置也维持不变。
• 目前支持 SHOP Builder 的主题为 Kingsman、Ultra Chic、Varm、Philia ，未来将陆续开放更多主题支持 SHOP Builder。

B. 若新主题不支持 SHOP Builder

• SHOP Builder中，字体、颜色等既有数值维持不变，但此时无法再进入 SHOP Builder。
• 前台店面套用新主题，各设置回复默认设置。
• 若又切换回原本的主题，您原先于 SHOP Builder 保存的既有设置将清空，回复默认设置。

＊注意：若已经使用 SHOP Builder ，建议您维持使用支持 SHOP Builder 的主题，以免失去已经设置完毕的各项数值。

套用新主题后，请再依照「一、前往「店面级别设定」的步骤回到 SHOP Builder 继续设置。

三、调整店面级别设定

店面级别设定可以调整「色彩」、「文字」、「手机」、「商品」、「其他」共 5 大项。 

1. 色彩

前往「店面级别设定 > 色彩」，您可以针对进阶分页的不同区块自订义适合的颜色。各区块的默认颜色为您原本设置的颜色。

＊注意：选定色彩后须点按左侧栏下方的「储存」按钮，变更才会展示于右侧预览画面。

A. 页面

可以设置页面背景、文字（文字类元件）、超连结的颜色。

B. 公告栏

可以设置上方公告栏的背景、文字颜色。

C. 页首

可以设置页首的背景、文字、图标。

D. 主要按钮

可调整主要按钮、按钮文字的颜色。

E. 立即购买按钮

可以调整商品页面中立即购买按钮、按钮文字的颜色。有关立即购买功能的详细介绍，请参考立即购买功能｜进阶设计设定。

F. 商品促销标签

可以调整商品促销标签的背景、文字颜色。 

G. 页尾

可以调整页尾的背景、文字、图标颜色。

H. 版权声明

可以调整版权声明的背景、文字颜色。

I. 防诈骗提示

可以调整防诈骗提示的背景、文字颜色。

J. 电邮通知

可以调整电邮通知按钮的背景、文字颜色。

＊注意：电邮通知按钮色的套用范围为「SHOPLINE 后台 > 设定 > 自订讯息内容」中，会员及订单相关的电邮通知。

点选「储存」并发布后，顾客收到的电邮通知按钮，将呈现更新后的色彩设定。

2. 文字

前往「店面级别设定 > 文字」，您可以针对文字类元件的文字进行调整，选择字体或调整大小。字体默认为原先您设置的字体。

＊注意：调整文字后须点按左侧栏下方的「储存」按钮，变更才会展示于右侧预览画面。

变更	可选择您欲设置的字体。分为系统字体与其他字体；将滑鼠游标移动至字体上方，可查看支援语系／系统。 系统字体：享有较优异的载入速度，唯不同装置的系统预设字体有所差异。 其他字体：需额外载入使用者装置，可能造成页面展示延迟。
重新设置	可变回系统预设字体。
字体大小	调整字体大／中／小。

A. 标题

调整标题的字体及大小。

B. 内容

调整副标题、内文的字体及大小。

＊注意：

• 暂不支援包含多种语言的标题／内文使用两种以上的字体；若您的标题包含中英文，您仅能选用一种字体。
• 中文字体 M PLUS Rounded 1c、Shippori Mincho 为日文汉字，虽然您可以在输入中文时选择，但可能存在部分无法对应的汉字。使用 M PLUS Rounded 1c 及 Shippori Mincho 时，无法对应的汉字将以预设字体显示。

• 若所选择的字体不支援顾客浏览语系，则顾客将看到该语系的预设字体。以下为常用语系预设字体：

  • 繁体中文：Noto sans TC
  • 简体中文：Noto sans SC
  • 英文／德文／法文／马来文：Noto sans 
  • 泰文：Noto sans TH
  • 越南文：Noto sans VN
  • 日文：Noto sans JP

   

• 各语系支援的字体／系统列表：

  • 系统字体

    字体	支援语系	备注
    Sans	繁体中文、简体中文、英文、泰文、越南文、日文	支援 iOS／macOS／android 系统。
    Serif	繁体中文、简体中文、英文、越南文、日文	支援 iOS／macOS 系统；不支援 android 系统，预设显示 Sans。
    Mono	英文、越南文	支援 iOS／macOS／android 系统。
    Rounded	各系统浏览器支援不同语系	支援 iOS／macOS 系统 Chrome、Safari 浏览器中的英文、日文、部分繁简中，不支援时预设显示 Sans；不支援 android 系统、其他装置与浏览器皆预设显示 Sans。

     

  • 其他字体

3. 手机

前往「店面级别设定 > 手机」，您可调整您的商店目录在手机上呈现的画面。

＊注意：调整完手机相关设置后须点按左侧栏下方的「储存」按钮，变更才会展示于右侧预览画面。

A. 手机目录子目录不展开

开启「手机目录子目录不展开」开关后，在手机版选单中的「网店目录」将不会默认展开子目录；若关闭此开关，手机版选单中的「网店目录」会默认展开所有子目录。

手机版画面如下：

B. 手机隐藏商品分类

开启「手机目录隐藏商品分类」开关后，在手机版选单中的「网店目录」将不会出现商品分类；若关闭此开关，手机版选单中将出现「分类」区块，展示您商店后台所设置的商品分类。

手机版画面如下：

4. 商品

前往「店面级别设定 > 商品」，您可调整您网店商品的相关设置。

＊注意：

• 调整完商品相关设定后须点按左侧栏下方的「储存」按钮，变更才会展示于右侧预览画面。

• 每个设定项目皆有以标签形式注记该开关会影响前台的哪些层面。如子分类不展开会影响商品列表页、手机目录。

  

A. 子分类不展开

您可以调整网店目录／分类的格式。开启「子分类不展开」开关，您网店的商品分类将收合子分类，若关闭此开关，商品分类将自动展开子分类。

B. 自动剪裁商品图

您可选择是否裁切商品图，开启「自动剪裁商品图」开关，系统将自动将所有商品图剪裁为统一大小，若关闭此开关，则图商品图将以原图档比例呈现。

C. 规格选项图片显示样式

＊注意：

• 此功能目前仅支持 Ultra Chic 版型，您只有在套用 Ultra Chic 版型时能使用此功能。
• 若您有开启 layout engine，您需自行更新 liquid，此功能的效果才会在前台生成。

若您有多规格商品，您可以选择商品列表页中的商品规格图的形状，目前有方形、圆形 2 种可供选择。您还可以选择规格图的大小（小、中、大）。

D. 商品列表显示规格选项图片

若您有多规格商品，开启「商品列表显示规格选项图片」开关后，多规格商品下将展示您设定的规格图片。

规格图片可选择您设置的「第一组规格」或「第二组规格」。例如：第一组规格为「颜色」，第二组规格为「尺寸」，选择展示「第一组规格」时，商品下方的规格图片将展示不同颜色的商品。设置商品规格的详细流程，请参阅商品规格与款式｜商品。

E. 商品名称文字对齐

＊注意：

• 此功能目前仅支持 Ultra Chic 版型，您只有在套用 Ultra Chic 版型时能使用此功能。
• 若您有开启 layout engine，您需自行更新 liquid，此功能的效果才会在前台生成。

您可以调整商品列表页中商品名称的对齐格式，您可选择置左、置中、置右。商品名称文字对齐不会影响规格图片的展示。

F. 自订标签样式

＊注意：若您有开启 layout engine，您需自行更新 liquid，此功能的效果才会在前台生成。

您可自订义商品标签的样式，目前共有圆角、方角、箭头 3 种样式可选，若您没有调整，则会依默认样式呈现。有关促销标签的设定说明，请参考商品促销标签。

G. 商品分类总数量

＊注意：

• 此功能目前仅支持 Ultra Chic 版型，您只有在套用 Ultra Chic 版型时能使用此功能。
• 若您有开启 layout engine，您需自行更新 liquid，此功能的效果才会在前台生成。

「商品分类总数量」开关默认关闭，开启后，前台商品分类的名称旁会出现该商品分类拥有的商品总数量。

H. 预设每页显示商品数量

您可以选择商品列表页每页默认展示的商品数量，目前可选择每页 24、48、72 个商品。顾客仍可在前台选择当页要展示的商品数量。

I. 商品页面中的社群分享按钮

此开关默认开启，即隐藏将不会出现社群分享的按钮。若关闭此开关，则顾客可以透过按钮分享商品。

5. 其他

前往「店面级别设定 > 其他」，可设置店面级别的其他设置。

＊注意：调整完其他设置后须点按左侧栏下方的「储存」按钮，变更才会展示于右侧预览画面。

A. 回到页面顶端

开启「回到页面顶端按钮」，在商店前台往下滑后将出现回到页面顶端的按钮，反之关闭则按钮消失。

B. 启用 Cookies 授权提示

开启「启用 Cookies 授权提示」，顾客造访网店时，系统将出现使用 Cookies 的提示，反之关闭则提示消失。有关启用 Cookies 授权提示的详细功能介绍，请参考此篇文章。

四、发布页面

完成店面级别设定后，您可以点按右上方的「预览商店」，查看商店前台的呈现效果。

确认无误后点按「发布」，您自订义的店面级别设定便会套用的您的网店。

延伸阅读

• SHOP Builder 概览｜SHOP Builder
• 页尾设置｜SHOP Builder