首页设计

Shopper App 提供一系列通用的应用构建模板，结合灵活的操作界面，使应用构建过程简单高效。在更新主题后，可以实时同步到应用端。在本文中，了解如何利用多样化的组件创建一个令人惊叹的首页。

 

---

 

进入首页编辑器

要进入应用首页进行设计和自定义，请按照以下步骤操作：

1. 在 SHOPLINE 后台，前往【渠道】 >【Shopper App】>【App 设计】，然后点击【设计】。

   

2. 在顶部下拉菜单中，选择【首页】。

   

3. 使用左侧侧边栏菜单为首页的各个版块进行设置。各功能的详细介绍请参见以下章节。

   

 

---

 

顶部应用栏

【顶部应用栏】模块允许你自定义首页页眉中显示的组件。这些设置会应用到应用中的所有页面。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。 

 

各区域可用组件

• 自定义横幅 Banner：支持上传 png/jpg/jpeg/gif 的图，图片宽度不少于 1125 px，并支持设置发布计划。
• 自定义视频 Banner：支持上传本地视频，视频文件不能大于 10 MB。如果您没有上传封面图片，系统将自动生成一个封面图片。您可以选择所需的长宽比，设置跳转页面，并根据您的需求设置发布计划。
• 倒计时组件：倒计时可以在您进行限时促销时制造紧迫感。您可以设置标题、结束时间，并选择倒计时颜色。如果需要，在倒计时结束后打开“倒计时后显示图片”开关，并上传一张图片，在倒计时结束时显示该图片。
• 带自定热区的图片：可在图片上自定不同的热区，链接至不同的商品详情页或分类页等。
  • 图片：支持上传 png/jpg/jpeg/gif 的图片，并设置图片边距。
  • 热区设置：点击热区设置，弹出热区设置弹窗，依次添加热区，添加热区时可自行调整热区大小和跳转目标页面。如果热区之间有重叠，会以数值最高的热区为准。

商品组件

您可以通过以下方式展示您的产品。

• 商品列表 A 和商品列表 B：这两个组件以网格布局展示商品：【商品列表 A】每行显示 2 个商品，【商品列表 B】每行显示 3 个商品。请选择最适合你展示需求的模板。对于两种列表类型，你都可以配置标题，选择商品分类，设置排序方式，设定最多显示商品数量，并启用商品排行榜角标。你还可以配置按钮，并自定义按钮文本和跳转链接，同时可以设置组件的生效时间。
• 多分类商品列表 A 和多分类商品列表 B：商品列表 A 为每行 2 列的展示方式，商品列表 B 为每行 3 列的展示方式。
  • 组件展示设置：对于这两种多分类列表，你都可以配置标题，设定最多显示商品数量，并启用商品排行榜角标。你还可以显示按钮，并自定义按钮文本和跳转链接，同时可以设置组件的生效时间。
  • 分类设置：您可以将最多 5 个分类添加为子组件，通过拖放重新排序，单击每个子组件可以选择分类，修改分类标题，并确定如何对产品进行排序。

• 商品轮播：选择一个商品分类来展示你想在轮播中显示的商品。你可以为组件设置标题，选择商品排序方式，启用商品排行榜角标，并自定义商品卡片样式（标准或带框）及对齐方式。你还可以设置组件的生效时间，以及显示按钮，并自定义按钮文本和跳转链接。
• 商品展示橱窗：选择包含您想要展示的商品分类，商品将以拼贴形式展示。您可以为组件设置标题，决定如何对产品进行排序，并安排发布时间。如果需要，还可以显示类似 "查看全部" 的按钮，并设置按钮的文字和跳转链接。
  

  注意：该组件会按照您选择的排序规则取商品列表的前 6 款进行展示，会自动过滤失效商品；中间预览区的顺序标签仅针对您显示，不会显示在 App 端页面上。

• 分类带商品组件：选择一个商品分类来展示你想突出的商品。商品将显示在背景板前，因此该组件非常适合用于突出展示某个分类。你可以选择商品排序方式，启用商品排行榜角标，并根据需要设置发布时间。对于背景板，你可以上传图片，可选地添加标题和副标题，自定义文字颜色，并设置跳转链接。
  

分类组件

您可以通过以下方式展示您的分类。

• 商品分类：您可以选择所需的分类图样式（圆形或方形）、显示列数、标题及其对齐方式，并为整个组件安排发布计划。对于单个分类，点击每个子组件以指定分类，上传图片，并安排发布计划。
• 分类展示橱窗 A和分类展示橱窗 B：分类将以拼贴形式展示。分类展示橱窗 A 支持最多 4 个分类，而分类展示橱窗 B 支持最多 7 个分类。您必须使用完所有坑位，否则将会出现空白占位符。对于整个组件，您可以设置标题、选择所需的对齐方式，并安排发布计划；对于单个分类，点击每个子组件以指定分类并上传图片，通过拖放来调整它们的显示顺序。

  注意：分类展示橱窗中间预览区的序列号仅针对您显示，不会显示在 App 端页面上。

• 分类轮播组件：分类将以轮播形式展示，至少指定 4 个分类。您可以在组件中最多添加 12 个分类。对于整个组件，您可以设置标题、选择所需的对齐方式和背景颜色，并安排发布计划。对于单个分类，点击每个子组件以指定分类、上传图片，并安排发布时间，并通过拖放来调整它们的显示顺序。
• 分类格栅：分类将以网格形式展示，至少指定  1 个分类。您可以在组件中最多添加 4 个分类。对于整个组件，您可以设置标题、选择所需的对齐方式和图片比例，并安排发布计划。对于单个分类，点击每个子组件以指定分类、上传图片，并安排发布时间，并通过拖放来调整它们的显示顺序。

注意：所有的分类组件如果没有对每个分类的图片或标题进行调整，则将从 SHOPLINE 分类中检索。

 

应用组件

• 限时促销：您在限时促销应用中配置的活动将在您的应用中展示。了解更多

 

自定义组件

您可以在 Shopper App 后台创建自定义组件后，将其嵌入至商店应用的首页。点击【+ 添加组件】后，切换至【自定义】标签页，选择已创建的组件进行嵌入，或点击【+ 创建自定义组件】前往组件编辑器新增组件。关于自定义组件的创建详情，请参阅此帮助中心文档。

标记为【开发中】的组件为未发布状态，无法直接应用于正式版本中。但您可以通过 Snaplook 预览组件效果。确认内容无误后，可在代码编辑器中发布该组件，并将其用于正式应用。详细说明请参见《发布上线》部分。

 

---

 

悬浮图标

悬浮图标是一个始终可见的快捷按钮，顾客在滚动页面时依然能够看到它。此设计提升了可用性，使顾客无需跳转页面即可快速访问关键功能。

目前，Shopper App 支持将悬浮图标链接至在线客服或活动页面，帮助商家优化客服流程或推广正在进行的营销活动。

您可在设置面板中配置以下悬浮图标相关选项：

• 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
• 功能类型：选择将图标链接至【活动页面】或【在线客服】：
  • 若选择【活动页面】：请设置跳转的页面链接。
  • 若选择【在线客服】：
    • 请选择要使用的客服服务：Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
    • 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
• 启用时间：您可根据需要设置悬浮图标的发布时间。

 

---

 

悬浮登录

悬浮登录组件固定于底部应用栏上方，组件默认展示状态，可设置隐藏，并可以变价登录提示语和按钮文案。

 

---

 

底部应用栏

【底部应用栏】会显示在应用的所有页面，为客户提供快速访问关键功能和页面的入口。通过此导航，您可以确保 Shop、Collection、Search 和 Inbox 等重要页面始终触手可及。您最多可以显示 6 个默认或自定义组件，从而灵活突出对客户最重要的功能。

默认组件

在编辑器中，点击【底部应用栏】旁的下拉图标即可查看可用组件。您可以对这些组件进行以下操作：

页面	重命名	移动顺序	隐藏
Shop	✓	✗	✗
Collections	✓	✓	✓
Search	✓	✓	✓
Bag	✓	✓	✓
Wishlist	✓	✓	✓
My account	✓	✓	✓
Inbox	✓	✓	✓

自定义组件

如需为首页的【底部应用栏】创建自定义组件，请点击最左侧菜单栏的【调色盘图标】前往【品牌套件】>【Icon】，然后点击【+ 添加自定义图标】进行创建和设置。完成后，返回首页的【底部应用栏】部分将其添加到导航栏中。

如需了解创建和自定义图标的详细步骤，请参见本文的《自定义 Icon 设置》部分。

 

---

 

发布上线

完成编辑并确认预览无误后，您可以根据实际需求，点击右上角的【保存】或【发布】按钮：

• 【保存】：用于暂存当前编辑内容，便于后续继续修改，不影响现有商店应用的展示。

• 【发布】 >【发布到 Snaplook】：将组件发布至 Snaplook，以预览并测试实际效果。适用于正式发布前的功能验证与样式检查。详见相关帮助中心文档。

• 【发布】 >【发布到正式 App】：将当前设置发布至正式商店应用，使更改内容对终端用户生效。