如何在Shopify平台仅显示选中的商品变体图片？

方法一：利用Shopify自带功能（无需代码） #

• 给每个变体绑定对应图片：进入商品编辑页，找到每个变体的「图片」选项，选择该变体专属的图片并保存。
• 确认主题支持变体图片切换：Dawn、Refresh等官方默认主题，只要完成变体-图片绑定，顾客选择变体时会自动切换主图和缩略图，仅展示当前变体的关联图片。如果是旧主题或自定义主题不支持，再考虑代码修改。

方法二：代码自定义适配（适合有开发能力的用户） #

核心逻辑 #

通过监听变体选择事件，筛选出当前选中变体的关联图片，替换页面上的缩略图区域内容。

具体步骤 #

1. 找到主题的产品相关模板文件，通常是main-product.liquid、product-template.liquid或product-form.liquid。
2. 确保前端能获取产品变体与图片的关联数据：Shopify产品对象中，每个变体的featured_image属性就是绑定的主图，若要关联多张图，可给图片添加与变体匹配的标签（比如变体SKU）。
3. 添加JavaScript逻辑（示例代码，需根据主题结构调整）：

// 获取页面元素
const variantSelectors = document.querySelectorAll('.variant-selector'); // 替换为你主题的变体选择器类名
const thumbnailContainer = document.querySelector('.product-thumbnails'); // 替换为缩略图容器类名
const mainImage = document.querySelector('.product-main-image'); // 替换为主图元素类名

// 全局产品数据（多数主题会将product对象挂载到window）
const productData = window.product;

// 更新缩略图和主图的函数
function updateVariantImages(selectedVariant) {
  // 清空现有缩略图
  thumbnailContainer.innerHTML = '';
  
  // 筛选当前变体的关联图片：这里用变体ID匹配图片的关联变体
  const matchedImages = productData.images.filter(img => img.variants.includes(selectedVariant.id));
  
  // 生成新的缩略图
  matchedImages.forEach(img => {
    const thumbnail = document.createElement('img');
    thumbnail.src = img.src;
    thumbnail.alt = img.alt;
    thumbnail.classList.add('product-thumbnail');
    thumbnailContainer.appendChild(thumbnail);
  });
  
  // 更新主图
  mainImage.src = selectedVariant.featured_image.src;
}

// 监听变体选择变化
variantSelectors.forEach(selector => {
  selector.addEventListener('change', () => {
    const variantId = parseInt(selector.value);
    const selectedVariant = productData.variants.find(v => v.id === variantId);
    if (selectedVariant) updateVariantImages(selectedVariant);
  });
});

// 页面加载时初始化默认变体图片
document.addEventListener('DOMContentLoaded', () => {
  const defaultVariant = productData.selected_or_first_available_variant;
  updateVariantImages(defaultVariant);
});

4. 保存文件并预览测试，根据主题实际的DOM结构调整选择器和变量名。

补充：多图关联变体的技巧 #

如果一个变体需要绑定多张图片，可在商品编辑页给这些图片添加统一标签（比如变体的SKU或名称），然后修改代码中的筛选逻辑：

// 用图片标签匹配变体SKU
const matchedImages = productData.images.filter(img => img.tags.includes(selectedVariant.sku));

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