首页设计 – SHOPLINE 常见问题

Shopper App 提供一系列通用的应用构建模板，结合灵活的操作界面，使应用构建过程简单高效。在更新主题后，可以实时同步到应用端。

在本文中，了解如何利用多样化的组件创建一个令人惊叹的首页。

顶部应用栏

安装 Shopper App 后，从以下位置访问设计面板：Apps > Shopper App > App Design > Design > Homepage。

顶部导航栏将应用于应用程序中的每个页面。

商店 LOGO 图：点击“顶部应用栏”上传商店 LOGO 图片，建议图片尺寸为 4:1 或 384px * 96px。
设置左/右图标入口：点击左侧图标或右侧图标，选择跳转页面

注意：顶部应用栏不支持多语言的设置，所有语言都展示同一张图。

公告栏

公告栏组件固定在顶部应用栏下方，限定只能增加 1 个组件，且不可删除。公告栏组件支持 4 种展示样式（水平切换/垂直切换/闪烁切换/平铺显示），您可以灵活地设计文字和背景颜色，或是设置发布计划。

公告栏组件可以设置最多 3 条公告内容，单条公告栏内容可以进行删除和隐藏。

分页组件

分页组件位于公告栏组件下方，不可删除及调整顺序。

开启分页：点击分页组件，开启分页，组件默认关闭状态。
编辑分页名称：点击”Section"，编辑分页名称；可点击”添加分页组件“添加分页，最多可添加 10 个分页。
编辑分页页面：选择您需要编辑的分页，并在下方正文部分进行页面编辑。当切换页面时，中间预览区会自动切换预览页面。

正文组件部分

正文部分提供基础组件、商品组件、分类组件、应用等 4 种组件类型：

基础组件

- 轮播：您可以根据自己的喜好设置自动切换间隔、尺寸，并安排发布时间。您可以选择在此处添加图片或视频。
  - 图片：支持上传 png/jpg/jpeg/gif 的图片，链接支持选择跳转到商品分类页、商品详情页、自定义页面、Webpage、静态（不跳转）。
  - 视频：支持填写 Youtube 和 Vimeo 链接。

自定义横幅 Banner：支持上传 png/jpg/jpeg/gif 的图，图片宽度不少于 1125 px，并支持设置发布计划。
自定义视频 Banner：支持上传本地视频，视频文件不能大于 10 MB。如果您没有上传封面图片，系统将自动生成一个封面图片。您可以选择所需的长宽比，设置跳转页面，并根据您的需求设置发布计划。
倒计时组件：倒计时可以在您进行限时促销时制造紧迫感。您可以设置标题、结束时间，并选择倒计时颜色。如果需要，在倒计时结束后打开“倒计时后显示图片”开关，并上传一张图片，在倒计时结束时显示该图片。

商品组件

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

商品列表：选择包含您要展示的商品分类，商品将以网格形式展示。您可以为组件设置标题，决定如何对产品进行排序，并安排发布时间。如果需要，还可以显示类似“查看全部”的按钮，并设置按钮的文字和跳转链接。
商品格栅：您可以为组件设置标题，决定要显示多少产品，并安排发布时间。如果需要，还可以显示类似“查看全部”的按钮，并设置按钮的文字和跳转链接。您可以将最多 5 个分类添加为子组件，通过拖放重新排序，单击每个子组件可以选择分类，修改分类标题，并确定如何对产品进行排序。
商品轮播：选择包含您要展示的商品分类，商品将以轮播形式展示。您可以为组件设置标题，决定如何对产品进行排序，选择产品卡片样式（常规型或框架式）、对齐方式，并安排发布时间。如果需要，还可以显示类似“查看全部”的按钮，并设置按钮的文字和跳转链接。

商品展示橱窗：选择包含您想要展示的商品分类，商品将以拼贴形式展示。您可以为组件设置标题，决定如何对产品进行排序，并安排发布时间。如果需要，还可以显示类似“查看全部”的按钮，并设置按钮的文字和跳转链接。

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

分类带商品组件：选择包含您想要展示的商品分类，商品将显示在背景图前面，此组件适用于展示分类。您可以决定如何对产品进行排序，并根据需要安排发布时间。上传一张图片作为背景图，并可选择为其添加标题和副标题、自定义文本颜色，并设置跳转链接。

分类组件

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

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

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

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

应用

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

底部应用栏

您可在主题设置里设置底部导航栏所需展示的页面，在这里您可以选择显示默认入口或创建自定义入口。

默认入口

在编辑器中，点击底部导航栏旁边的下拉图标以展开可用入口。您可以对入口进行以下更改：

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

自定义入口

点击“添加 Navigation”以添加自定义入口，为其设置标题，选择图标，并设置跳转链接，链接只能指向自定义页面。

隐藏文字显示

您可以选择是否在按钮导航图标上显示文本。例如，打开后，“商店”组件将仅显示其图标，而不显示“商店”。

发布上线

完成编辑并确认预览一切正常后，点击右上角的“应用”按钮将您的设计发布到应用中。如果您想暂时保留发布，可以点击“保存”以保留您的编辑内容。