本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 设计和布局
<a name="storefronts-design-layout"></a>

选择布局类型并自定义店面的设计、品牌和内容分区。

## 布局类型
<a name="layout-types"></a>

创建店面时，您需要选择一种布局类型来决定结构、外观和部署模式。每种布局类型都是为特定的用例设计的。

### 可用的布局类型
<a name="layout-types-available"></a>

在 “**布局样式**” 下，有以下选项可用：

#### 独立版
<a name="layout-types-standalone"></a>

在专用域名或子域名上部署的整版店面。如果您想要一个独立的店面作为自己的网站目的地，请使用此布局。

#### 嵌入
<a name="layout-types-embedded"></a>

一种旨在通过 iframe 集成到现有网页中的店面。这种布局保留了您当前的网站架构，同时为指定版块添加了商务功能。

#### 电子商务
<a name="layout-types-ecommerce"></a>

具有购物式浏览体验的产品网格布局。此布局包括横幅栏和针对大批量目录的优化产品图块。

#### 活动
<a name="layout-types-campaign"></a>

针对需求挖掘和定向营销进行了优化的着陆页布局。此布局包括英雄版块、特色产品亮点、资源栏目和价值主张元素。

### 更改布局类型
<a name="layout-types-changing"></a>

在部署之前或之后，您可以随时更改布局类型。当您更改布局类型时，店面会进行重组以匹配新的布局。产品选择和标签配置将保留。

1. 打开店面并选择 “**设计**” 选项卡。

1. 在 “**布局样式**” 下，选择其他布局选项。

1. 选择**保存**。

### 筛选面板样式
<a name="layout-types-filter-panel"></a>

在 “**选项”** 下，“**滤镜**” 控件提供 “**紧凑型**” 和 “**手风琴**”。**产品尺寸**控件提供**小****号、中号**和**大**号。

### 产品拼贴尺寸
<a name="layout-types-tile-sizes"></a>

您可以在店铺主页上控制产品图块的大小：
+ **小**-紧凑的瓷砖，每排可见更多产品。
+ **中**-平衡图块大小（默认）。
+ **大号**-突出显示更多细节的方块。

### 相关主题
<a name="layout-types-related"></a>
+ 创建店面
+ [颜色和主题定制](#color-and-theme-customization)
+ [广告系列布局](#campaign-layout)
+ [E-Commerce 布局](#ecommerce-layout)

## 广告系列布局
<a name="campaign-layout"></a>

Campaign 布局创建了一个登陆页面风格的店面，针对需求挖掘、产品发布和营销活动进行了优化。它包括英雄内容、特色产品、视频、价值主张和资源的可配置部分。

### 广告系列布局部分
<a name="campaign-layout-sections"></a>

Campaign 店面由以下部分组成，每个部分均可独立配置：

#### 英雄专区
<a name="campaign-layout-hero"></a>

为访客提供第一印象的顶部横幅区域。
+ **标题**-主要消息
+ **副标题**-支持文本
+ **横幅网址**-上传或提供横幅图片的网址
+ **网站图标网址**-上传或提供网站图标的网址

#### Logo
<a name="campaign-layout-logo"></a>

广告系列布局标题的徽标配置。有关字段[徽标和主页按钮](#logo-and-home-button)的详细信息，请参阅。

#### “主页” 按钮
<a name="campaign-layout-home-button"></a>

广告系列布局标题的主页按钮配置。有关字段[徽标和主页按钮](#logo-and-home-button)的详细信息，请参阅。

#### 产品专区
<a name="campaign-layout-product"></a>

“产品” 分区有一个 **“分区” 标题**字段；默认值为 “特色产品”。

#### 视频和价值主张
<a name="campaign-layout-video"></a>

一个可选部分，用于通过视频和结构化消息传达主要优势。
+ **视频嵌入网址**-嵌入视频（YouTube、Vimeo 或直接网址）
+ **价值主张**-最多 4 份带有图标或简短描述的福利陈述

有关更多信息，请参阅 [视频和价值主张](#video-and-value-propositions)。

#### 资源部分
<a name="campaign-layout-resources"></a>

用于链接外部内容（例如白皮书、案例研究或文档）的部分。每张资源卡都有以下字段：
+ **标题**
+ **描述**
+ **链接标签**
+ **链接网址**

### 配置广告系列布局
<a name="campaign-layout-configure"></a>

1. 打开店面并选择 “**设计**” 选项卡。

1. 选择 “**广告系列**” 作为布局风格。

1. 使用显示的表单面板配置每个部分：
   + 完成**英雄栏目**字段
   + 配置 “**产品” 部分**
   + （可选）添加**视频嵌入网址**和**价值主张**条目
   + （可选）添加**资源**

1. 选择**保存**。

1. 在部署之前预览店面以验证布局。

### 相关主题
<a name="campaign-layout-related"></a>
+ [布局类型](#layout-types)
+ [视频和价值主张](#video-and-value-propositions)
+ [颜色和主题定制](#color-and-theme-customization)

## E-Commerce 布局
<a name="ecommerce-layout"></a>

该 E-Commerce 布局通过横幅栏提供产品网格浏览体验，针对目录较大的店面进行了优化，买家可以在其中比较和评估多种产品。

### E-Commerce 布局功能
<a name="ecommerce-layout-features"></a>
+ **横幅部分**-带有品牌和消息的可配置标题区域
+ **产品网格**-具有筛选和排序功能的产品图块响应式网格
+ **筛选侧边栏**-基于类别和标签的筛选，便于快速导航
+ ** Full-text 搜索**-跨产品标题和描述进行搜索

### 配置布 E-Commerce 局
<a name="ecommerce-layout-configure"></a>

1. 打开店面并选择 “**设计**” 选项卡。

1. 选择 “**电子商务**” 作为布局样式。

1. 配置**横幅部分**：
   + **主标题**-横幅的主要标题文本
   + **欢迎留言**-标题下方显示的支持文字
   + **标题叠加尺寸 (%)**-标题占横幅宽度的百分比
   + **标题对齐**-将标题向左、居中或向右放置

1. 配置**产品网格设置**：
   + 选择默认产品拼贴大小（小、中或大）
   + 配置每行的产品数量
   + 启用或禁用图块上的价格显示

1. 选择**保存**。

### 何时使用 E-Commerce 布局
<a name="ecommerce-layout-when"></a>

在以下情况下使用此布局：
+ 您的目录中包含许多商品
+ 买家需要跨类别浏览、比较和筛选
+ 您想要在最少的自定义内容栏目中获得熟悉的购物体验

对于产品较少或营销信息更为重要的店面，可以考虑使用广告系列布局或独立布局。

### 相关主题
<a name="ecommerce-layout-related"></a>
+ [布局类型](#layout-types)
+ 导入产品
+ 类别和徽章

## 颜色和主题定制
<a name="color-and-theme-customization"></a>

您可以自定义店面的调色板，使其与组织的品牌相匹配。访问 “设计” 选项卡上的 “**颜色**” 部分，配置您的店面颜色。

### 可配置的颜色元素
<a name="color-and-theme-elements"></a>

以下颜色元素是可配置的：
+ **原色**
+ **按钮颜色**
+ **标题颜色**

### 要自定义颜色
<a name="color-and-theme-customize"></a>

1. 打开店面并选择 “**设计**” 选项卡。

1. 滚动到 “**颜色**” 部分。

1. 对于每个颜色元素，选择颜色方块以打开颜色选择器。拾色器提供 HSV 渐变和色相滑块。

1. 选择 “**保存**” 以应用颜色。

### 最佳实践
<a name="color-and-theme-best-practices"></a>
+ 在文本和背景颜色之间保持足够的对比度以提高可读性。
+ 使用贵组织的主要品牌颜色进行主色设置。
+ 在桌面和移动设备视口上测试颜色。

### 相关主题
<a name="color-and-theme-related"></a>
+ [布局类型](#layout-types)
+ [徽标和主页按钮](#logo-and-home-button)

## 徽标和主页按钮
<a name="logo-and-home-button"></a>

您可以为店面标题配置自定义徽标和主页按钮。徽标代表贵组织的品牌，主页按钮提供返回店面主页或外部 URL 的导航。

### 配置徽标
<a name="logo-and-home-button-logo"></a>

1. 打开店面并选择 “**设计**” 选项卡。

1. 在**徽标**部分，输入**徽标网址**。粘贴 URL 或选择 “**上**传” 来上传图片。

1. 选择**保存**。

徽标出现在店面标题的左上角。

### 徽标要求
<a name="logo-and-home-button-requirements"></a>
+ 格式：PNG、SVG 或 JPEG
+ 建议尺寸：50-200 x 50 px。
+ 必须托管在可公开访问的网址 (HTTPS) 上

### 配置主页按钮
<a name="logo-and-home-button-home"></a>

主页按钮显示在店面标题中，并提供点击目的地。

1. 打开店面并选择 “**设计**” 选项卡。

1. 在 **“主页按钮”** 部分中，配置以下字段：
   + **重定向徽标网址**-买家选择徽标时的目标网址
   + **在现有选项卡中打开**-启用后，链接将在当前浏览器选项卡中打开，而不是在新选项卡中打开

1. 选择**保存**。

### 相关主题
<a name="logo-and-home-button-related"></a>
+ [颜色和主题定制](#color-and-theme-customization)
+ [布局类型](#layout-types)
+ [隐私政策](#privacy-policy)

## 隐私政策
<a name="privacy-policy"></a>

隐私政策部分有一个启用切换开关和三个字段：**隐私政策网址**；**页脚免责声明**；**表单免责声明**。

### 配置隐私政策
<a name="privacy-policy-configure"></a>

1. 打开店面并选择 “**设计**” 选项卡。

1. 在 “**隐私政策**” 部分，使用切换开关启用该功能，然后填写以下字段：
   + **隐私政策 URL**-输入指向贵组织隐私政策页面的链接。
   + **页脚免责声明**-为店面页脚输入免责声明文本。
   + **表单免责声明**-输入表单上显示的免责声明文本。

1. 选择**保存**。

### 注意
<a name="privacy-policy-notes"></a>
+ 建议所有收集买家信息或使用 Cookie 的店面提供隐私政策。
+ 隐私政策网址必须可公开访问 (HTTPS)。
+ 当买家选择该链接时，该链接将在新的浏览器选项卡中打开。

### 相关主题
<a name="privacy-policy-related"></a>
+ [徽标和主页按钮](#logo-and-home-button)
+ 部署

## 视频和价值主张
<a name="video-and-value-propositions"></a>

您可以向店面添加视频内容和结构化价值主张陈述。这些元素有助于向买家传达好处，并且在 “广告系列” 和 “独立” 布局类型中可用。

### 价值主张部分
<a name="video-and-value-propositions-video"></a>

使用右侧的切换开关启用或禁用此部分。

1. 打开店面并选择 “**设计**” 选项卡。

1. 在 “**价值主张” 部分**，输入**视频嵌入 URL**。

   支持的来源：
   + YouTube （嵌入网址格式）
   + Vimeo
   + 直接视频文件网址 (MP4)

1. 选择**保存**。

该视频作为嵌入式播放器显示在店面的指定区域中。

### 增值主张
<a name="video-and-value-propositions-vp"></a>

价值主张是在视频旁边或专门栏目中显示的简短收益陈述。它们说明了为什么买家应该使用您的店面。

1. 打开店面并选择 “**设计**” 选项卡。

1. 在 “**价值主张**” 部分，最多添加 4 个条目。对于每个参赛作品：
   + **标题**-简短的标题
   + **描述**-一到两句话解释好处

1. 选择**保存**。

### 显示行为
<a name="video-and-value-propositions-display"></a>
+ 在战役布局中，价值主张显示在英雄和视频下方的专门栏目中。
+ 在独立布局中，价值主张显示在产品目录部分的下方。
+ 在 “嵌入式” 和 “ E-Commerce 布局” 中，不显示价值主张。

### 相关主题
<a name="video-and-value-propositions-related"></a>
+ [广告系列布局](#campaign-layout)
+ [布局类型](#layout-types)