儘管 Shopify 並未提供隱藏不可用變體的內建功能，但您可以透過在主題中添加少量自定義代碼來實現此功能。以下是實施該解決方案的步驟：

如何在 Shopify 隱藏不可用的變體

引言

您是否曾經在瀏覽雜亂的在線商店時感到沮喪，發現仍有不可用的產品變體顯示在頁面上？作為在線零售商，您了解無縫的購物體驗對於保持顧客的參與和促進轉換至關重要。當顧客面對他們無法選擇的選項時——例如某特定顏色沒有的尺寸——這會導致困惑，甚至放棄購物車。

在電子商務的世界中，每個細節都至關重要。有效管理產品變體不僅是美學問題；它直接影響用戶體驗和銷售。本篇博客將指導您完成如何在 Shopify 隱藏不可用變體的基本步驟，確保您的客戶只看到他們可以實際購買的選項。到此篇文章結束時，您不僅會理解實施此功能的技術側面，還會意識到其在提升用戶體驗中的重要性。

我們將探索顯示不可用變體所面臨的挑戰、可用的解決方案，以及如何在您的 Shopify 主題中實施自定義代碼。此外，我們還將提供關於用戶體驗重要性的見解，以及如何妥善管理變體可以促進您的品牌成功。讓我們深入具體內容吧！

理解不可用變體的挑戰

在管理一個線上商店時，特別是當其擁有多個產品和選項時，您可能會遇到某些變體組合不存在的情況。例如，如果您銷售各種顏色和尺寸的 T 恤，您可能僅為特定顏色提供特定的尺寸。Shopify 的默認行為是顯示所有可能的變體——這包括那些不可用的變體，這對顧客來說可能是令人沮喪的。

對用戶體驗的影響

當顧客看到被灰掉或標記為不可用的選項時，這會影響他們的購物體驗。這會導致困惑，因為他們可能不明白為什麼不能選擇某些選項。一個良好組織的產品頁僅顯示可用變體可以顯著改善用戶參與度並降低跳出率。

通過隱藏不可用變體，您創建了一個更乾淨、更直觀的購物界面。這不僅增強了用戶體驗，還對您品牌的聲譽產生積極影響。

為何您應隱藏不可用變體

改善用戶體驗：顧客欣賞一個簡單明瞭的購物體驗，沒有不必要的干擾。通過僅顯示可用的變體，您簡化了決策過程。
提高轉換率：減少產品頁上的困惑可以導致更高的轉換率。當顧客看到符合他們需求的選項時，他們更可能完成購買。
增強品牌形象：一個組織良好的在線商店反映了專業和對細節的關注。這可以促進重複購買和顧客忠誠。
減少顧客詢問：通過消除關於不可用變體的困惑，您可以減少關於產品可用性的客戶服務詢問。

儘管 Shopify 沒有提供隱藏不可用變體的內建功能，但您可以通過添加少量自定義代碼來實現此功能。以下是實施此解決方案的步驟：

實施自定義代碼的分步指南

步驟 1：訪問您的 Shopify 管理面板

登入您的 Shopify 管理面板。
導航至 銷售渠道 > 在線商店 > 主題。

步驟 2：自定義您的主題

找到您想要編輯的主題並點擊 自定義。
選擇您要隱藏不可用變體的 產品模板。

步驟 3：添加自定義代碼

在 產品信息 部分，點擊 + 添加區塊，然後選擇 自定義 liquid 區塊。
將以下自定義 JavaScript 代碼複製並粘貼到 自定義 liquid 欄位中：

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];
variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

function validCombo(inputValue, optionLevel) {
    for(let i = 0; i < productJson.length; i++) {
        if(optionLevel == 1){
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) {
                return true;
            }
        } else {
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) {
                return true;
            }
        }
    }
    return false;
}

function rebuildOptions() {
    selectedOptions = fieldsets.map((fieldset) => {
        return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
    });

    for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
        const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');
        inputs.forEach(input => {
            input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
            if(pickerType == 'radios'){
                const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);
                label.style.display = (input.disabled) ? "none" : "";
            } else {
                input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
            }
        });
    }

    for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
        if(pickerType == 'radios'){
            if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
            }
        } else {
            if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
            }
        }
        if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}
</script>

點擊保存以應用更改。

步驟 4：測試更改

刷新您的產品頁以確保不可用的變體現在根據所選選項隱藏。
通過選擇不同的選項測試功能，以確認僅顯示可用的變體。

透過遵循這些步驟，您可以有效地在您的 Shopify 商店中隱藏不可用的變體，提供更乾淨、更加用戶友好的購物體驗。

替代解決方案

如果您不想處理代碼，還有其他方法可以管理不可用變體：

1. 使用第三方應用程序

有多個 Shopify 應用程序可以幫助您管理產品變體並隱藏缺貨項目。一些受歡迎的選擇包括：

缺貨警察：此應用程序允許您完全隱藏缺貨產品及其變體，或僅在集合頁上將其推到下方。
王者產品選項：此應用程序利用條件邏輯來管理和顯示基於可用性的產品選項。

2. 修改庫存設置

如果您想要一個簡單的方式，您可以手動調整每個變體的庫存設置：

轉到您的 Shopify 管理面板。
導航至產品並選擇該項目。
在變體部分，取消選擇缺貨時繼續銷售的選項，並將庫存數量設置為零。

不過，請記住，這種方法會完全將產品從可見範圍移除，可能對所有商店擁有者來說都不理想。

用戶體驗在電子商務中的重要性

創建最佳的用戶體驗超越了僅僅隱藏不可用變體。它涵蓋了您在線商店的所有方面，從設計到功能。一個設計良好的用戶體驗可以導致顧客滿意度提高、忠誠度增強，最終實現更高的銷售。

與專家的合作

在 Praella，我們專注於用戶體驗和設計，提供針對您的特定需求量身定制的數據驅動解決方案。我們的團隊可以幫助您為顧客創造難忘的品牌體驗。無論您需要網站開發還是戰略諮詢，我們都在這裡為您提供指導，助您邁向指數增長。請查看我們的服務以了解更多 Praella 解決方案。

結論

在電子商務的競爭市場中，以有組織和用戶友好的方式展示您的產品可以使您的商店從其他商店中脫穎而出。在 Shopify 隱藏不可用變體不僅增強了產品頁的美學吸引力，還顯著改善了顧客的整體購物體驗。

通過遵循本篇博客中概述的步驟，您可以確保您的顧客只看到可行的選項，這反過來可以導致轉換率和顧客滿意度的提高。請記住，在在線零售的世界中，每個細節都很重要。

如果您希望進一步提升您的 Shopify 商店或需要自定義解決方案的幫助，請考慮尋求專業協助。讓我們一起探索您的業務如何受益於戰略規劃、網頁開發和卓越的設計服務。

常見問題解答

Q1：我可以在不編碼的情況下隱藏不可用的變體嗎？

是的，您可以使用像缺貨警察或王者產品選項等第三方應用程序來管理和隱藏不可用的變體，而無需編碼。

Q2：如果我不小心隱藏了太多變體該怎麼辦？

如果您發現隱藏了太多變體，您可以通過刪除自定義代碼或調整庫存管理中的設置輕鬆恢復更改。

Q3：隱藏不可用變體會影響我的 SEO 嗎？

如果做得正確，隱藏不可用變體不應對您的 SEO 產生負面影響。確保您商店的內容保持相關並對搜索引擎可訪問。

Q4：我該如何改善我 Shopify 商店的整體用戶體驗？

改善用戶體驗涉及優化您網站的設計、確保快速加載時間、簡化導航並提供清晰的產品信息。考慮諮詢專業人士如 Praella 來提升這些方面。

Q5：還有哪些其他功能可以實施以提升銷售？

考慮引入顧客評論、願望清單或產品推薦等功能。這些都可以增強用戶參與度，提升更高的轉換率。

融入這些策略不僅能提升您 Shopify 商店的效率，還會為顧客提供更愉快的購物體驗。

如何在 Shopify 隱藏不可用的變體.

目錄

引言