Page Builder | 服饰类首页场景搭建

在服饰类独立站中，视觉呈现往往决定了客户的第一印象，而一个兼具风格感与信息清晰度的页面布局，更能有效提升停留时长与转化表现。借助 Page Builder，你可以灵活搭建符合品牌调性、商品特性的多样化页面结构，实现从首页氛围、商品展示到场景化内容的全面优化。

本篇文章将围绕服饰类店铺的核心需求，介绍如何通过 Page Builder（高级卡片）打造更具吸引力的服饰类店铺首页，将涵盖首页关键板块的搭建，包括：页头导航、banner 展示、商品陈列、营销活动、买家秀、品牌形象呈现及店铺政策服务的配置教程。

服饰类装修建议

• 装修思路：场景感 + 潮流感落地
• 核心调性：潮流化、场景化、强互动性。服饰消费者注重风格匹配与穿搭体验，网站需激发其对产品的代入感。
• 色调搭配：按品牌风格定调，避免杂乱。页面留白适中，重点突出穿搭场景与产品组合。
  • 街头潮牌：多为荧光色撞色，通常搭配主色 60%+ 辅助色 30%+ 点缀色 10%。
  • 轻奢女装：多为低饱和度色系，如莫兰迪粉 + 米白 + 浅灰，营造高级感。
  • 复古服饰：多为怀旧色调，如米黄 + 卡其 + 深棕，贴合品类气质。
• 布局设计：布局上大多采用大图轮播展示模特穿搭场景。
  • 顶部：全屏模特穿搭场景轮播。（每张图聚焦 1 套核心搭配，配简短潮流标语）
  • 中部：新品+ 热卖榜单 + 营销活动。
  • 底部：买家秀 + 品牌形象展示 + 店铺政策服务。
• 素材要求：
  • 图片：高清实景穿搭图 + 纯色背景商品图。商品详情介绍中需包含面料特写、走线细节、领口 / 袖口等局部图。
  • 装饰：圆润简约图标，避免复杂装饰。

Page Builder入口

登录你的 Shoplazza 管理后台，点击在线商店 > 主题装修 > 编辑，进入到主题编辑器，将左侧面板的卡片列表下滑至底部，点击添加卡片按钮，在二级面板中点击入口高级卡片广场。

导航配置

导航配置

服饰类导航的层级设置建议

一级：New Arrivals / 新品

• 二级：本季热门 Seasonal Picks

一级：Women / 女装

• 二级：上衣 Tops
  • 三级：T‑恤 / 衬衫 / 针织衫 / 外套 / 针织外套
• 二级：裙装 Dresses & Skirts
  • 三级：连衣裙 / 半身裙 / 长裙 / 迷你裙
• 二级：裤装 Bottoms
  • 三级：牛仔裤 / 阔腿裤 / 休闲裤 / 短裤
• 二级：套装 & 搭配 Sets & Looks
  • 三级：套装 / 造型推荐

一级：Men / 男装

• 二级：上衣 Tops
  • 三级：T‑恤 / 衬衫 / 卫衣 / 外套 / 风衣 / 毛衣
• 二级：裤装 Bottoms
  • 三级：牛仔裤 / 休闲裤 / 运动裤 / 短裤
• 二级：套装 & 外套 Outerwear & Sets
  • 三级：夹克 / 大衣 / 套装 / 西装

一级：Sale & Outlet / 特惠 & 折扣

• 二级：限时折扣 Limited Time Sale
• 二级：折扣精选 Sale Picks
• 二级：清仓 Clearance / Final Sale

一级：About / 品牌 & 服务

• 二级：品牌故事 Brand Story & Philosophy
• 二级：配送与退换 Shipping & Returns
• 二级：联系我们 Contact Us

操作步骤

1. 登录你的 Shoplazza 管理后台，点击在线商店 > 菜单导航。具体操作可参考文档：设置菜单导航。

2. 点击在线商店 > 主题装修 > 编辑，进入页头板块，将创建好的菜单关联即可，具体可参考：页头添加菜单导航。

C端展示效果：

配置首页 banner

首页banner的展示将会影响客户对于你店铺的第一印象和对你店铺的风格定位，banner 的呈现可参考：

• 选择承载店铺的主要促销信息，集中展示活动主题与核心卖点的主图。
• 选择能够完整体现服饰特点的图片，如清晰展示剪裁细节，或呈现整体风格调性的视觉内容。

使用预设模板配置 banner

操作步骤

1. 点击图文展示 > 图文轮播，可看到特色轮播和经典轮播卡片，点击其中一个进行编辑。

2. 选中轮播图，出现黄色选中边框。

3. 点击样式，填充类型选为图片，点击选择图片进行修改。

4. 即可修改为自己想要的 banner。

5. 如果需要再增加更多的 banner 展示，可以选中其中某个轮播卡片为黄框，点击复制，即可新增。

6. 如果只需要显示一张 banner，可选中整个轮播卡片为蓝色框，在左侧工具栏里进行删除。

• 设置按钮跳转链接

banner 中的按钮可以链接至你店铺的热卖专辑或任何你希望客户能够直接点击查看的专辑、商品链接，选中按钮，即可为按钮设置跳转连接到你需要的页面。

• 设置 banner 标语，根据不同的展示需要，选中标题部分，即可在左侧工具栏修改你的 banner 标语。
  • 活动宣传文案：在 banner 上方加入简洁有力的活动文案，例如限时折扣、季节促销或新品发布，用于快速传达当下最重要的营销信息，吸引客户继续浏览。
  • 品牌标语：通过简短、有辨识度的品牌口号强化品牌调性，帮助客户快速建立对你品牌的认知。

C端展示效果：

使用组件自行配置 banner

当你发现主题内置的 banner 模板样式无法满足店铺的视觉需求，希望加入更多营销文案、重新调整信息层级、增加按钮或打造更符合品牌调性的视觉排版时，自行配置将是更理想的选择。

操作步骤

1. 在开始自行配置之前，需要先准备好空白的配置界面，可以点击图文轮播，任选一个轮播模板。

2. 选中整个轮播板块为蓝色框后点击删除，即可得到一个空白的配置界面。

3. 此时可以点击组件 > 布局 > 选择单一布局，长按拖动至页面进行配置，选中布局为黄色框，点击样式，将背景填充设置为图片，选择你需要的 banner 上传。

<>

4. 接着为配置好的 banner 添加按钮、标题等组件，更多关于组件的使用介绍，可详细查看Page Builder | 基础组件。

5. 如果觉得组件位置不合适，可选中组件点击通用，通过外边距来进行组件位置的调节。

• 对于组件位置也可单独添加布局，再将组件拖入，通过内容位置进行调节。

C端展示效果：

配置商品展示

设置完成 banner 后，还需要向客户直观展示你店铺内所售卖的产品，在高级卡片广场中同样预设了多样化的商品类的卡片，通常可以选择商品列表1、商品列表2来配置热卖商品、新品板块等。对于服饰来说，消费者更在意服装的上身效果，因此更建议选用有真实模特上身的商品素材，激发客户点击查看产品详情的欲望。

展示新品/热卖品

为了让新品/热卖品的呈现更直观吸睛，可以选择自带新品导视图与商品关联区域的商品列表2卡片进行配置。

操作步骤

1. 添加好卡片后，选中右侧商品展示位置为蓝色框，接着在左侧工具栏部分选择商品来源，可选择商品来源为商品、专辑、智能推荐、在线浏览。

2. 若选择商品来源为专辑，即可在下方选择对应专辑进行商品的关联，其他商品类卡片也适用同样的关联方式。

3. 如需要修改卡片内的标题文字，选中对应文字即可在左侧工具栏进行修改。

4. 装饰性的视觉引导部分也需要同样符合品牌整体调性来进行调整，选中右侧对应的组件，点击样式，即可修改其背景、边框和阴影部分。

除上述配置方式，你还可以根据你的品类销售需求，增加热卖、促销品的的展示。

展示专辑商品

除了新品/热卖品的直观呈现，你可以选择按专辑维度（如 “睡衣系列”“冬装合集” 等）聚合展示商品，让主题商品呈现更规整、分类更清晰。

操作步骤

1. 点击商品 > 商品列表，选择简约列表2。

2. 选中商品部分为蓝色框，即可选择对应专辑关联展示商品。

3. 点击页面中的标题组件，可为该部分商品设置对应品类标题。

C端展示效果：

配置营销活动展示板块

营销活动对于服饰类店铺至关重要，它能刺激购买欲、提升销量，同时增强品牌曝光和客户粘性。你可以通过高级卡片配置专属的营销活动展示区域。

操作步骤

1. 创建一个空白的界面，在通用 > 布局，选择所需的布局样式，将其拖入卡片内（此处以展示三个营销活动为例）。

2. 在通用 > 图片，选中图片组件，将其依次拖放至布局容器内，即可上传在布局内上传图片。

3. 点击图片组件，即可在左侧工具栏上传活动 banner，同时需要为每个 banner 关联活动跳转链接，以便客户更好地查看各活动详情。

C端展示效果：

配置买家秀

买家秀能以真实穿搭场景展示商品细节，让客户更快判断风格与适配度，从而提升下单意愿。通过轮播类高级卡片展示客户秀，可为页面注入生活化氛围，增强商品魅力及传播效果。

操作步骤

1. 点击图文展示 > 图文轮播，可选择列表轮播卡片配置一个买家秀的板块。

2. 在通用 > 基础 > 标题，将标题组件拖入卡片上方，为该板块配置一个标题，向客户说明此部分是买家秀展示。

3. 选中卡片内的图片，可以在左侧工具栏内上传真实的商品返图。为营造真实的买家秀效果，可将不需要的按钮、标题组件选中后删除。

4. 选中其余文字组件，可编辑具体的评价文案。

5. 在通用 > 基础，可以通过增加图标、标题组件为买家秀添加客户信息，让你的买家秀看上去更真实。

• 添加客户头像
  • 将图标拖动至页面中后，选中图标，点击选择图片上传客户头像；
  • 
    选中头像可设置其尺寸大小，点击样式板块还可为其设置圆角。
• 
• 添加客户姓名
  • 将标题组件拖动到头像下方，选中标题组件即可编辑姓名等信息。

C端呈现效果：

品牌形象建设

对于服饰类店铺的首页，除了展示店内的商品，为提升店铺整体的专业度、时尚度和品牌影响力，在首页我们还可以增加一些对于你品牌形象描述的部分。

操作步骤

1. 可以选用图文格子中的图文分栏卡片，通过配图和文字简单介绍服饰所使用的面料，剪裁等工艺，以加强客户对你品牌的了解，展现对商品生产的专业把控。

2. 选中图片部分可以替换图片，同时可为图片关联自定义页面或博客等跳转页面，引导客户点击跳转查看更详细的信息。

3. 选中标题组件即可修改文案内容。

C端呈现效果：

店铺政策服务

除了提供多样的商品选择，店铺还需要规定店铺与消费者之间的权利和义务，保护店铺和消费者的合法利益，并保证店铺的合规运营。对于服饰类店铺来说，客户购买的服饰不合身或衣服有瑕疵时，换货将是你需要着重处理的售后项目，这关系到你店铺的满意度和复购率，因此如能直观地在店铺服务政策里说明售后内容，客户也会体会到更有保障的店铺服务，能够增加，客户的信赖感，加强客户的下单欲望。

操作步骤

1. 在高级卡片中可以选用图标文字类的卡片进行简单的说明介绍，选择图文展示 > 其他图文，可看到已预设好的图标文字，可以直接进行编辑。

2. 通常店铺服务政策会包括运费说明、客户服务、运输保障、支付说明等，可根据实际经营情况进行说明。你可以结合店铺风格对每个小板块的样式进行配置，支持修改背景填充、边框、圆角、阴影。

3. 如果卡片内容不足以呈现店铺详细的政策内容，可以创建自定义页面进行说明。点击对应的文字部分，即可将其连接至对应政策页面，引导客户查看更详细的政策内容。

C端呈现效果：