10亿+海关交易数据，1.2亿企业数据，2亿+企业联系人数据，1000千万真实采购商。覆盖200+个国家及地区，95%外贸重点拓展市场，可根据行业、经营范围等多方位挖掘目标客户。
免费试用通常，客户可从下拉菜单中选择多属性。您可能希望您的客户能够通过点击多属性图片来选择产品多属性。
若要通过点击多属性图片来选择产品多属性，请执行以下操作：
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 文件。
在文件底部，粘贴以下代码：
印度尼西亚
越南
印度
菲律宾
土耳其
美国
墨西哥
加拿大
危地马拉
歌诗达黎加
阿根廷
巴西
智利
哥伦比亚
秘鲁
俄罗斯
乌克兰
法国
德国
意大利
埃塞俄比亚
乌干达
博茨瓦纳
加纳
肯尼亚
澳大利亚
新西兰
斐济
维尔京群岛
关岛
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(), ); }点击保存。
提示：此自定义设置并非适用于所有模板。如果不适用于您的模板，您可以聘请 Shopify 专家来帮助您实现此解决方案。
Shopify商户官网原文详情：
Select variants by clicking their images
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.
To select product variants by clicking a variant image:
PC：
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
Open the
theme.jsortheme.js.liquidfile in your Assets folder.iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
Open the
theme.jsortheme.js.liquidfile in your Assets folder.Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
Open the
theme.jsortheme.js.liquidfile in your Assets folder.
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(), ); }Click Save.
文章内容来源：Shopify商户官方网站
（本文内容根据网络资料整理和来自用户投稿，出于传递更多信息之目的，不代表本站其观点和立场。本站不具备任何原创保护和所有权，也不对其真实性、可靠性承担任何法律责任，特此声明！）
您可以在您的Shopify商店中使用多属性功能来允许顾客选择产品的不同选项和配置,比如尺寸、颜色和样式。您需要先在产品编辑页面的“选择”选项卡中添加多属性,然后指定每个属性的选项。完成后,顾客将能够在购买过程中点击和选择他们喜欢的属性选项。
点击图片可以选择多属性吗?是的,Shopify允许您通过产品图片来设置多属性选择。您可以上传带有不同属性的产品图片,并将它们链接到相关的属性选项。这样顾客就可以点击图片来选择他们喜欢的多属性配置了。这可以帮助顾客更直接地查看不同属性下产品的实际 appearances。
如何设置图片多属性?设置图片多属性需要以下步骤:1. 在产品编辑页面上传带有各属性图片的图片;2. 在“选择”标签下添加对应属性和选项;3. 将属性选项链接到相关图片;4. 保存设置。完成后,当顾客查看产品时就会看到带有图片的多属性选项,他可以随意点击选择喜欢的配置了。这可以带来更好的用户体验。
