shopify点击多属性图片选择多属性步骤的核心内容

如果您使用多属性备注，请单击多属性图片Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support

shopify商店点击多属性图片选择多属性步骤文本

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

备注

如果您使用Shopify 免费模板，您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes。

备注

本定义用于复古 Shopify 模板不适用于 模板Online Store 2.0”模板。

找到你的模板架构版本

探索“Online Store 2.0自定义模板

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

注意

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

要想正常工作，每一张多属性图片都必须是唯一的。

当选择具有图片的多属性时，大多数模板会更新主图片。然而，更新永远不会是双向的，因为更改主图片会自动更新多属性选项，这会让购物者感到困惑，并在购物车中添加错误的多属性。因此，请小心在您的商店中设置应用程序。

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

PC：

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

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

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

苹果系统：

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

在销售渠道部分，触摸在线商店。

轻触Manage themes(管理模板)。

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

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

安卓系统：

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

在销售渠道部分，触摸在线商店。

轻触Manage themes(管理模板)。

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

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

粘贴以下代码：

constselectVariantByClickingImage={//CreatevariantimagesfromproductJsonobject_createVariantImage:function(product){constvariantImageObject={};product.variants.forEach((variant)=>{if(typeofvariant.featured_image!=='undefined'&&variant.featured_image!==null){constvariantImage=variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');variantImageObject[variantImage]=variantImageObject[variantImage]|{};product.options.forEach((option,index)=>{constoptionValue=variant.options[index];constoptionKey=`option-${index}`;if(typeofvariantImageObject[variantImage][optionKey]==='undefined'){variantImageObject[variantImage][optionKey]=optionValue;}else{constoldValue=variantImageObject[variantImage][optionKey];if(oldValue!==null&&oldValue!==optionValue){variantImageObject[variantImage][optionKey]=null;}}});}});returnvariantImageObject;},_updateVariant:function(event,id,product,variantImages){constarrImage=event.target.src.split('?')[0].replace(/http(s)?:/,'').split('.');conststrExtention=arrImage.pop();conststrRemaining=arrImage.pop().replace(/_[a-zA-Z0-9@] $/,'');conststrNewImage=`${arrImage.join('.')}.${strRemaining}.${strExtention}`;if(typeofvariantImages[strNewImage]!=='undefined'){product.variants.forEach((option,index)=>{constoptionValue=variantImages[strNewImage][`option-${index}`];if(optionValue!==null&&optionValue!==undefined){constselects=document.querySelectorAll('#' id '[class*=single-option-selector]');constoptions=selects[index].options;for(letoption,n=0;(option=options[n]);n =1){if(option.value===optionValue){selects[index].selectedIndex=n;selects[index].dispatchEvent(newEvent('change'));break;}}}});}},_selectVariant:function(){constproductJson=document.querySelectorAll('[id^=ProductJson-');if(productJson.length>0){productJson.forEach((product)=>{constsectionId=product.id.replace("ProductJson-","shopify-section-");constthumbnails=document.querySelectorAll('#' sectionId 'img[src*="/products/"]');if(thumbnails.length>1){constproductObject=JSON.parse(product.innerHTML);constvariantImages=this._createVariantImage(productObject);//needtocheckvariants>1if(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()；

点击保存。

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

Shopify商户官网原文详情:

Select variants by clicking their images

Note

If you use afree 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 toSupport 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 avariant image.

Caution

This solution will not work in the themesBoundless,ExpressorNarrative. If you use theBrooklyntheme,the solution will work,but you will need to set the picker type todropdownon 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：

From your Shopify admin,go toOnline Store>Themes.

Find the theme you want to edit,and then clickActions>Edit code.

Open thetheme.jsortheme.js.liquidfile in yourAssetsfolder.

iPhone：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

Open thetheme.jsortheme.js.liquidfile in yourAssetsfolder.

Android：

From theShopify app,tapStore.

In theSales channelssection,tapOnline Store.

TapManage themes.

Find the theme you want to edit,and then clickActions>Edit code.

Open thetheme.jsortheme.js.liquidfile in yourAssetsfolder.

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

constselectVariantByClickingImage={//CreatevariantimagesfromproductJsonobject_createVariantImage:function(product){constvariantImageObject={};product.variants.forEach((variant)=>{if(typeofvariant.featured_image!=='undefined'&&variant.featured_image!==null){constvariantImage=variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');variantImageObject[variantImage]=variantImageObject[variantImage]|{};product.options.forEach((option,index)=>{constoptionValue=variant.options[index];constoptionKey=`option-${index}`;if(typeofvariantImageObject[variantImage][optionKey]==='undefined'){variantImageObject[variantImage][optionKey]=optionValue;}else{constoldValue=variantImageObject[variantImage][optionKey];if(oldValue!==null&&oldValue!==optionValue){variantImageObject[variantImage][optionKey]=null;}}});}});returnvariantImageObject;},_updateVariant:function(event,id,product,variantImages){constarrImage=event.target.src.split('?')[0].replace(/http(s)?:/,'').split('.');conststrExtention=arrImage.pop();conststrRemaining=arrImage.pop().replace(/_[a-zA-Z0-9@] $/,'');conststrNewImage=`${arrImage.join('.')}.${strRemaining}.${strExtention}`;if(typeofvariantImages[strNewImage]!=='undefined'){product.variants.forEach((option,index)=>{constoptionValue=variantImages[strNewImage][`option-${index}`];if(optionValue!==null&&optionValue!==undefined){constselects=document.querySelectorAll('#' id '[class*=single-option-selector]');constoptions=selects[index].options;for(letoption,n=0;(option=options[n]);n =1){if(option.value===optionValue){selects[index].selectedIndex=n;selects[index].dispatchEvent(newEvent('change'));break;}}}});}},_selectVariant:function(){constproductJson=document.querySelectorAll('[id^=ProductJson-');if(productJson.length>0){productJson.forEach((product)=>{constsectionId=product.id.replace("ProductJson-","shopify-section-");constthumbnails=document.querySelectorAll('#' sectionId 'img[src*="/products/"]');if(thumbnails.length>1){constproductObject=JSON.parse(product.innerHTML);constvariantImages=this._createVariantImage(productObject);//needtocheckvariants>1if(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()；

ClickSave.

Tip

This customization will not work with all themes. If it does not work with your theme,you can hire aShopify Expertto help implement this solution for you.

文章内容来源：Shopify官家官网