Shopifyの商品ページで在庫表を表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」は、各バリエーションの在庫を一覧表で表示するアプリです。
アプリを利用することで、商品ページにバリエーションごとの在庫状況を表示し、顧客の購入体験を高めることができます。また、アイコンや数字を使った在庫表示をノーコードで簡単に設定できるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」でできること
Shopify アプリである「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」は、以下のように商品ページに各バリエーションの在庫を一覧表で表示できるアプリです。
主な特徴は次のとおりです。
-
リアルタイムの在庫表示
各バリエーションの在庫状況をリアルタイムで表示し、透明性のあるショッピング体験を提供します。 -
ノーコードで簡単カスタマイズ
アイコンやデザインを直感的に設定できるので、誰でも簡単に見栄えの良い在庫表を作成可能です。 -
1 クリックでテーマに追加
複雑な設定は不要で、すぐにストアに在庫表を設置できます。
これらを活用することで、顧客が一目で在庫状況を確認でき、購入判断をスムーズに行えるようになり、コンバージョン向上につなげることができます。
バリエーションごとの在庫数一覧表を表示できる
商品ページにバリエーションごとの在庫を一覧表形式で表示できます。顧客が在庫状況を一目で確認できるため、購入体験が向上します。
各バリエーションの在庫状況を表形式で表示できる
サイズや色などの各バリエーションの在庫状況を、見やすい表形式で整理して表示することができます。
ノーコードでデザインをカスタマイズできる
在庫表示のデザイン、アイコン、色、サイズなどをノーコードでカスタマイズできます。HTML や CSS の知識がなくても、カンタンにストアのブランドイメージに合わせたデザインに調整できます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの在庫表アプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル在庫数一覧表アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $8.99（1 週間の無料お試し期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $8.99 でご利用いただけます（1 週間の無料お試し期間あり）。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル在庫数一覧表のアプリブロックをテーマに追加
「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」を実際にテーマに組み込み、在庫表をストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに在庫表を追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をクリックして、有効化は完了です。
以上で、テーマに自動的に在庫表アプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は、商品ページ以外にアプリブロックを追加したい場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」のタブに「シンプル在庫数一覧表」というアプリブロックが表示されるので、クリックして追加します。
アプリセクションが追加されその中に在庫表ブロックが追加されます。「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル在庫数一覧表アプリのカスタマイズ
テーマにアプリブロックを追加したら、カスタマイズ画面で「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」のカスタマイズを行うことができます。
カスタマイズ画面で商品ページを開き、「シンプル在庫数一覧表」ブロックをクリックます。
下記のような設定項目が表示されます。
在庫表示設定
「在庫の表示」では、表示方法を選択できます。
- アイコン+テキスト：アイコンとテキストの両方で在庫を表示
- アイコンのみ：アイコンのみで在庫を表示
- テキストのみ：テキストのみで在庫を表示
「△ を表示する在庫数」では、在庫が少なくなった際に警告として △ マークを表示する在庫数を設定できます。
在庫のテキスト
在庫状況に応じて表示するテキストをカスタマイズできます。
- 在庫ありテキスト：在庫がある場合の表示テキスト
- 残りわずかテキスト：在庫が少ない場合の表示テキスト（[quantity]は実際の在庫数に置き換わります）
- 在庫切れテキスト：在庫切れの場合の表示テキスト
在庫表の対象商品・コレクション選択
在庫一覧表を表示する商品またはコレクションを選択できます。何も選択していない場合はすべての商品バリエーションが複数存在する商品で在庫一覧表が表示されます。
レイアウト設定
「在庫一覧表のカラム数（PC）」「在庫一覧表のカラム数（スマホ）」で、在庫表の列数を PC とスマホで個別に設定できます。
デザイン設定
「バリエーションテキストのサイズ」でバリエーション名のフォントサイズを設定できます。
「バリエーションテキストの色」でバリエーション名の文字色を設定できます。
「バリエーションの背景色」でバリエーション部分の背景色を設定できます。
「アイコンサイズ」で在庫状況を示すアイコンのサイズを設定できます。
「在庫表示アイコンの色」「在庫表示テキストのサイズ」「在庫表示テキストの色」で、在庫表示部分のデザインを細かく調整できます。
「在庫表示の背景色」で在庫表示部分の背景色を設定できます。
「ボーダーの色」で表の枠線の色を設定できます。
ブロックの余白設定
アプリブロックの余白に関する設定ができます。設定できる余白は以下の通りです。
- 上側の余白（PC / スマホ）
- 下側の余白（PC / スマホ）
ブロック全体に対して上下の余白を設定し、レイアウトの見栄えを整えます。
その他の設定
「追加の CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」の解説を行いました。
- 商品ページに各バリエーションの在庫を一覧表で表示して、顧客の購入判断をサポート
- リアルタイムで在庫状況を表示し、透明性のあるショッピング体験を提供
- 月額 $8.99で利用可能（1 週間の無料お試し期間あり）
在庫状況を見やすく表示することで、顧客の購入体験を向上させ、コンバージョン向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
