2.特色产品系列
下一个部分是多个系列的产品图片，我们首先分析下BIBA的界面结构，看下我们需要添加哪些组件
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
分析后可以发现，BIBA的网站总共放置了五个板块，分别为四个特色产品系列列表和一个特色产品系列，我们依次对其进行仿照设计
2.1添加第一个板块
我们选择添加产品系列列表模块
我们首先在标题处打上空格隐藏标题
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
按照BIBA的网站设计，将产品调整成展示五个
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
再调整一下分区填充的数据
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
然后再依次对产品系列列表做设计，这一步需要我们先选择需要更改的产品系列，然后在右侧产品系类点击选择按钮
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
然后设置我们的产品系列1，由于我们的图片都是处理过的，记得在图片比这里选择适应图片，保留我们的图片格式和尺寸
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
需要注意的是，我们需要先在后台设置产品系列的内容，在这个部分才可以进行产品系列内容的选择和更改，这个部分在九中会给大家详细讲解
我们可以看到添加完之后，我们的界面上黑色的产品系列名称的文字非常突兀，但是由于模板限制，这些文字是不能隐藏的，我们只能在配色方案中，将文字修改为白色，从而达到隐藏产品系列名称文字的效果
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
2.2添加第二个板块
然后按照BIBA的网页格式，再添加两行三列的产品系列列表
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
都设置好之后，可以看到展示为这样
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
可以看到我们的网站与BIBA的主页部分已经基本一致了
Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）
《Shopify装修教程（九）：主页设置-模板（特色产品系列1-2）》留言数：0