Shopify装修教程（九）：主页设置-模板（特色产品系列2.1-2.2）

2.3.4 主体内容:

1.轮播图

我们先准备好3张较有自身产品特色的轮播图，

由于自带模板中的第一个模块是图片横幅而不是轮播图，我们需要选择添加分区，然后添加幻灯片选项。

添加好之后，我们可以看到模板自带两张幻灯片可以设置进行轮换，但是我们需要三张图片进行轮换。

我们移动鼠标到第二张图片处下面，直到页面显示出 添加幻灯片 选项，点击 添加 幻灯片 即可。

然后我们点击第一个幻灯片，进入设置。

点击右侧的选择按钮，进行幻灯片的添加。

添加好之后我们可以看到界面上还有一个图片标题的容器窗口，由于我们的图片上已经放置好了所有文字元素，我们不需要这个窗口的展示，那么只需要在右侧依次点击操作即可。

（教程只做展示，在制作图片时，图片上的文字需要根据销售市场进行设置，例如我们做的是跨境电商，图片中的语种需要选择英语。）

然后我们依次操作，上传三张幻灯片作为轮播图。

上传好之后，我们点击幻灯片，可以在右侧对整个幻灯片的样式做一些调整和设置。

2.特色产品系列

下一个部分是多个系列的产品图片，我们首先分析下BIBA的界面结构，看下我们需要添加哪些组件。

分析后可以发现，BIBA的网站总共放置了五个板块，分别为四个特色产品系列列表和一个特色产品系列，我们依次对其进行仿照设计。

2.1添加第一个板块

我们选择添加产品系列列表模块。

我们首先在标题处打上空格隐藏标题。

按照BIBA的网站设计，将产品调整成展示五个。

再调整一下分区填充的数据。

然后再依次对产品系列列表做设计，这一步需要我们先选择需要更改的产品系列，然后在右侧产品系类点击选择按钮。

然后设置我们的产品系列1，由于我们的图片都是处理过的，记得在图片比这里选择适应图片，保留我们的图片格式和尺寸。

需要注意的是，我们需要先在后台设置产品系列的内容，在这个部分才可以进行产品系列内容的选择和更改。

我们可以看到添加完之后，我们的界面上黑色的产品系列名称的文字非常突兀，但是由于模板限制，这些文字是不能隐藏的，我们只能在配色方案中，将文字修改为白色，从而达到隐藏产品系列名称文字的效果

2.2添加第二个板块

然后按照BIBA的网页格式，再添加两行三列的产品系列列表。

都设置好之后，可以看到展示为这样：

可以看到我们的网站与BIBA的主页部分已经基本一致了。