# 内置商品目录的电商 WordPress 主题 URL: https://canvaswp.com/zh-hans/wordpress-themes/ecommerce/ Updated: 2026-11-03 9 个完整演示站点 这 9 个 Canvas 演示站点均以商店为先进行构建。导入其中任一站点后，商品目录、商品页面、购物车和结账页面都将采用该演示站点的设计，并附带 106 个演示商品供您替换。 [查看服装店演示站点](https://demos.canvaswp.com/store/) [查看价格](https://canvaswp.com/zh-hans/pricing/) 更新于 2026年11月3日 演示站点 ## 九套商店设计，共计 115 个页面 每个演示都会作为完整网站导入，包括商品及其分类、页面、菜单、表单以及所有 WooCommerce 页面，且全部可编辑。购买前可在线实时预览。 ### [Clothing Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/store/) 商店与电商 · 19 个页面 · [安装内容：Clothing Store 演示站点的区块与内容类型](https://docs.canvaswp.com/design-store) ### [Fashion Shop 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/shop/) 商店与电商 · 25 个页面 ### [Furniture 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/furniture/) 商店与电商 · 12 个页面 ### [Drone 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/drone/) 商店与电商 · 12 个页面 ### [Wildroot Gear 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/gear/) 商店与电商 · 14 个页面 · [安装内容：Wildroot Gear 演示站点的区块与内容类型](https://docs.canvaswp.com/design-gear) ### [Speaker Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/speaker/) 商店与电商 · 11 个页面 ### [Supplement Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/supplements/) 商店与电商 · 13 个页面 ### [eBook 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/ebook/) 商店与电商 · 9 个页面 为何本页显示 9 个，而其他页面统计的是 21 个商店？目录中有 21 个可导入完整 WooCommerce 商店的演示站点，本页的 9 个为通用商店。其余 13 个将商店置于其他类型的网站中，或面向某一季节或某种手工艺销售：Bag Store、Barber Shop、CanvasRoam、Christmas Store、Conference、Fashion Store、FORM 2026、Game of Canvas、Illustrator、Jewelry Boutique、Podcasts、Pottery Shop 和 Wine Estate。所有 21 个均列在 [WooCommerce 页面](https://canvaswp.com/zh-hans/woocommerce/#demos)中。 商品目录 ## 编辑一条产品记录，所有网格同步更新 该演示站点的系列页面由读取您 WooCommerce 目录的 Canvas 商店区块构建，因此添加商品或修改价格只需编辑一条记录，所有网格随之更新。服装店演示站点的男装系列与女装系列页面，将分类筛选与价格区间筛选结合使用。 - 时尚商店演示站点含 41 件商品，保健品商店演示站点含 20 件，家具演示站点含 16 件 - 网格、轮播、分类卡片和价格筛选器，每项均可从分类、标签、搜索或手动挑选的列表中获取内容 - 在后台为属性项设置颜色后，可变产品将以色块代替下拉菜单显示 - 从网格或卡片浮层加入购物车时，页眉购物车会即时更新，无需刷新页面 能够促成销售的四个关键页面 ## 商店、商品页面、购物车、结账 Canvas 提供 24 个 WooCommerce 区块和 18 个商店模板，因此购物者看到的每个界面都是带有设置面板的区块，不再有需要您覆盖的 PHP 模板。 ### 店铺与商品合集 Each demo ships its own catalog pages, such as Men's Collections and Women's Collection in Clothing Store, or Rings, Earrings, Necklaces and Bracelets in Jewelry Boutique. ### 商品页面 单个产品页面可以采用默认版式、跟随图库滚动的吸顶摘要版式、列表版式、以色彩为主的设计或侧边栏变体，可以逐个产品设置，也可以设为商店默认值。 ### 购物车与结账 WooCommerce 自带的购物车和结账区块位于演示站点的页面设计中，因此处理付款的页面保持标准样式，而周围的页面则与店铺风格保持一致。 [所有 WooCommerce 区块、所有模板和所有商店选项](https://canvaswp.com/zh-hans/woocommerce/) 扩展规模 ## 三款产品的新品发布，与拥有 41 款产品的商品目录 这九款演示商店的规模刻意各不相同，因为单品上线与百货商店需要不同的导航。请选择结构与您的业务最匹配的一款作为起点，省去花一下午删除用不上的页面的时间。 - Clothing Store 包含 19 个页面、一个超级菜单和 6 篇博客文章；Fashion Shop 包含 25 - Wildroot Gear 和 eBook 在较短的内容范围内使用单页导航 - Jewelry Boutique 新增了配送、付款及作品背后故事的页面 - Supplement Store 增加了博客、常见问题和支持页面；Drone 增加了优惠、视频和配件相关页面；Speaker Store 增加了评价和支持页面 [如何在 Canvas 中设置 WooCommerce 商店](https://canvaswp.com/zh-hans/guides/start-a-woocommerce-store-with-wordpress/) 在手机上 ## 店铺的大部分流量从未以桌面端布局浏览 商品目录、筛选器和结账页面都由同一套响应式区块构建，因此无需维护第二套布局，也不必担心遗漏更新。此截图为原样发布的服装店演示站点，宽度为 390 像素。 - Canvas 仅加载页面所需的 CSS 和 JavaScript - 五个开关可在不销售任何商品的页面上移除 WooCommerce 脚本，包括购物车片段轮询。 - 商品图片由 WordPress 自动获得宽度、高度、懒加载和响应式尺寸 - 页眉、页面标题栏和页脚各自拥有独立的手机端显示规则 为什么选择 Canvas 搭建商店 ## 首页之外，商店还需要的四项功能 ### 商店所需的全部页面 商品及其分类、商品集合页面、政策页面、菜单和表单将一并导入，因此店铺在您替换为自有商品目录时仍能正常展示。 ### 直接在 WordPress 中编辑 价格、徽章、促销横幅：每一项都是 WordPress 自带编辑器中的一个区块字段。无需与主题一同续费页面构建器许可证。 ### 可撤销 Canvas 会记录导入过程写入的所有内容。删除演示数据可将其全部清除，因此尝试第二种商店设计只需花一个下午，别无其他成本。 ### 包含文案撰写帮助 没人喜欢撰写产品描述。CanvasAI Engine 可在任意区块字段中起草和改写文本，年付套餐包含每月 AI 点数。 常见问题 ## 直截了当地谈在线销售 以下解答适用于发布时附带的九个商店演示站点。 **九个商店类演示站点中，我应该从哪一个开始？** 请根据您实际拥有的商品目录选择合适的 Canvas 商店演示。**服装店**和 **时尚店铺**是拥有超级菜单和系列页面的大型时尚商品目录。**家具**和 **珠宝精品店**属于需要慎重考虑购买的商店，商品页面较长。**无人机**、**音箱商店**和 **营养补剂商店**商品系列较小，配有博客和支持页面。**Wildroot Gear**和 **eBook**是面向少量商品的单页发布站点。所有演示均基于同一主题，因此您选择的仅是起始设计，不具约束力。 **我还需要安装 WooCommerce 插件吗？** 是的：WooCommerce 负责运营商店，Canvas 负责设计。WooCommerce 保留商品、库存、订单、税务规则、配送区域和支付网关，因此您现有的其他 WooCommerce 扩展可以继续正常使用。Canvas 在此之上提供设计层：24 个商店区块、18 个商店模板和 39 个商店选项。在设置向导中选择商店演示站点后，导入前会自动安装并激活 WooCommerce。 **我今天就要开始卖东西。导入之后，会再多出一个结账流程吗？** 否：Canvas 导入程序会查找您已有的商店页面、购物车、结账页和账户页，然后将演示的菜单和链接指向这些页面。它不会生成重复的页面集。您的商品和订单保持不变，导入过程中创建的任何内容都可通过“删除演示数据”一并移除。 **商店区块需要单独购买吗？** 否：Canvas 的全部 24 个商店区块均为高级区块，每个套餐都包含全部高级区块、所有商店模板以及全部 21 个演示商店。没有电商专属版本，也没有商店附加组件。在其他产品中这种做法很常见：[Kadence 的 Shop Kit](https://canvaswp.com/zh-hans/compare/kadence/) 包含在其 Pro 和 Elite 套餐中，[Elementor 的 WooCommerce 小工具](https://canvaswp.com/zh-hans/compare/elementor/) 从 Advanced Solo 套餐开始提供，OceanWP 则将 [Ocean eCommerce Pro](https://canvaswp.com/zh-hans/compare/oceanwp/) 作为独立产品出售。 **Canvas 不能为商店做什么？** Canvas 不承担交易功能。支付与税费、运费费率、订阅、预订、会员以及 CRM：这些全部由 WooCommerce 及其扩展负责。Canvas 负责设计商店、商品页面、购物车和结账页面，但不介入涉及资金的环节。这也是日后更换主题不会影响订单的原因。 **一个许可证可用于多少个网站？** 每个 Canvas 许可证均可用于不限数量的网站与多站点网络。年付方案每年 US$79，终身方案一次性 US$299。各套餐的区别仅在于计费方式、更新和 AI 点数，而非功能，因此单店铺许可证与代理机构许可证附带的区块完全相同。 ## 继续探索 ### [搭建 WooCommerce 商店](https://canvaswp.com/zh-hans/guides/start-a-woocommerce-store-with-wordpress/) 分步指南：安装插件、添加商品、设计店铺、商品页面、购物车和结账页面。 ### [餐厅网站](https://canvaswp.com/zh-hans/wordpress-themes/restaurant/) 菜单项与预订功能，以及葡萄酒演示站点：一家酒庄通过同样的商店区块销售酒瓶。 ### [所有行业](https://canvaswp.com/zh-hans/wordpress-themes/) 全部 88 个演示站点，按其所针对的业务类型分组。