在家居类店铺中，首页不仅需要呈现产品本身，更要传递空间氛围与生活方式的灵感。借助 Page Builder，商家可以轻松通过拖拽组件的方式，自由构建兼具设计感与实用性的首页结构。通过展示客厅、卧室等不同场景的家居产品，Page Builder 帮助你打造更具风格、层次与转化力的家居店铺首页，为客户带来沉浸式的购物体验。
本篇文章将围绕家居类店铺的核心需求，介绍如何通过 Page Builder（高级卡片） 打造更具吸引力的家居店铺首页，将涵盖首页关键板块的搭建，包括：页头导航、顶部全景图展示、商品陈列、搭配方案专栏、功能演示视频、及店铺政策服务的配置教程。
注意
如果是初次使用Shoplazza 建站，在开始搭建前可以先了解基本的装修逻辑，详见：0-1 网站装修操作手册：如何快速将网站装修成你想要的效果？
家居类装修建议：
- 核心调性：质感化、场景沉浸、实用性。该品类多为大件商品，消费者决策时顾虑尺寸适配性与居家融合度，网站需强化空间想象感。
- 色调搭配：主色调以原木色、米白、浅灰等自然色系为主，契合居家温馨氛围，园艺用品可额外搭配绿色系点缀。
-
布局设计：布局宽松不拥挤，通过实景图与尺寸标注强化空间想象感，可上大量运用家居实景大图。
- 顶部：全屏家居实景全景图（如 “北欧风客厅一站式搭配”），配场景化标语。
- 中部：按空间分类导航（客厅→卧室→庭院）+ 核心产品场景陈列+ 搭配方案专栏。
- 底部：安装教程视频入口 + 尺寸对照指南 + 大件包邮 / 免费退换标识 + 售后保修说明。
-
素材要求：
- 图片：高清居家实景图（占比 80%），需标注尺寸线（如沙发旁标 “1.8m×0.9m”），包含材质特写、产品与空间融合细节图。
- 视频：安装教程、空间搭配演示视频（1-3 分钟，节奏舒缓）。
- 装饰：圆润质感图标、绿植插画、木纹线条分隔元素，传递温馨实用感。
Page Builder入口
登录你的 Shoplazza 管理后台，点击在线商店 > 主题装修 > 编辑，进入到主题编辑器，将左侧面板的卡片列表下滑至底部，点击添加卡片按钮，在二级面板中点击入口高级卡片广场。
提示
本文大部分的配置将通过高级卡片中预设的模板实现，如果预设的模板样式不合符你的需求场景，可重新自由搭配组件。
导航设置
家居类导航的层级设置建议：
一级：房间场景 Rooms & Scenes
- 二级：客厅 Living Room
- 三级：沙发 / 茶几 / 装饰
- 二级：卧室 Bedroom
- 三级：床品 / 床架 / 衣柜
- 二级：厨房 Kitchen
- 三级：餐具 / 小家电 / 收纳
一级：风格专区 Style Zone
- 二级：北欧 Scandinavian
- 二级：现代 Modern
- 二级：复古 Retro / Vintage
一级：服务支持 Support & Services
- 二级：安装说明 Installation Guide
- 二级：售后政策 After-Sales Policy
- 二级：客服中心 Customer Service Center
操作步骤
1. 登录你的 Shoplazza 管理后台，点击在线商店 > 菜单导航。具体操作可参考文档：设置菜单导航。
2. 点击在线商店 > 主题装修 > 编辑，进入页头板块，将创建好的菜单关联即可，具体可参考：页头添加菜单导航。
C端展示效果：
配置顶部全景图
首页顶部使用一张完整的家居场景图，可以在第一时间向客户呈现理想空间氛围，快速建立美感与信任感。对于家居类店铺而言，真实的场景展示能帮助客户想象产品在家中的使用效果，提升代入感与购买意愿。因此，在 Page Builder 中为首页设置一张高质感的场景大图，是打造品牌形象与提高转化率的重要步骤。
操作步骤
1. 点击图文展示 > 轮播，选择经典轮播卡片。
2. 选中轮播图部分为黄色框，将背景填充选择为图片，上传家居全景图。
3. 为避免阻挡图片显示，对于画面中的标题、按钮等组件可以选中通过外边距调整位置。
4. 选中各组件，调整各组件的样式与店铺风格保持一致。
C端展示效果：
配置不同品类的家居展示
首页配置客厅、卧室、餐厅等不同品类家居展示区，核心是实现精准分类。按空间品类清晰划分展示，让有明确需求的客户（如 “买卧室家具”“选客厅套装”）快速锁定目标，避免海量商品中盲目筛选，降低决策成本。
客厅家居展示区
这部分可以自由组合沙发、茶几、装饰等组件，通过拖拽轻松设计多种版式布局。例如，下方的卡片展示了“左商品列表，右热卖商品主图”的经典搭配。既能清晰呈现单品细节，又能营造整体空间氛围，让家居的协调美感与实用功能一目了然。
操作步骤
1. 配置一个左侧带轮播，右侧展示家居大图的卡片，进入高级卡片，任选一个预设好的卡片模板，选中全部内容为蓝色框后删除。
2. 选择组件 > 布局，选择两个布局块拖入页面。
3. 在通用 > 基础 > 标题，拖入标题组件添加对这个卡片的说明。
4. 接着通用 > 容器 > 轮播，选择轮播组件拖入第一个布局块内。
5. 再点击布局，拖入两个布局块，将两个布局块的排列方向设置为垂直方向，
6. 点击组件 > 商品，分别拖入两个单商品组件至布局块中。
7. 选中单商品组件为蓝色框，可选择关联对应商品。
8. 布局好左侧的商品展示后，点击选中右侧布局，将背景填充为热卖商品主图。
9. 选中左侧布局为黄色框，拉动蓝色尺寸调节器，将画面布局调整和谐。
10. 选择标题组件拖入商品展示底部，可将内容命名为View More以便客户查看关于该品类的更多商品。
11. 最后结合店铺风格可对卡片整体的样式做统一调整：
-
选中左侧布局块为黄色，点击样式更改其背景颜色；
-
选中整个布局块，则可更改整个背景填充颜色。
C端展示效果：
卧室家居展示区
卧室家居的魅力，在于布局的呼吸感与个性的流露。本板块支持自由拖拽组合床架、床品、衣柜等模块，通过图片大小错落、视觉动线平衡的设计，打造不对称中的独特韵律。如下方示例，商品图以差异化尺寸巧妙排布，形成视觉对称的错落卡片墙，既有灵活生动的层次感，又保持了整体陈列的和谐与秩序。
操作步骤
1. 进入高级卡片，任选一个预设好的卡片模板，选中全部内容为蓝色框后删除。
2. 选择组件 > 布局，先拖入一个单一布局，再分别拖入两次三个布局块。
3. 如图将出现6个布局块，分别拖入6个单商品组件。
4. 拖入标题组件为该卡片进行说明。
5. 选中单个单商品组件为蓝色框，可关联商品。
6. 选中其中一个单商品组件为黄色框，拉动蓝色尺寸调节器，可调整不同单商品层次感。
7. 调节该卡片整体效果，选中整个布局块，可调节其背景填充颜色与店铺整体调性一致。
C端展示效果：
配置搭配方案专栏
对于家居类店铺而言，可根据产品风格、空间类型或系列特性，设置相应的搭配方案供客户参考。通过将相关家具与装饰品成套展示，不仅能帮助客户更直观地感受整体搭配效果，还能有效提升连带购买率，并增强客户对品牌的专业度与信任感。这部分的搭建可以结合博客或者自定义页面呈现。
操作步骤
1. 进入高级卡片，任选一个预设好的卡片模板，选中全部内容为蓝色框后删除。
2. 选择组件 > 布局，拖入四个布局块（可根据实际需求选择不同的布局容器）。
3. 依次在每个布局里拖入标题、图片组件。
4. 选中图片组件，上传搭配方案的全景图，同时为图片设置跳转链接关联至博客或自定义页面。
注意：这里需要先在博客页或者自定义页面编辑好详细的家居搭配方案，以便客户点击跳转后可查看到具体的方案详情。相关操作参考：
<><>
5. 选中文字组件，编辑搭配方案的简介。
6. 点击组件 > 商品，拖入查看商品详情的按钮，可以关联该搭配方案里主推的产品。
7. 选中图标可设置其尺寸、外边距和内边距。
8. 选中单个布局为黄色框，设置背景填充颜色、边框颜色，使博客布局更鲜明。
C端展示效果：
配置安装教程视频入口
家居产品比如鞋柜、书架等还会涉及安装步骤，可以使用视频类卡片集中展示热门商品的安装教学视频。清晰的步骤演示不仅能显著降低客户的安装困惑与售后咨询，更能直观展现品牌的专业性与细致度，将购物体验延伸至产品使用的每一个环节，从而提升信任感与满意度。
操作步骤
1. 进入高级卡片，点击视频 > 视频排列，拖入第二个视频格子卡片。
2. 拖入标题组件为该卡片添加说明。
3. 分别选中各视频部分，上传家居安装视频，为视频设置封面和自动播放。更多的视频配置方式可参考：Page Builder | 展示视频内容。
C端展示效果：
配置店铺服务政策
对于家居类产品而言，客户在购买时关注的通常不仅是外观风格，还非常在意材质质量、运输安全、安装难度以及售后是否可靠。尤其是客厅、卧室等大件家居类商品，客单价高、配送周期长，客户在下单前更会担忧不合适或运输破损的情况。
建议可添加以下政策说明：
- 支持退换货（Free Returns）
- 物流破损保障 / 安全配送（Damage Protection / Safe Shipping）
- 品质保障（Quality Guarantee）
- 安全支付 （Secure Payment）
操作步骤
在高级卡片中已有预设好的图标文字类模版，可以直接在图文展示 > 其他图文中选用并完成配置。
以下将介绍另一种灵活配置方式，即通过组件自由搭配实现个性化呈现：
1. 进入高级卡片，任选一个预设好的卡片模板，选中全部内容为蓝色框后删除。
2. 选择组件 > 布局，拖入一个单一布局。
3. 选中整个布局为黄色框，可修改其背景填充颜色与店铺风格保持一致。
4. 接着再拖入四个布局块（可根据需展示的店铺政策数量选择对应的布局样式）。
5. 拖入标题组件为卡片进行说明，并选中标题组件编辑为“Our Services”。
6. 营造政策文字浮于画面的效果：
-
选中一个布局，点击背景填充颜色，并调整其透明度；
-
根据店铺风格可适当调整布局的圆角幅度，让画面视效统一。
- 为每个政策配置具体内容。
1. 配置标题：将标题组件拖入每个布局，对标题内容进行编辑（通常展示政策名称）；同时可设置标题关联跳转政策页面。
2. 配置政策简介：在标题组件下方拖入段落组件，为该政策添加简要介绍。
C端展示效果：
评论
请登录写评论。