如何在Shopify中隐藏不可用变体

Q: 如何在Shopify中隐藏不可用的变体？

虽然Shopify没有提供内置功能来隐藏不可用的变体，但您可以通过向主题添加一小段自定义代码来实现此功能。以下是实现该解决方案的步骤：

介绍

您是否曾经在一个杂乱的在线商店中浏览而感到沮丧，却发现不可用的产品变体仍然显示在页面上？作为在线零售商，您明白无缝的购物体验对于保持客户参与和促进转化至关重要。当顾客面临他们不能选择的选项——例如对某种颜色没有可用的尺寸——时，这可能会导致困惑，甚至放弃购物车。

在电子商务的世界里，每个细节都很重要。高效管理产品变体不仅仅是美观问题；它直接影响用户体验和销售。本文旨在引导您了解如何在Shopify中隐藏不可用的变体，确保您的客户只看到可以实际购买的选项。通过本文，您不仅会理解实现此功能的技术细节，还会感受到它在提升用户体验方面的重要性。

我们将探讨显示不可用变体所带来的挑战，可用的解决方案，以及如何在您的Shopify主题中实现自定义代码。此外，我们还将提供有关用户体验重要性的见解，以及如何有效管理变体能够促进您的品牌成功。让我们深入具体内容吧！

理解不可用变体的挑战

在管理在线商店时，尤其是产品和选项较多时，您可能会遇到某些变体组合不存在的情况。例如，如果您出售不同颜色和尺寸的T恤，可能仅在特定颜色中提供特定尺寸。Shopify的默认行为是显示所有可能的变体——包括那些不可用的，这可能会让消费者感到沮丧。

对用户体验的影响

当顾客看到灰色或标记为不可用的选项时，这会削弱他们的购物体验。这会导致困惑，因为他们可能不明白为什么无法选择某些选项。组织良好的产品页面仅显示可用变体，可以显着提高用户参与度并降低跳出率。

通过隐藏不可用变体，您可以创建一个更清晰、更直观的购物界面。这不仅提升了用户体验，同时也积极影响您品牌的声誉。

为何您应该隐藏不可用变体

改善用户体验：顾客更喜欢直接的购物体验，没有不必要的干扰。通过仅显示可用变体，您简化了决策过程。
提高转化率：减少产品页面的混乱可以提高转化率。当顾客看到符合其需求的选项时，他们完成购买的可能性会更高。
增强品牌认知：一个组织良好的在线商店体现了专业性和对细节的关注。这可以鼓励回头客和客户忠诚度。
减少客户咨询：通过消除关于不可用变体的困惑，您可以减少关于产品可用性的客户服务咨询数量。

虽然Shopify没有提供内置功能来隐藏不可用变体，但您可以通过向主题添加一小段自定义代码来实现此功能。以下是实现该解决方案的步骤：

实施自定义代码的步骤指南

步骤1：访问您的Shopify管理面板

登录到您的Shopify管理面板。
导航到销售渠道 > 在线商店 > 主题。

步骤2：自定义您的主题

找到您要编辑的主题，点击自定义。
选择您希望隐藏不可用变体的产品模板。

步骤3：添加自定义代码

在产品信息部分，点击+ 添加模块，然后选择自定义液体模块。
将以下自定义JavaScript代码复制并粘贴到自定义液体字段中：

<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应用可以帮助您管理产品变体并隐藏缺货商品。一些热门选项包括：

缺货警察：此应用可以让您完全隐藏缺货的产品及其变体，或者仅在集合页面上将其下移。
King产品选项：此应用利用条件逻辑管理和显示基于可用性的产品选项。

2. 修改库存设置

如果您想要简单的方法，可以手动调整每个变体的库存设置：

转到您的Shopify管理面板。
导航到产品并选择项目。
在变体部分，取消选中缺货时继续销售的选项，并将库存数量设置为零。

但请注意，这种方法会完全从可见性中移除产品，这对所有商店所有者可能并不理想。

用户体验在电子商务中的重要性

创造最佳用户体验不仅仅是隐藏不可用变体。它涵盖了您在线商店所有方面，从设计到功能。良好的用户体验可以提高客户满意度，增强忠诚度，最终促进销售增长。

与专家合作

在Praella，我们专注于用户体验和设计，提供量身定制的数据驱动解决方案。我们的团队可以帮助您为客户创造难忘的品牌体验。无论您需要网站开发还是战略咨询，我们都能指导您迈向快速增长的旅程。请访问我们的服务了解更多信息 Praella Solutions。

总结

在竞争激烈的电子商务环境中，以有序、用户友好的方式展示产品可以使您的商店在众多商店中脱颖而出。在Shopify中隐藏不可用变体不仅提升了产品页面的美观性，而且显著改善了客户的整体购物体验。

通过遵循本文中概述的步骤，您可以确保客户只看到可行的选项，这反过来又可以提高转化率和客户满意度。请记住，在在线零售的世界里，每个细节都很重要。

如果您希望进一步增强您的Shopify商店或需要定制解决方案的帮助，请考虑寻求专业帮助。我们可以一起探讨如何通过战略规划、网站开发和卓越设计服务使您的业务受益。

常见问题解答

Q1：我可以在不编码的情况下隐藏不可用变体吗？

是的，您可以使用第三方应用，如缺货警察或King产品选项，无需编码即可管理和隐藏不可用变体。

Q2：如果我不小心隐藏了太多变体怎么办？

如果您发现隐藏了太多的变体，您可以通过删除自定义代码或调整库存管理设置轻松恢复更改。

Q3：隐藏不可用变体会影响我的SEO吗？

如果正确操作，隐藏不可用变体不应对您的SEO产生负面影响。确保您的商店内容对搜索引擎仍然相关和可访问。

Q4：我如何改善我的Shopify商店的整体用户体验？

改善用户体验涉及优化您网站的设计、确保快速加载时间、简化导航和提供清晰的产品信息。考虑咨询像Praella这样的专业人士，以提升这些方面。

Q5：我还可以实施哪些其他功能以促进销售？

考虑添加客户评论、愿望清单或产品推荐等功能。这些可以增强用户参与度并推动更高的转化率。

采用这些策略不仅可以提高您Shopify商店的效率，还可以为您的客户提供更愉快的购物体验。

如何在Shopify中隐藏不可用变体.

目录

介绍