凡客诚品网站设计拆解：服装独立站能复刻的 6 条做法

服装商品页该有的字段可以压到很少几项，顺序排好，商品页基本就能用。你照着这个顺序在WordPress上排一遍，商品页基本就能用。配色、字体、代码，一样都不用抄。

做服装独立站的人翻这个题，多数是想找一个现成的版式参考。版式能借，标准借不到。结构可以看别人怎么排，页面上的每个决定要有自己的依据，不然改完不知道好在哪、坏在哪。

• 凡客诚品网站设计是观察性拆解，不是平台规范，也不是行业标准。
• 能复刻的是结构：导航层级、商品页字段、列表到结算的路径。
• 复刻之前先在自己站上量出转化基线，改完才有对比。
• 照抄页面代码或扒别人的模板有侵权风险，只借思路。
• 下面给 6 条能落地的做法，加 4 条最容易抄错的地方。

这篇讲的是把这套结构在WordPress上落成模板、模板部件和theme.json的具体步骤，以及每一步出问题先查哪里。站还没搭起来的，先看独立站搭建和运营。

凡客诚品网站设计到底是什么：能照着做的和只能当参考的

它是一个具体电商站的观察性拆解。你能在页面上看到的东西，是导航有几层、列表页怎么进商品页、商品页上有哪几个字段、结算要走几步。这些是观察结果，可以拿来对比自己的站，不是谁定下来的规范。

凡客内部为什么这么排、当年改版想解决什么问题、改完转化有没有变，这些从页面上看不出来。拿不到的部分就别当因果用。你可以记录它的导航分了几层，不能拿层级多少去推销量好坏。

判断一条拆解能不能用，就问一句：这条结论在我自己站上能不能被试出来。能试的留下，不能试的当背景。「商品页第一屏放尺码」这种能试，「它靠这个设计建立了信任」这种试不了，写进方案里也没法验收。

落到工具上，能承接这套结构的是WordPress的模板系统。区块主题从WordPress 5.9起可用，主要由HTML和主题配置文件构成，完全由区块组成，可以在站点编辑器里编辑站点的所有部分。模板是可复用的文件，用来生成页面的文档结构，模板加载器决定某个地址加载哪个模板文件。你拆出来的每一层页面，最后都要对应到一个模板文件上去。

商品页走到结算这一段，字段和步骤的排法比视觉重要得多，这段路径怎么设计，商品页到结算路径设计里有更细的拆法。

先拆信息架构：导航层级和栏目怎么分

动作很简单，拿一张纸画四层：首页、列表页、商品页、结算页。每一层写清楚它要解决什么，首页负责分流，列表负责筛选，商品页负责说服，结算负责收钱。画完对着凡客式的简洁导航看，哪一层是多余的。

服装类目SKU多，层级一多，从列表进商品页的点击就多，少一层就是少一次流失的机会。这条不用数据也能判断，你把自己当买家走一遍就知道。

这张图在WordPress里不是画着看的，它直接对应模板文件。区块主题里index.html是唯一必需的模板文件，其他模板都可以没有。首页由front-page.html承接，这个模板始终优先，跟后台「首页显示」的设置无关，设置影响的只是层级里更靠下的模板。

页面走page.html这一层，文章走single.html这一层。完整的页面层级是自定义模板、page-{post_name}.html、page-{post_id}.html、page.html、index.html，逐级往下找。你画图时写的「商品页」，最后落到的是WooCommerce提供的商品模板，或者你自己建的自定义模板。

出问题怎么回查：某个页面进不去，或者改了模板不生效，先按层级从下往上对一遍文件名。自定义模板、带slug的模板、通用模板、index.html，看实际加载的是哪一个。WordPress查模板的顺序是先找数据库里wp_template下用户建的模板，再找子主题的/templates目录，最后找主题的/templates目录。数据库里存着一份旧的，主题里改十遍也不生效。

商品详情页设计：字段按什么顺序排

先列字段清单，不要先想样式。服装商品页基本就这几项：主图和细节图、价格、尺码、材质与洗护、库存、加购按钮。清单列完再排顺序，顺序决定加购之前买家要滚几屏。

排完不要凭想象验收。WooCommerce自带示例数据，官方给的路径是通过WordPress导入器导入sample_products.xml，导入完就能看到商品在真实主题下的渲染。官方说商品页可以用模块化产品区块在几分钟内自定义，这句话的前提是你有真实商品数据在跑，空页面看不出问题。

加购按钮之前的信息，少一项就多一次放弃。尺码和库存尤其如此，这两项是服装类目最直接的两个卡点。

出问题怎么回查：商店页或分类页在更新后出错，先按WooCommerce官方的处置去设置里的固定链接点保存，刷新一遍固定链接；还错再查主题兼容，官方推荐用Health Check做冲突测试，它可以在不影响访客的情况下禁用主题和插件，或者用暂存站排查。更新WooCommerce之前先备份站点，官方也是这么建议的。

视觉风格只借三条：留白、字号层级、一致性

干净来自克制，不是模块堆得多。能借的就三条：留白够、字号层级少、全站一致。

留白在WordPress里由版心控制。theme.json放在主题目录根部，官方把它定位成统一样式相关接口的单一入口，区块编辑器的设置、默认颜色与字号、编辑器默认布局都在这里定义。默认布局参数是contentSize 800px、wideSize 1000px，也就是正文区800px、宽版1000px，宽版比正文宽200px。这个差值决定了你能不能在正文里插一张不憋屈的图。

字号层级只留三档，大标题、小标题、正文。档位一多，页面就开始花。间距也一样，theme.json的间距刻度默认是steps 7、increment 1.5、unit rem，一共七档。七档已经够用，别再自己加。

一致性怎么落地，全站的颜色、字号、间距只从theme.json出，不要在单个页面里手改。这块的具体步骤写在全站一致性落地步骤里。

回查：改了theme.json没生效，先确认两件事，文件在不在主题根目录，名字对不对。再确认优先级，官方写明theme.json里只要有设置，就优先于通过add_theme_support声明的值。你以前在functions.php里加的那套设置现在被盖掉了，改错地方当然没反应。

转化路径怎么落地：从列表到结算的六步

这段是能照着做的部分。按顺序走，每一步后面写出问题先查什么。

1. 装WooCommerce。后台「插件」菜单点「添加新」，搜索WooCommerce，点「立即安装」。装完先别急着上商品，去前台点一下商店页。出错就去设置里的固定链接点保存。
2. 导示例商品。用WordPress导入器导入sample_products.xml，看商品在列表页和商品页怎么渲染。这一步是为了在动真实数据之前先把版式问题暴露出来。导入后前台看不到商品，先确认商品是已发布状态，再刷一次固定链接。
3. 定商品页模板。你要的是单个商品的模板，属于自定义模板的适用范围，官方写明这类模板只用于单篇文章、单页或自定义文章类型模板。在主题/templates目录建同名html文件，再到theme.json的customTemplates里登记name、title、postTypes。postTypes不填默认就是page。
4. 注册模板部件。页头和页脚在theme.json的templateParts里登记，每项三个键：area、name、title。area的默认选项是header、footer、uncategorized。部件文件放在主题的/parts目录，WordPress也认/template-parts目录。官方说注册有明确好处，标题可翻译、可分配区域、跟插件和子主题配合更好。
5. 在模板里引入。用Template Part区块，标记是wp:template-part加slug。这一步不能省，官方写得很清楚，光建文件加注册，部件不会自己出现在站点上，必须在模板里引。
6. 走一遍加购到结算。用刚导入的示例商品，从列表页点进商品页，选尺码，加购，进结算。哪一步卡住就把那一步记下来，那就是你的字段顺序和模板要改的地方。

第三步和第五步的错最容易混。模板在后台的模板选择器里能看到，说明注册成功了；前台没变化，多半是没在模板里引。

改完怎么知道有没有变好，得先有基线。用GA4把加购率、结算完成率这些数记下来，改一次对一次，方法在GA4量出转化基线里。没有基线，改完只能凭感觉说「好像顺了点」。

数字和限制：复刻前要对的几个数

theme.json的版本和默认版心是起点，你在它上面改，不用从零设。WooCommerce的最低PHP 7.4是底线，推荐8.0，服务器低于这个数装上了也跑不稳。内存256MB是推荐值，低于这个数导入示例商品可能中途断掉。24小时是工单响应目标，不是问题解决时间。

还有一条会影响你选主题：WooCommerce官方说它能跟任何主题配合，但可能需要额外样式，想要深度集成的主题官方推荐Storefront。你要复刻的是结构，一个干净的区块主题就能承接，不必为了「像凡客」去换主题。

常见误区：这四条最容易抄错

最要命的一条，以为theme.json能给任何区块开功能。现象是在设置里加了一项开关，前台毫无变化。原因是区块本身没实现那个功能，主题开不了，官方拿首字下沉举例，区块没实现它，主题就没办法通过theme.json为它启用。回查顺序是先看这个区块支持哪些设置，再回来改theme.json。

还有个事，注册了模板部件就以为会自动出现。现象是theme.json写完整了，前台还是没页头。原因是部件必须在模板里用Template Part区块引入。回查顺序是打开「外观 > 编辑器 > 模板」，选对应模板，看里面有没有那一段引入。

第三条，注册了模板名却没有同名html文件。现象是模板选择器里能选，选中后页面空白或者报错。原因官方写得很直白，注册一个叫example的模板，主题里就必须有/templates/example.html；部件同理，注册叫example就必须有/parts/example.html。回查顺序是照着目录把文件数一遍，名字大小写都对上。

对了，更新后商店页出错不刷固定链接。现象是更新WooCommerce之后商店页和分类页错乱，有人会以为是主题坏了，跑去换主题。原因是固定链接没刷新，官方给的处置就是去固定链接设置点保存。回查顺序是先刷固定链接，再看问题是不是出现在更新主题或插件之后，那可能是兼容问题，用Health Check或暂存站做冲突测试。

页面改完还要看加载表现，Core Web Vitals三项指标怎么量，写在Core Web Vitals 三项指标里。

动手顺序：一个服装独立站照这 6 条改，哪一步先动

顺序是先导示例商品，再定字段顺序，最后调版心。这个顺序的好处是返工少。

第一步导示例商品，因为它是唯一能在不碰真实数据的前提下看到完整渲染的素材。列表页、商品页、购物车、结算，一次全亮出来。你先看到渲染，才知道主题哪里缺样式、哪些区块没被支持。

第二步定字段顺序。字段定下来，你才知道商品页要多宽、图要几列、尺码表放哪。这一步没定就调版心，等于给一个还没定内容的盒子选尺寸，选完还得改。

第三步调版心，改theme.json的contentSize和wideSize。这时候前面的结构都定了，版心只影响观感，不影响流程，改错了也不会推翻前面的决定。

倒过来做会怎样：先调版心，再定字段，最后导商品。版心调完发现商品图两列放不下，字段定完发现尺码表要横排，每一步都在推翻上一步。

用 AI 帮哪几步，人要核什么

AI在这件事上做的是整理和对照，不是替你决定页面长什么样。下面三步它能接。

1. 把你对凡客早期站点的观察记录按四栏整理成表：信息架构、视觉风格、商品详情页、转化路径。它负责归类和去重，你负责删掉无法核实的条目。
2. 把整理好的清单分成「可借鉴」和「不照搬」两列，每条后面留空给你填判断依据。这一列空着就是没想清楚，别急着往下做。
3. 按WordPress官方模板层级列一份服装独立站需要哪几个模板的候选清单，你拿去对照官方文档逐条核，对不上的划掉。

三条提示词，本文给的示例，不是官方模板：

• 「下面是我对凡客诚品早期电商站的观察记录，请按信息架构、视觉风格、商品详情页、转化路径四栏整理成表格，每条只保留我原文里出现过的描述，不要补充任何我没写的内容。」
• 「把这份设计特征清单分成两列：服装独立站可以借鉴的、不建议照搬的。每列不超过 7 条，每条一句话，不要写排名效果或流量承诺。」
• 「按 WordPress 官方模板层级文档，列出服装独立站最少需要哪几个模板文件，只列文件名和用途，不要编造官方没写的规则。」

人必须亲手做的有三件。一是打开要参考的站点页面逐屏截图，标出导航层级和商品页字段，这是拆解唯一的素材来源。二是在后台「外观 > 编辑器 > 模板」里实际点开每个模板，确认模板部件真的渲染出来，再决定这条写不写进清单。三是在WooCommerce后台新建一个测试商品，走一遍加购到结算，看哪一步卡住，把卡点记下来。

整理素材、对照官方文档、出改稿单这类活，猎者出海的AI Agent里对应的是建站那一块，从空服务器到上线分十个阶段，每段一道闸门。流程它替你盯，页面上的判断还是你自己做。

常见问题

凡客诚品网站设计有官方规范可以对照吗

没有。它是早期电商站的观察性做法，能拿来对比结构和字段顺序，不能当验收标准。判断一条结论能不能用，就看它在你自己的站上能不能试出来。

服装独立站一定要用 WooCommerce 吗

不一定，但它是WordPress上跟这件事最对得上的选择。官方自述为开源电商平台，核心平台免费，店铺内容和数据归商家自己，也能导出迁到别的平台。别的插件也能做商品目录，但商品页字段和结算流程要自己接。

简洁导航要装几个插件

导航本身不需要插件，区块主题的模板和模板部件就能做。插件多装一个，就多一处样式来源，全站一致性更难保。真要装，先装WooCommerce，其余缺什么补什么。

商品页字段顺序改了，怎么知道有没有用

先有基线再改。用GA4记下加购率和结算完成率，改完对一次。要严谨一点就按A/B测试跑，六步流程在A/B测试六步流程里。

模板部件改了，前台没变化先查什么

先看模板里有没有引入。注册和建文件只是第一步，官方写明必须用Template Part区块在模板里引，部件才会出现。再查注册的名字和/parts目录下的文件名是否一致。

页面上的每个决定，最后都要落到一个能验收的动作上。导航少一层、字段提前一位、版心宽200px，这些都能在后台点出来、在前台看到。凡客那套东西能给你的就是这个起点，剩下的靠你自己的数据往回填。站点上线后哪一页先改，猎者出海的AI Agent每周会拉一遍数据给一张改稿单，顺序它排，动哪一项还是你定。