在庫カウンター要素

GemPagesの在庫カウンター要素について

その 在庫カウンター要素 商品の在庫状況を進捗バー、アイコン、またはテキストで表示するために設計されています。Shopifyの 在庫管理システム 店舗のブランドに合わせてカスタマイズできます。

在庫カウンターを使用する理由

• 在庫が限られていることを表示して緊急感を演出します。
• 透明性のある信頼を築く 在庫状況.
• 在庫メッセージ（例：「在庫残り 5 個！」）を編集して販売キャンペーンをサポートします。

ページに在庫カウンター要素を追加するにはどうすればいいですか?

正しく動作させるには、在庫カウンターをページの商品モジュール内に配置してください。以下の手順に従って、在庫カウンターをページに追加してください。

ステップ1： アクセス GemPagesダッシュボード > ページをクリックし、対象のページを見つけてエディターを開きます。

ステップ2： 左側のサイドバーで、 在庫カウンター 要素をドラッグ＆ドロップして 製品モジュール.

要素の構成は左側のサイドバーで利用できます。これについては次のセクションで説明します。

設定タブを構成する

レイアウト

次のオプションから在庫カウンター要素のレイアウトを選択します。

• フル: 要素にはアイコン、テキスト、進行状況バーが含まれます。
• テキストと進捗バー
• アイコンとテキスト
• テキストのみ
• 進捗バーのみ

製品ソース

製品をクリックして、製品要素で管理します。

プログレスバー

レイアウトがいっぱいなので、 プログレスバー 自動的にオンになります。お好みに合わせてプログレスバーを調整してください。

• 残り割合: 在庫残量の割合を調整します。例えば、20%に設定すると、バーがほぼ空の状態になり、在庫が不足していることを知らせます。
• 色： プログレスバーの色をストアのブランディングに合わせて変更できます。カラーピッカーを使用するか、HEXコードを入力してください。
• 効果： 進行状況バーのアニメーションを有効または無効にします。
  • あり: バーがスムーズなアニメーションで埋められます。
  • いいえ: バーは静止しているように見えます。
• 高さ： プログレスバーの太さ（ピクセル単位）を定義します。数値が大きいほどバーが太くなります。
• ポジション： テキストに対する進捗バーの表示場所を選択します。
  • 上： ストックテキストの上にバーが表示されます。
  • 下： ストックテキストの下にバーが表示されます。
• コーナー： 角の半径を調整して、プログレス バーのスタイルをシャープ、丸、丸型にします。

アイコン

在庫カウンター要素内に表示されるアイコンをカスタマイズします。

• アイコン： GemPages で利用可能なアイコンから選択するか、独自のアイコンをアップロードします (SVG ファイルのみが受け入れられます)。
• サイズ： アイコンのサイズ（ピクセル単位）を調整します。アイコンが大きいほど注目を集めやすく、小さいほど控えめなデザインになります。 
• 色： 店舗のブランディングに合わせてアイコンの色を設定してください。HEXコードを入力するか、カラーピッカーをご利用ください。
• ポジション： アイコンを表示する場所を決定します。
  • 左： アイコンはテキストの前に表示されます。
  • 右： テキストの後のアイコンが表示されます。

サイズ

サイズ設定では、ページ上の在庫カウンター コンポーネントの幅を定義できます。

幅： 在庫カウンターが占める水平方向のスペースを設定します。

• 入力します 割合 値 (例: 50%) を使用すると、コンテナーの幅に応じてカウンターのスケールを設定できます。
• 入力します ピクセル 値 (例: 300px）を使用して固定幅を設定します。

値が小さいほどカウンターがコンパクトになり、サイドバーやタイトなレイアウトに便利です。

テキスト

下 テキスト セクションで、ボタンのテキストを好みに応じて変更します。

• コンテンツ: デフォルトでは「残り%number%個顧客に行動を起こさせるきっかけとなるように変更してください。
• スタイル: テキストスタイルを選択します 見出し1-6 or 段落1-3 グローバルスタイルとして。 
• フォント: ブランド アイデンティティに合ったフォント スタイルを選択します。
• サイズ: テキストが目立つようにフォント サイズを調整します。
• 色圏: デザインに合った色を選びます。
• フォントの太さ: テキストの太さや細さを制御します。
• 行の高さ: 読みやすくするために行間のスペースを調整します。
• 文字間隔: 文字間のスペースを変更して、よりモダンまたはコンパクトな外観を作成します。
• エージェント型AIで研究開発を変革する: テキストを大文字、小文字、または各単語の最初の文字を大文字に変換します。
• 影： ドロップ シャドウ効果を適用して視覚的な奥行きを強調します。 

在庫切れ状態

これらの設定は、商品の在庫がなくなった場合に何が起こるかを制御します。

• アクション： カウンターの動作を選択します:
  • メッセージを表示: カスタムの在庫切れメッセージを表示します。
  • 要素を非表示: 在庫カウンターはページから非表示になります。
• アイコン： 在庫切れメッセージと一緒に表示するアイコン (例: パッケージ、警告、クロス) を選択します。
• 内容： メッセージ テキストを編集します (デフォルト: 「在庫切れ」)。
• アイコンの色: 在庫切れアイコンの色を調整します。
• テキストの色： 在庫切れテキストの色を調整します。

メッセージ

在庫状況に基づいてメッセージをカスタマイズします。

• 在庫切れの時に販売: 顧客に待つか事前注文するよう促すメッセージを追加します（例：「まもなく再入荷します！お楽しみに。」）。
• 在庫無制限： 在庫に限りがない場合のメッセージを設定します（例：「急いでください！購入者が殺到します」）。

表示オプション

在庫カウンターが表示されるタイミングを制御します。

• 常に表示: カウンターを常時表示します。
• 下の場合に表示: 残りの在庫が指定された制限を下回っている場合にのみカウンターを表示します。

整列

コンテナ内の在庫カウンターの配置を次のように設定します。 左, センターまたは 右.

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

よくあるご質問

1.製品モジュールの外部で在庫カウンターを使用できますか?

いいえ、在庫データを正しく取得するには、要素を製品モジュール内に配置する必要があります。

2. Stock Counter は Shopify の在庫と同期しますか?

はい。Shopifyの在庫管理システムで管理されている在庫が反映されます。