通过点击多属性的图片来选择多属性备注如果您使用Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅Support

目录

• 答案
• 文章目录
• shopify商店点击多属性的图片来选择多属性步骤详细回答

shopify商店点击多属性的图片来选择多属性步骤详细回答

通过点击多属性的图片来选择多属性

备注

如果您使用 Shopify 的免费模板，您可以联系 Shopify 支持团队获得关于此教程的帮助。此教程需要 15 分钟的设计时间。若要了解详情，请参阅 Support for themes。

备注

此自定义用于复古 Shopify 模板，不适用于“Online Store 2.0”模板。

• 找到您的模板架构版本

• 探索“Online Store 2.0”模板自定义

通常，客户可从下拉菜单中选择多属性。您可能希望您的客户能够通过点击多属性图片来选择产品多属性。

注意

• 此解决方案不适用于 Boundless、Express 或 Narrative 模板。如果您使用 Brooklyn 模板，此解决方案将正常工作，但您需要将产品页面上的选择器类型设置为下拉菜单。

• 要想此解决方案正常工作，每张多属性图片必须是唯一的。

• 选中具有图片的多属性时，大多数模板会更新主图片。但是，更新绝不会双向进行，因为更改主图片会自动更新多属性选项，这会使购物者感到困惑，导致将错误的多属性添加到购物车。因此，请谨慎将此自定义设置应用于您的商店。

若要通过点击多属性图片来选择产品多属性，请执行以下操作：

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 文件夹中打开 theme.js 或 theme.js.liquid 文件。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 文件夹中打开 theme.js 或 theme.js.liquid 文件。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分中，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 找到要编辑的模板，然后点击操作 > 编辑代码。

1. 在 Assets 文件夹中打开 theme.js 或 theme.js.liquid 文件。

1. 在文件底部，粘贴以下代码：

const selectVariantByClickingImage = {   // Create variant images from productJson object   _createVariantImage: function (product) {     const variantImageObject = {};     product.variants.forEach((variant) => {       if (         typeof variant.featured_image !== 'undefined' &&         variant.featured_image !== null       ) {         const variantImage = variant.featured_image.src           .split('?')[0]           .replace(/http(s)?:/, '');         variantImageObject[variantImage] =           variantImageObject[variantImage] || {};         product.options.forEach((option, index) => {           const optionValue = variant.options[index];           const optionKey = `option-${index}`;           if (             typeof variantImageObject[variantImage][optionKey] === 'undefined'           ) {             variantImageObject[variantImage][optionKey] = optionValue;           } else {             const oldValue = variantImageObject[variantImage][optionKey];             if (oldValue !== null && oldValue !== optionValue) {               variantImageObject[variantImage][optionKey] = null;             }           }         });       }     });     return variantImageObject;   },   _updateVariant: function (event, id, product, variantImages) {     const arrImage = event.target.src       .split('?')[0]       .replace(/http(s)?:/, '')       .split('.');     const strExtention = arrImage.pop();     const strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/, '');     const strNewImage = `${arrImage.join('.')}.${strRemaining}.${strExtention}`;     if (typeof variantImages[strNewImage] !== 'undefined') {       product.variants.forEach((option, index) => {         const optionValue = variantImages[strNewImage][`option-${index}`];         if (optionValue !== null && optionValue !== undefined) {           const selects = document.querySelectorAll('#'+ id + ' [class*=single-option-selector]');           const options = selects[index].options;           for (let option, n = 0; (option = options[n]); n += 1) {             if (option.value === optionValue) {               selects[index].selectedIndex = n;               selects[index].dispatchEvent(new Event('change'));               break;             }           }         }       });     }   },   _selectVariant: function() {     const productJson = document.querySelectorAll('[id^=ProductJson-');     if (productJson.length > 0) {       productJson.forEach((product) => {         const sectionId = product.id.replace("ProductJson-", "shopify-section-");         const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');         if (thumbnails.length > 1) {           const productObject = JSON.parse(product.innerHTML);           const variantImages = this._createVariantImage(productObject);           // need to check variants > 1           if (productObject.variants.length > 1) {             thumbnails.forEach((thumbnail) => {               thumbnail.addEventListener('click', (e) =>                 this._updateVariant(e, sectionId, productObject, variantImages),               );             });           }         }       });     }   }, }; if (document.readyState !== 'loading') {   selectVariantByClickingImage._selectVariant(); } else {   document.addEventListener(     'DOMContentLoaded',     selectVariantByClickingImage._selectVariant(),   ); }

1. 点击保存。

提示：此自定义设置并非适用于所有模板。如果不适用于您的模板，您可以聘请 Shopify 专家来帮助您实现此解决方案。

Shopify商户官网原文详情：

Select variants by clicking their images

Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

Normally, variants are selected from a drop-down menu. You might want your customers to be able to select a product variant by clicking a variant image.

Caution

• This solution will not work in the themes Boundless, Express or Narrative. If you use the Brooklyn theme, the solution will work, but you will need to set the picker type to dropdown on your product page.

• Each variant image must be unique for this solution to work.

• Most themes update the main image when a variant with an image is selected. The update never happens in both directions though, because having a change of the main image automatically update a variant selection might confuse shoppers into adding the wrong variant to the cart. So, proceed with caution in applying this customization to your store.

To select product variants by clicking a variant image:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. Open the theme.js or theme.js.liquid file in your Assets folder.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. Open the theme.js or theme.js.liquid file in your Assets folder.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. Open the theme.js or theme.js.liquid file in your Assets folder.

1. At the bottom of the file, paste the following code:

   const selectVariantByClickingImage = {   // Create variant images from productJson object   _createVariantImage: function (product) {     const variantImageObject = {};     product.variants.forEach((variant) => {       if (         typeof variant.featured_image !== 'undefined' &&         variant.featured_image !== null       ) {         const variantImage = variant.featured_image.src           .split('?')[0]           .replace(/http(s)?:/, '');         variantImageObject[variantImage] =           variantImageObject[variantImage] || {};         product.options.forEach((option, index) => {           const optionValue = variant.options[index];           const optionKey = `option-${index}`;           if (             typeof variantImageObject[variantImage][optionKey] === 'undefined'           ) {             variantImageObject[variantImage][optionKey] = optionValue;           } else {             const oldValue = variantImageObject[variantImage][optionKey];             if (oldValue !== null && oldValue !== optionValue) {               variantImageObject[variantImage][optionKey] = null;             }           }         });       }     });     return variantImageObject;   },   _updateVariant: function (event, id, product, variantImages) {     const arrImage = event.target.src       .split('?')[0]       .replace(/http(s)?:/, '')       .split('.');     const strExtention = arrImage.pop();     const strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/, '');     const strNewImage = `${arrImage.join('.')}.${strRemaining}.${strExtention}`;     if (typeof variantImages[strNewImage] !== 'undefined') {       product.variants.forEach((option, index) => {         const optionValue = variantImages[strNewImage][`option-${index}`];         if (optionValue !== null && optionValue !== undefined) {           const selects = document.querySelectorAll('#'+ id + ' [class*=single-option-selector]');           const options = selects[index].options;           for (let option, n = 0; (option = options[n]); n += 1) {             if (option.value === optionValue) {               selects[index].selectedIndex = n;               selects[index].dispatchEvent(new Event('change'));               break;             }           }         }       });     }   },   _selectVariant: function() {     const productJson = document.querySelectorAll('[id^=ProductJson-');     if (productJson.length > 0) {       productJson.forEach((product) => {         const sectionId = product.id.replace("ProductJson-", "shopify-section-");         const thumbnails = document.querySelectorAll('#'+ sectionId + ' img[src*="/products/"]');         if (thumbnails.length > 1) {           const productObject = JSON.parse(product.innerHTML);           const variantImages = this._createVariantImage(productObject);           // need to check variants > 1           if (productObject.variants.length > 1) {             thumbnails.forEach((thumbnail) => {               thumbnail.addEventListener('click', (e) =>                 this._updateVariant(e, sectionId, productObject, variantImages),               );             });           }         }       });     }   }, }; if (document.readyState !== 'loading') {   selectVariantByClickingImage._selectVariant(); } else {   document.addEventListener(     'DOMContentLoaded',     selectVariantByClickingImage._selectVariant(),   ); }

2. Click Save.

Tip

This customization will not work with all themes. If it does not work with your theme, you can hire a Shopify Expert to help implement this solution for you.

文章内容来源：Shopify商户官方网站