设置 Shoprocket 托管商店前端

什么是托管店面？

Shoprocket 托管店面在 我们的所有计划中可用。

托管店面是托管在 Shoprocket 网络上的独立迷你网站。这些设置快速便捷，不需要技术知识。托管店面非常适合尚未拥有自己网站的卖家，或那些希望将店面与主网站分开的卖家（出于选择或技术限制）。

Shoprocket 网络使用全球内容分发网络 (CDN) 来确保快速的加载速度和对正常运行时间的绝对安心。我们的公共状态页面在 这里

Shoprocket 是一个全渠道电商平台，无论用户是在自己的网站、第三方博客、托管店面还是社交媒体渠道购物，都提供无缝的客户体验，所有渠道都绑定到同一个管理销售仪表板。

您可以在此查看演示托管店面： https://demo.shoprocket.io/

1. 访问托管店面页面

在您的仪表板中，单击左侧侧边栏中的 销售渠道，然后选择 >  托管店面.

在这里，您将看到托管店面编辑器，以及一个实时预览面板，以帮助您可视化所做的更改。

2. 初步自定义店面

左侧的 自定义 部分应该已经打开；您将在这里找到：

• 启用托管店面 - 启用/禁用您的托管店面。禁用将完全隐藏您的店面。
• 可访问您店面的链接。
• 子域 字段 - 设置子域名：建议使用您的店面名称，例如 my-Storefront-name.shoprocket.io。

您还可以使用自己的域名，例如 my-Storefront-name.com。请通过在线聊天图标与我们联系以获取设置说明。

3. 更改页面布局

展开下面的 页面布局部分 可以指定要在页面上包含的元素，例如：

• 显示店名 - 显示/隐藏大型店面名称
• 店铺标志 - 显示/隐藏并更改大型店铺标志。
• 网站图标 - 更改网站图标：在浏览器 URL 栏/标签中出现的小图标，更多信息 在这里.
• 显示封面图像 - 显示/隐藏并更改页面顶部的大图像标题。（推荐尺寸为 1200 像素宽 x 300 像素高，格式为 .jpg）。
• 显示描述 - 显示/隐藏并更改覆盖图像下方的店面介绍/关于文本。

• 显示底部文本 - 显示/隐藏并更改显示在店面底部的文本区域，适合条款和运输政策。

4. 配置产品显示选项

确保在 产品/购物车 下拉菜单中选择 产品：

通过展开下面的 选项 部分可以使用以下选项：

• 显示的产品 - 选择显示所有产品或仅显示特定类别的产品。
• 产品大小 - 设置页面上的显示大小（小，中，大）。
• 图像适应 - 定义产品图像是应该裁剪到可用大小，还是缩小（裁剪将使所有图像保持相同的大小，更统一的外观）。
• 按钮样式 - 在“标准”（带文本的矩形按钮）、“最小”的（带图标的圆形按钮）、或“悬停时”（仅在悬停时显示图标的圆形按钮）之间进行选择。

• 默认排序顺序 - 定义产品默认列出时的排序顺序（默认，最新，名称：A-Z，名称：Z-A，价格：低-高，价格：高-低）。
• 每页产品数量 - 指定每页加载多少产品（分页将自动出现或消失）。
• 隐藏缺货产品 - 选择是否完全隐藏缺货的产品，或显示带有“缺货”的消息。

5. 选择要包含的页面功能

确保在 产品/购物车 下拉菜单中选择 产品，展开 包括 部分。

以下功能可以开启或关闭：

产品卡片筛选选项

• 搜索框 - 在您的产品嵌入上方显示“搜索”字段（仅在多产品嵌入中可用）
• 排序框 - 显示排序顺序下拉菜单（仅在多产品嵌入中可用）
• 每页限制框 - 显示每页项目下拉菜单（仅在多产品嵌入中可用）
• 货币框 - 显示货币下拉菜单，供客户以其首选的货币查看价格（货币必须首先在您的店面设置中启用）
• 语言框 - 显示语言下拉菜单，供客户切换语言（地区必须首先在您的设置中设置 在这里）
• 类别框 - 显示类别下拉菜单，允许客户按类别筛选产品（仅在多产品嵌入中可用）
  

产品卡片特性

• 产品名称 - 显示产品名称（在产品的常规选项卡中配置）。
• 产品价格 - 显示产品价格（在产品的常规选项卡中配置）。
• 产品图像 - 显示产品主图像（在产品的媒体选项卡中配置），
• 产品摘要 - 显示产品摘要文本（在产品的常规选项卡中配置）
• 点击图像打开模态窗口 - 点击图像会以弹出模态窗口的形式打开产品详细信息
• 查看产品按钮 - 显示按钮以在弹出模态窗口中打开完整产品详细信息
• 添加到购物车按钮 - 显示按钮以将商品添加到购物车（悬停时选项将出现在上方，要求更高级选项/变体的产品将打开查看产品模态窗口）
• 最小/最大订单数量 - 显示设置在产品中的最低和最高订单数量（在产品的库存选项卡中配置）。

• 免费送货标签 - 如果适用免费送货，则在您的产品上显示“免费送货”标签（在产品的 送货选项卡中配置）。
  
• 新产品标签 - 显示“新”的标签，表示过去 20 天内添加的产品
  
• 数字下载标签 - 在包含可下载文件的产品上显示“数字下载”标签（在产品的 文件选项卡中配置）。
  

6. 配置产品弹出模态窗口

确保在 产品/购物车 下拉菜单中选择 产品，展开 查看产品弹出窗口 部分。

此部分仅适用于启用了至少一个 点击图像打开模态窗口 或 查看产品按钮 的产品。

弹出窗口可以通过打开或关闭以下功能进行配置：

• 产品名称 - 显示产品名称（在产品的常规选项卡中配置）。
• 产品价格 - 显示产品价格（在产品的常规选项卡中配置）。
• 产品图像 - 显示产品主图像（在产品的媒体选项卡中配置）
• 产品摘要 - 显示产品摘要文本（在产品的常规选项卡中配置）
• 产品描述 - 显示产品描述（在产品的常规选项卡中配置）
• 选择数量 - 显示数量选择字段（如果禁用，则每次只能添加 1 个到购物车）
• 图像缩略图 - 显示图像画廊缩略图
• 产品评价 - 显示产品评价
• 产品 SKU - 显示产品库存单位 (SKU)（在产品的库存选项卡中配置）。
• 产品类别 - 显示与产品关联的类别（在产品的类别选项卡中配置）。
• 社交分享图标 - 显示按钮允许一键分享产品到社交媒体渠道
• 相关产品 - 显示相关产品（在产品的相关选项卡中配置）。
• 最小/最大订单数量 - 显示设置在产品中的最低和最高订单数量（在产品的库存选项卡中配置）。

进一步选项

• 图像适应 - 定义产品图像是应该裁剪到可用大小，还是缩小（裁剪将使所有图像保持相同的大小，更统一）。
• 缩略图布局 - 水平地将图像画廊缩略图位置放在图像画廊下方，或垂直放置在左侧。
• 变体样式 - 在标准的“下拉菜单”或“普通”文本菜单之间选择。

7. 配置产品显示样式

确保在 产品/购物车 下拉菜单中选择 产品，展开 样式 部分。

使用“取色器”设置以下内容的颜色：

• 产品标题
• 产品价格
• 产品摘要
• “购买”背景
• “购买”文本
• “查看”背景
• “查看”文本
• 产品背景
• “查看购物车”背景
• “查看购物车”文本

其他弹出选项

• 产品填充 - 在产品卡边缘内添加填充。
• 产品阴影 - 在产品卡外添加阴影效果。
• 圆角 - 在产品卡上添加圆角。

可以添加自定义 CSS，以提供对托管店面样式的更多控制，具体说明在 这里。

8. 配置购物车显示选项

确保在 产品/购物车 下拉菜单中选择 购物车，展开 选项 部分。

以下选项可用：

• 购物车位置 - 选择显示的位置。

• 购物车样式 - 可以是页面顶部的气泡或侧边栏。

9. 配置购物车显示样式

确保在 产品/购物车 下拉菜单中选择 购物车，展开 样式 部分。

使用“取色器”设置以下内容的颜色：

• “购物车”颜色
• “购物车”背景
• “购物车”计数器背景
• “购物车”文本颜色
• “购物车”计数器文本颜色
• 购物车背景
• 购物车文本颜色
• 购物车按钮背景
• 购物车按钮颜色
• 购物车链接文本颜色
• 购物车边框颜色

一旦您对店面的外观感到满意，请按 更新设置 按钮进行保存，分享您的店面链接，开始销售。