隱藏售罄多屬性

• 找到您的模板架構(gòu)版本

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

您可以通過在產(chǎn)品頁面上刪除或禁用售罄的多屬性來阻止客戶選擇這些多屬性。

本頁相關(guān)主題

• 限制

• 選擇您的模板

限制

此頁面中概述的自定義設(shè)置不適用于以下情況：

• 您的產(chǎn)品有多個產(chǎn)品選項

• 您使用 Express 模板，并將產(chǎn)品頁面設(shè)置為以疊加方式顯示

分區(qū)模板和未分區(qū)模板

備注：本教程的步驟將根據(jù)您使用的是分區(qū)模板還是未分區(qū)模板而有所不同。分區(qū)模板支持通過拖放來安排主頁的布局，未分區(qū)模板則不支持。

如果想了解您的模板是否支持分區(qū)，請轉(zhuǎn)到模板的編輯代碼頁面。如果 Sections 目錄中有文件，您則正在使用已分區(qū)模板。未分區(qū)模板是在 2016 年 10 月之前發(fā)布的，并且 Sections 目錄中沒有文件。

如果您使用已分區(qū)模板，請點擊 Sectioned themes（已分區(qū)模板）按鈕并按照說明進行操作。如果您使用較舊的未分區(qū)模板，請點擊 Non-sectioned themes（未分區(qū)模板）按鈕并按照說明進行操作。

• Sectioned themes

• Non-sectioned themes

選擇您的模板

此自定義的步驟因您的模板而異。點擊模板的按鈕，然后按照以下說明操作：

• Boundless

• Brooklyn

• Debut

• Express

• Minimal

• Narrative

• Simple

• Supply

• Venture

Boundless

此自定義設(shè)置的步驟取決于您是希望完全隱藏售罄的多屬性，還是只想將其禁用。點擊偏好設(shè)置按鈕，然后按照以下說明操作：

• Disable

隱藏售罄多屬性

按照以下步驟將自定義項應(yīng)用于 Boundless：

PC：

1. 在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模板。

2. 找到要編輯的模板，然后點擊操作 > 編輯代碼。

1. 在 Assets 目錄中，點擊 theme.js 或 theme.js.liquid。

蘋果系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分中，輕觸在線商店。

3. 輕觸 Manage themes（管理模板）。

4. 找到要編輯的模板，然后點擊操作 > 編輯代碼。

1. 在 Assets 目錄中，點擊 theme.js 或 theme.js.liquid。

安卓系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分中，輕觸。

3. 輕觸 Manage themes（管理模板）。

4. 找到要編輯的模板，然后點擊操作 > 編輯代碼。

1. 在 Assets 目錄中，點擊 theme.js 或 theme.js.liquid。

1. 在文件底部，粘貼以下代碼：

document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id`^`=ProductJson-');   if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       const current = productJson[i];       const sectionId = current.id.replace('ProductJson-', '');       const section = document.querySelector('[data-section- + sectionId + '"]');       const product = JSON.parse(current.text);       if (product.options.length === 1) {         const unavailableVariants = [];         for (let j = 0; j < product.variants.length; j++) {           const variant = product.variants[j];           if (!variant.available) {             unavailableVariants.push(variant);           }         }         if (unavailableVariants.length > 0) {           const mutationCallback = function() {             const variantOptions = section.querySelectorAll('.single-option-selector option');             if (variantOptions.length > 0) {               for (let k = 0; k < unavailableVariants.length; k++) {                 const unavailableVariant = unavailableVariants[k];                 for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];                   if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }               if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }           const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');           mutationCallback();           if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };             if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }             observer.observe(addToCartForm, config);           }         }       }     }   } });

1. 點擊保存。

Hide sold-out variants

.

On this page

• Limitations

• Select your theme

Limitations

The customizations outlined on this page do not work for the following cases:

• Your products have more than one product option

• You use the Express theme and have the product page set to show products in an overlay

Sectioned and non-sectioned themes

.

1. In the Assets directory, click theme.js or theme.js.liquid.

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. In the Assets directory, click theme.js or theme.js.liquid.

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. In the Assets directory, click theme.js or theme.js.liquid.

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

   document.addEventListener('DOMContentLoaded', function() {   const productJson = document.querySelectorAll('[id^=ProductJson-');if (productJson.length > 0) {     for (let i = 0; i < productJson.length; i++) {       const current = productJson[i];       const sectionId = current.id.replace('ProductJson-', '');       const section = document.querySelector('[data-section- + sectionId + '"]');       const product = JSON.parse(current.text);if (product.options.length === 1) {         const unavailableVariants = [];for (let j = 0; j < product.variants.length; j++) {           const variant = product.variants[j];if (!variant.available) {             unavailableVariants.push(variant);           }         }if (unavailableVariants.length > 0) {           const mutationCallback = function() {             const variantOptions = section.querySelectorAll('.single-option-selector option');if (variantOptions.length > 0) {               for (let k = 0; k < unavailableVariants.length; k++) {                 const unavailableVariant = unavailableVariants[k];for (let l = 0; l < variantOptions.length; l++) {                   const option = variantOptions[l];if (unavailableVariant.title === option.value) {                     option.remove();                   }                 }               }if (typeof observer === 'object' && typeof observer.disconnect === 'function') {                 observer.disconnect();               }             }           }const observer = new MutationObserver(mutationCallback);           const addToCartForm = document.querySelector('form[action*="/cart/add"]');mutationCallback();if (window.MutationObserver && addToCartForm.length) {             const config = { childList: true, subtree: true };if (typeof observer === 'object' && typeof observer.disconnect === 'function') {               observer.disconnect();             }observer.observe(addToCartForm, config);           }         }       }     }   } });

2. Click Save.

特別聲明：以上文章內(nèi)容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。