ストアブロック：商品グリッド、商品、カート、チェックアウト

ストアブロックは、販売している商品を見せて、買い物客が購入できるようにするものです。左側のパネルのストアグループにあります。商品そのものは、エディタではなく、サイトのダッシュボードで管理します。ブロックは商品を表示するだけなので、価格を変えたり商品を追加したりすると、その商品を表示しているすべてのブロックが更新されます。

ストアブロックの一覧

サイトには、それぞれのブロックが設置されたカートページとチェックアウトページ、そして商品ページ共通のレイアウトが最初から用意されています。カート、チェックアウト、商品ページのブロックを自分で追加する必要は、ほとんどありません。

商品グリッド

商品グリッドをページにドラッグし、クリックして設定を開きます。

全般の設定です。

• カテゴリーは、グリッドを1つのカテゴリーに限定します。すべての商品を選ぶと、全商品が表示されます。
• 並び順は、商品の並べ方です。並べたとおり、新しい順、名前順（A-Z）、価格の安い順、価格の高い順から選べます。
• 表示する件数は、商品の数の上限です。すべてにすると、すべての商品が表示されます。
• 買い物客向けの絞り込みは、買い物客がグリッドを絞り込めるボタンを追加します。カテゴリー別、タグ別、カテゴリーとタグ別から選べます。
• 1ページあたりの商品数は、長いグリッドをページに分割します。すべて1ページに表示にすると、ページ分けされません。
• カートに入れたらチェックアウトへ進むは、買い物客が商品を追加すると、すぐにチェックアウトに移動させます。ほとんどの買い物客が複数の商品を購入する場合は、オフのままにしてください。
• 商品をポップアップで開くは、商品をポップアップで表示するため、買い物客はグリッド内の位置を保てます。オフの場合は、商品をクリックすると、その商品のページが開きます。商品間の矢印と2つの矢印の色は、このポップアップに適用されます。

外観では、列の数、グリッドの間隔、画像の形状を設定します。価格を表示、カテゴリーを表示、「カートに入れる」を表示のオンとオフを切り替え、ボタンの文言を変更し、カードの背景とカードの文字色を設定できます。

商品の整理については、カテゴリーとタグで商品を整理するをご覧ください。1つのページをショップにするには、ショップページを設定するをご覧ください。

単品の商品

単品の商品を使うと、ホームページなど、どのページにも1つの商品を置けます。商品で選んでください。画像の形状を変えたり、価格や「カートに入れる」ボタンの表示と非表示を切り替えたり、ボタンの文言を変更したり、カードの色を設定したりできます。

商品ページ

すべての商品が共有するページのデザインは、一度だけ作成します。エディタ上部のページ一覧で、商品テンプレートを選びます。代役として最初の商品が表示されますが、変更した内容はすべての商品に適用されます。

商品ページブロックをクリックすると、写真ギャラリー、説明、SKU、レビューの各パーツのオンとオフを切り替えられます。ボタンの文言も変更できます。戻るリンクでは、商品の上にあるリンクの移動先と、その表示内容を選びます。初期設定では、ショップページに移動します。詳しくは、商品ページの仕組みをご覧ください。

カート

カートブロックは、カートページに置かれています。設定は、見出し、空のときのメッセージ、合計を表示、チェックアウトボタンの文言、そして背景と文字の色です。買い物客のカートは、チェックアウトするまで、その人自身のブラウザに保存されます。

ヘッダーのカートアイコンをクリックすると、同じページ上にカートのパネルが開くため、買い物客が今見ているページから移動する必要はほとんどありません。

チェックアウト

チェックアウトブロックが、チェックアウトページです。左側に買い物客の情報、右側に注文内容、割引コード、支払いボタンが表示されます。

全般の設定です。

• 見出しは、フォームの上に表示されるタイトルです。
• 配送先の住所を入力してもらうは、住所、市区町村、州・都道府県、郵便番号、国の入力欄を追加します。配送地域と、地域ごとの税金は、この住所を使って料金を決めるため、それらを設定している場合は、オンのままにしてください。
• 電話番号を入力してもらうと注文メモの入力を許可するは、それぞれの任意の入力欄を追加します。
• サイトのメニューを表示とフッターを表示は、初期設定ではオフです。そのため、買い物客にはロゴだけが表示され、支払いに集中できます。どちらかをオンにすると、再び表示されます。

ほかのグループでは、ページの見た目を設定します。

• カード払いボタンは、クレジットカードのボタンの文言、色、アイコンを変更します。
• PayPalボタンは、PayPal指定の文言と色を提供します。PayPalの名前が付いたボタンには、それ以外の変更は認められていません。
• 両方のボタンは、角の丸み、サイズ、レイアウト（縦に並べるまたは横に並べる）、どちらのボタンを先に表示するかを設定します。
• 割引コードは、コードの入力ボックスのサイズを設定します。このボックスは、買い物客が使えるコードがある間だけ表示されます。
• ボタンの下の注記は、安心してもらうための一文のオンとオフを切り替え、独自の文を書いたり、配置を設定したりできます。

支払いボタンは、StripeまたはPayPalを接続すると表示されます。チェックアウトの仕組みをご覧ください。

レビュー

レビューブロックは、1つの商品の評価と書かれたレビューを表示します。商品で選び、見出しを付け、評価のまとめを表示と顧客がレビューを書けるようにするのオンとオフを切り替えます。レビューはページを開いたときに読み込まれるため、新しいレビューは、あらためて公開しなくても表示されます。レビューを書けるのは、ログインしている顧客だけです。商品ページにはすでにレビューが含まれているため、ほかの場所に表示したいときにこのブロックを使ってください。商品レビューを集めて管理するをご覧ください。

関連記事

• コンテンツブロックのリファレンス
• 商品ページの仕組み
• チェックアウトの仕組み
• 商品を追加する