Shopware6商品详情页主图下方缩略图200px宽度设置方法

核心原则：禁止直接修改核心源码、默认主题源码，优先使用自定义子主题覆写的方式实现，避免版本升级丢失改动。

具体操作步骤 #

• 前置准备：在后台「扩展>主题」中创建基于默认Storefront的自定义子主题，激活并设置为店铺当前使用的默认主题。
• 第一步：优先通过主题配置覆写画廊参数。打开子主题目录下的theme.json文件，在config.fields节点下添加缩略图尺寸配置，直接覆盖默认的画廊缩略图宽度参数：

{
  "config": {
    "fields": {
      "sw-gallery-slider-thumbnails-width": {
        "value": "200px"
      },
      "sw-gallery-slider-thumbnails-height": {
        "value": "auto"
      }
    }
  }
}

• 第二步：兼容样式补全（适配全版本Shopware 6）。如果上述配置在你使用的版本中不生效，打开子主题的样式文件Resources/app/storefront/src/scss/base.scss，添加定向作用于商品详情页画廊的样式，不会影响其他页面的图片组件：

// 仅定向修改商品详情页主图下方的缩略图
.product-detail-gallery .gallery-slider-thumbnails .thumbnail-item {
  width: 200px !important;
  flex: 0 0 200px;
  height: auto;
  // 可根据实际展示效果调整缩略图间距
  margin: 0 6px;
}
.product-detail-gallery .gallery-slider-thumbnails .thumbnail-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

• 第三步：编译生效。开发环境可在项目根目录执行命令bin/console theme:compile重新编译主题资源；生产环境执行编译后，进入后台「缓存管理」清空全站缓存，若使用了CDN、第三方页面缓存插件，同步清空对应缓存即可看到效果。

避坑提示：不要在后台「媒体>缩略图尺寸」菜单中修改全局商品图片尺寸配置，该配置会影响全站商品列表、搜索结果、关联商品等所有调用对应尺寸的图片，无法实现仅调整详情页缩略图的需求。

校验要点 #

改完后重点检查两个交互：

1. 缩略图放大到200px后，滑块的左右切换按钮是否正常展示、点击生效
2. 选中态的缩略图边框、阴影样式是否正常，没有出现错位、裁切异常的问题

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