こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はクリエイターモードで、商品詳細ページの在庫表示をカスタマイズする方法をご紹介します!クリエイターモードで使えるタグはタグリファレンスをご確認ください。

※クリエイターモード【Complete】【BRothers】【&more】【Manabito】テンプレートには、あらかじめ「在庫」を表示するソースが入力されています。
※テンプレートごとに初期値のデザインは異なります。
それ以外のテンプレートをご利用の場合は、「在庫」を表示するソースを追記して表示することができます。

在庫表示をする場合

【商品管理】>【商品の設定】>【商品の登録】

●通常商品

数量」項目を「表示」にチェックを入れておく必要があります。
在庫表示

●オプションが設定されている商品

オプション(在庫・価格設定あり)」項目「オプション設定」をしてください。
オプション

・オプション設定されている商品で在庫表示したい場合は、表示形式は「項目ごとに買い物かごを表示する」(SKUデザイン)を選択する必要があります。
※「プルダウンで表示する」を選択した場合、在庫表示されません。
・ベーシックモード(PC)では、「在庫確認表」が表示できますが、クリエイターモードでは表示することはできません。

在庫が一定数以下になった時に「在庫あり/あと3個」ではなく「残りわずか/あと3個」のように表示したい場合、『在庫ビジュアル(○△×)表示機能の設定』で以下の設定が必要です。

在庫ビジュアル

「「○△×」で表示」△ 残りわずかを表示する数量」を設定
※ここで入力した「個数」以下になった時に表示が切り替わります。

クリエイターモードで在庫表示するソース

ここでは、クリエイターモードの【Complete】の初期値の「在庫」を表示するソース例をご紹介します。

【ソース例】

【独自デザイン】>【クリエイターモード】>【商品詳細】

▼HTML

●通常商品(258行目付近~)

●オプションが設定されている商品(271行目付近~)

クリエイターモードで在庫表示をカスタマイズする方法

クリエイターモードの場合、ソース内を編集することで、在庫表示をカスタマイズすることができます。

ソースカスタマイズ例

上記、【Complete】の初期値のソースを元にカスタマイズしてみましょう。

【1】商品詳細のソースを編集します。

【独自デザイン】>【クリエイターモード】>【商品詳細】

例えば、次のように変更したい場合は、ソース内を下記のように修正してください。

「在庫あり」→「〇在庫あり」
「残りわずか」→「△残りわずか」としたい場合

●通常商品

↓↓このように表示を変更できました!
通常商品

●オプションが設定されている商品

↓↓このように表示を変更できました!
SKU

・ソースは一例となります。自由にデザインを調整して表示しましょう。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
・有料となりますが、ショップ制作代行サービスとして、おてがるリニューアルサービスをご紹介させていただきます。

完了

いかがでしたでしょうか。
クリエイターモードで在庫表示をカスタマイズしたい場合は、直接ソースを編集してお好みのデザインにしてみましょう。

それではまた!