# 9 款商店布局 URL: https://canvaswp.com/zh-hans/templates/shop/ Updated: 2026-11-03 模板 WooCommerce 商品目录布局：列数与侧边栏位置、分类页面、筛选页面，以及购物车和结账页面。 [打开在线展示](https://demos.canvaswp.com/classic/) [浏览演示站点](https://canvaswp.com/zh-hans/demos/) 更新于 2026年11月3日 - [4 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop/) - [3 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop-3/) - [2 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop-2-right-sidebar/) - [1 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop-1/) - [产品布局 （在新标签页中打开）](https://demos.canvaswp.com/classic/product/pink-printed-dress/) - [分类 - 视差 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop-category-parallax/) - [组合筛选器 （在新标签页中打开）](https://demos.canvaswp.com/classic/shop-combination-filter/) - [购物车 （在新标签页中打开）](https://demos.canvaswp.com/classic/cart/) - [结账 （在新标签页中打开）](https://demos.canvaswp.com/xmas/xmas-checkout/) 每个链接都会打开线上展示站点中的真实页面，这些页面由您安装的同一套主题和区块呈现。 各页面的组成内容 ## 使用区块和模板构建的店铺页面 WooCommerce 负责运营店铺：商品、库存、购物车和支付。Canvas 负责设计买家浏览的页面，而这些布局中的每一个都由主题及其插件随附的组件构成。 ### 商品目录列 四列页面就是 WooCommerce 商店页面本身，由主题的商品归档模板呈现。三列、两列和一列页面则包含 Canvas Products 区块，由其“列数”设置决定每行的商品数量，并且页面需使用四种商店模板之一：全宽，或左侧、右侧或两侧边栏。 ### 产品页面 产品的布局由您编辑时选择的模板决定。除标准页面外，还提供左侧栏、右侧栏或双侧栏版本，带吸顶摘要、色板和规格列表，另有同时提供轮播形式的 Linked Gallery 模板。 ### 分类横幅 一组全屏高度的 Parallax Image 区块，每个分类对应一张图片，随页面滚动而移动。区块自带叠加层和内容，因此标题和按钮可以把购物者引导至店铺的相应区域。 ### 组合筛选器 带有两个 Grid Filter 筛选栏的 Canvas Products 区块位于其上方，一个标签为“选择分类”，另一个为“排序方式”，顾客可即时将目录缩小到某一类型，并按名称或价格排序，无需刷新页面。 ### 购物车 展示用购物车使用 WooCommerce 自带的购物车区块。对于希望逐个区块搭建购物车页面的商店，Canvas 还提供了 Canvas Cart Table 和 Canvas Cart Totals 区块。 ### 结账 购物车为空时没有可展示的结账页面，因此此链接会打开 Christmas Store 演示站点的结账页面，该页面由 Canvas Checkout Billing 和 Canvas Checkout Order Review 区块构建。导入该演示站点时，商品和此结账页面会一并就位。 选择 ## 哪种商店布局适合您的商品目录？ 让产品目录的规模决定布局。少量产品配以精美图片时，宽卡片效果最佳，每行放两到三个；如果每个产品都需要一段独立说明，则改用单列。大型目录需要一次在屏幕上展示更多内容，这正是四列商店页面的用途。 当顾客希望同时按两种方式筛选（先按类型，再按价格）时，请使用组合筛选器。在首页或商品画册中放置分类横幅，让图片先于商品网格完成推销。 在商品页面上，根据促使购买的因素选择模板。服装主要靠颜色吸引购买，因此颜色色板版本很有价值。技术类商品则靠细节取胜，这正是规格列表的用途；在较长的页面上，吸顶摘要可让价格和按钮始终可见。 88 个演示站点中，有 21 个会以 WooCommerce 商店的形式导入，并已配置好商品、分类以及购物车和结账页面。 ### 商店功能 24 个 WooCommerce 区块和 18 个商店模板，涵盖从产品图库到订单确认的各类页面。 - [Canvas 中的 WooCommerce](https://canvaswp.com/zh-hans/woocommerce/) ### 操作演示 按构建顺序排列：商品、商店页面、商品页面、购物车和结账页面。 - [搭建 WooCommerce 商店](https://canvaswp.com/zh-hans/guides/start-a-woocommerce-store-with-wordpress/) ### 商店类演示站点 涵盖服装、陶艺、家具等领域，每个演示站点均可在导入前逐页预览。 - [电商演示站点对比](https://canvaswp.com/zh-hans/wordpress-themes/ecommerce/) 更多模板 ## 模板库中的其余内容 - [页面模板 13](https://canvaswp.com/zh-hans/templates/page-templates/) - [短代码与元素 57](https://canvaswp.com/zh-hans/templates/shortcodes/) - [作品集布局 27](https://canvaswp.com/zh-hans/templates/portfolio/) - [博客布局 35](https://canvaswp.com/zh-hans/templates/blog/)