Squarespace Wells模板：为不同产品页设置不同每行产品数

解决步骤： #

1. 获取目标页面的唯一ID

   • 打开页面A或页面B，右键页面空白处选择「检查」，在Elements面板中找到<body>标签，复制其中page-id-xxxxxx格式的类名（xxxxxx为页面专属ID）。

2. 添加自定义CSS代码
   进入Squarespace后台，依次点击「Design > Custom CSS」，粘贴以下代码（替换对应页面ID）：

   /* 为页面B设置每行6个产品（替换page-id后的数字为你的页面ID） */
   @media screen and (min-width: 768px) {
     .page-id-xxxxxx .product-list .product-item {
       width: 16.666% !important;
       max-width: 16.666% !important;
     }
   }
   

   • 页面A保持全局设置的每行3个产品，无需额外代码。
   • 媒体查询min-width:768px确保移动端仍保持模板默认的响应式布局，若需移动端也调整，可移除媒体查询。

为什么之前设置宽度无效？ #

• 未针对特定页面添加选择器，导致样式被全局设置覆盖；
• 缺少!important强制覆盖模板内置的优先级更高的样式；
• 选择器不够精确，Wells模板的产品项需通过.product-list .product-item定位。

内容的提问来源于stack exchange，提问作者user23407327