shopifyの売り切れ表示について

Question

自社サイトでshopifyテーマPrestigeを利用しています。

例えばM～4Lまでサイズ展開がある商品で、Mだけが在庫無しだった場合、商品一覧の画面で「売り切れ」のバッジが出てしまいます。
先頭のSKUをデフォルトで選択するような設定になってしまっているのか、先頭SKUの在庫有無の判断でバッジの表示・非表示が判断されているようです。
この設定はどこかで変更できるかわかりますでしょうか？
もしくはliquidを触らないとできないでしょうか？

宜しくお願いします。

Answer

ECマスターズの海老塚です。

検証環境がないため、
実証はできておりませんが、
以下をご確認いただけますと幸いです。

> 例えばM～4Lまでサイズ展開がある商品で、Mだけが在庫無しだった場合、商品一覧の画面で「売り切れ」のバッジが出てしまいます。
> 先頭のSKUをデフォルトで選択するような設定になってしまっているのか、先頭SKUの在庫有無の判断でバッジの表示・非表示が判断されているようです。
> この設定はどこかで変更できるかわかりますでしょうか？
> もしくはliquidを触らないとできないでしょうか？

Shopifyテーマ「Prestige」で、
バリエーションごとの在庫状況に基づいて
「売り切れ」バッジを表示するための
Liquidコードの変更方法を説明します。

基本的な流れとしては、
商品一覧（product-grid.liquidやproduct-card.liquid）で、
各商品のバリエーションの在庫をチェックして、
全てのバリエーションが在庫切れでない場合に
「売り切れ」バッジを表示しないようにする方法です。

①. 商品一覧のコードを探す

まず、テーマのファイルにアクセスします。

1.Shopifyの管理画面にログインします。

2.オンラインストア」 > 「テーマ」 > 使用しているテーマの「アクション」 > 「コードを編集」を選択します。

3.「Sections」フォルダ内、product-grid.liquidやproduct-card.liquidなど、商品一覧を表示しているテンプレートを開きます。

②. 在庫状況を確認するLiquidコードを追加

商品カードの中で、商品バリエーションの
在庫を確認し、すべてのバリエーションが
「在庫あり」であるかをチェックします。

次のコードをproduct-card.liquid（もしくは該当するテンプレート）
に追加します。

ーーーーー

{% assign all_variants_out_of_stock = true %}

{% for variant in product.variants %}
{% if variant.available %}
{% assign all_variants_out_of_stock = false %}
{% break %}
{% endif %}
{% endfor %}

{% if all_variants_out_of_stock %}

売り切れ
{% endif %}

ーーーーー

③上記コードの説明

・all_variants_out_of_stock という変数を使って、すべてのバリエーションが在庫切れかどうかを確認します。

・for ループで、商品に含まれるすべてのバリエーションをチェックします。

・各バリエーションが在庫あり（variant.available）かどうかを確認し、
　もし在庫があれば all_variants_out_of_stock を false に設定し、ループを抜けます。

・最後に、もしすべてのバリエーションが在庫切れだった場合に「売り切れ」バッジを表示します。

④スタイルの調整（オプション）

バッジを適切に表示するために、
CSSでスタイルを調整することもできます。

例えば、sold-out-badgeクラスに
スタイルを追加して、バッジを目立たせます。

ーーーーー

.sold-out-badge {
background-color: red;
color: white;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
}

ーーーーー

このスタイルをテーマのCSSファイル
（例えばtheme.scss.liquid）に
追加することで、バッジをカスタマイズできます。

⑤テーマの保存

変更が終わったら、コードを保存し、
実際に商品一覧ページを確認して、
バッジが期待通りに表示されるかをチェックしてください。

Answer

海老塚様
ありがとうございます。
試してみます。