Big Cartel Luna主题如何将产品图片从正方形改为长方形

操作步骤 #

• 进入Big Cartel后台，点击「设计」→「自定义设计」→「代码」选项卡，找到主题主样式文件，一般为styles.css，存放在assets目录下。
• 定位到产品图片相关的默认样式规则，新版Luna默认通过aspect-ratio: 1/1属性强制产品图为正方形，直接替换为以下规则：

/* 适配产品列表页展示 */
.product-list .product-card img {
  aspect-ratio: 223 / 330;
  width: 223px;
  height: 330px;
  object-fit: cover;
}
/* 如需同步调整产品详情页主图尺寸，新增以下规则 */
.product-detail .primary-image img {
  aspect-ratio: 223 / 330;
  width: 223px;
  height: 330px;
  object-fit: cover;
}

• 若上述代码不生效，可在店铺前台右键产品图片选择「检查」，确认图片对应的实际类名，替换代码中的选择器即可。
• 修改完成后点击保存，刷新前台页面确认效果。若存在移动端适配异常，可额外添加媒体查询规则调整移动端的展示尺寸。

注意事项 #

• 建议同步替换所有产品原图为223×330比例的素材，避免object-fit: cover属性自动裁剪掉产品的关键展示区域。
• 若后续主题推送官方更新，需要重新添加上述自定义样式，避免更新后配置被覆盖。

内容的提问来源于stack exchange，提问作者Cecilia Brøgger