Shopifyで利用できないバリアントを非表示にする方法

はじめに

商品のバリアントが表示されているにもかかわらず、利用できないことにフラストレーションを感じたことはありませんか？オンライン小売業者として、スムーズなショッピング体験が顧客の関心を引き、コンバージョンを促進するために重要であることを理解しています。顧客が選択できないオプション—特定の色に対して存在しないサイズなど—を提示されると、混乱を引き起こし、ショッピングカートの放棄につながることがあります。

eコマースの世界では、すべての詳細が重要です。製品のバリアントを効率的に管理することは、美観の問題だけではなく、ユーザーエクスペリエンスや売上にも直接影響を与えます。このブログ投稿では、についての重要なステップを案内し、顧客が実際に購入できるオプションだけを表示するようにします。この投稿の最後には、この機能を実装する技術的な側面を理解するだけでなく、ユーザーエクスペリエンスを向上させる重要性も認識できるでしょう。

利用できないバリアントを表示することによって生じる課題、利用可能な解決策、そして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アプリが商品バリアントを管理し、在庫切れの商品を非表示にする手助けをします。一部の人気オプションは以下の通りです：

Out-of-Stock Police: このアプリを使うことで、在庫切れの商品とそのバリアントを完全に非表示にすることができるか、コレクションページの下に押し下げることができます。
King Product Options: このアプリは、条件付きロジックを利用して、可用性に基づいて商品オプションを管理し表示します。

2. 在庫設定を変更

シンプルなアプローチを希望する場合、各バリアントの在庫設定を手動で調整することができます：

Shopify管理パネルに移動します。
製品に移動してアイテムを選択します。
バリアントセクションで、在庫切れの際に販売を続けるオプションのチェックを外し、在庫数量をゼロに設定します。

ただし、この方法では製品が完全に非表示になってしまうため、すべてのストアオーナーにとって理想的とは限りません。

Eコマースにおけるユーザーエクスペリエンスの重要性

最適なユーザーエクスペリエンスを作成することは、利用できないバリアントを非表示にすることを超えています。デザインから機能性まで、オンラインストアのすべての要素を含みます。よくデザインされたユーザーエクスペリエンスは、より高い顧客満足度、忠誠心の向上、そして最終的にはより多くの売上につながります。

専門家とのコラボレーション

Praellaでは、ユーザーエクスペリエンスやデザインを専門にし、具体的なニーズに合わせたデータ駆動型のソリューションを提供しています。私たちのチームは、顧客に忘れられないブランデッドな体験を創出するお手伝いができます。ウェブ開発や戦略的コンサルテーションが必要な場合は、私たちが成長への旅をサポートします。私たちのサービスを確認してください Praella Solutions。

結論

Eコマースの競争が激しい中、製品を整理され、ユーザーフレンドリーな方法で提示することは、他のストアと差別化する手段となります。Shopifyで利用できないバリアントを非表示にすることは、製品ページの美的魅力を高めるだけでなく、顧客の全体的なショッピング体験を大幅に改善します。

このブログ投稿で説明した手順に従うことで、顧客が見えるのは実行可能なオプションだけにすることができ、結果としてコンバージョンと顧客満足度が向上します。オンライン小売の世界では、すべての詳細が重要であることを忘れないでください。

Shopifyストアをさらに強化したり、カスタムソリューションについての支援が必要な場合は、専門家の助けを求めることを検討してください。共に、戦略的な計画、ウェブ開発、優れたデザインサービスがビジネスにどのように役立つかを探求しましょう。

FAQセクション

Q1: コーディングなしで利用できないバリアントを非表示にできますか？

はい、Out-of-Stock PoliceやKing Product Optionsなどのサードパーティアプリを使用することで、コーディングなしで利用できないバリアントを管理し、非表示にすることができます。

Q2: もし誤って多くのバリアントを非表示にしたらどうすればよいですか？

もし多くのバリアントが非表示になっていることに気づいた場合、カスタムコードを削除するか、在庫管理の設定を調整することで簡単に変更を戻すことができます。

Q3: 利用できないバリアントを非表示にすることはSEOに影響しますか？

正しく行えば、利用できないバリアントを非表示にすることはSEOに悪影響を与えないはずです。ストアのコンテンツが検索エンジンに対して関連性を保持し、アクセス可能であることを確認してください。

Q4: Shopifyストアの全体的なユーザーエクスペリエンスを改善するにはどうすればよいですか？

ユーザーエクスペリエンスを改善するためには、サイトのデザインを最適化し、読み込み時間を短縮し、ナビゲーションを簡略化し、明確な製品情報を提供することが含まれます。Praellaのような専門家との相談を検討して、これらの側面を強化しましょう。

Q5: 売上を増やすために実装できる他の機能は何ですか？

顧客レビュー、ウィッシュリスト、製品推薦などの機能を取り入れることを検討してください。これらはユーザーの関与を高め、より高いコンバージョン率を促すことができます。

これらの戦略を取り入れることで、あなたのShopifyストアの効率を高めるだけでなく、顧客にとってもより楽しいショッピング体験を提供できます。

Shopifyで利用できないバリアントを非表示にする方法.

目次