9種類のショップレイアウト
WooCommerceのカタログレイアウト：列数とサイドバーの位置、カテゴリーページ、フィルターページ、さらにカートとチェックア ウト
更新日：
- 4カラム （新しいタブで開きます）
- 3カラム （新しいタブで開きます）
- 2カラム （新しいタブで開きます）
- 1カラム （新しいタブで開きます）
- 商品レイアウト （新しいタブで開きます）
- カテゴリー - パララックス （新しいタブで開きます）
- 組み合わせフィルター （新しいタブで開きます）
- カート （新しいタブで開きます）
- チェックアウト （新しいタブで開きます）
各リンクは、お客様がインストールするのと同じテーマとブロックで作られた、ライブショーケースの実際のページを開きます。
ブロックとテンプレートで構築されたストアページ
ストアを動かすのはWooCommerceで、商品、在庫、カート、決済を担います。Canvasは、お客様が通るページをデザインします。ここに掲載されているレイアウトはすべて、テーマとそのプラグインに含まれるパーツから作られています。
カタログのカラム
4カラムのページは、テーマの商品アーカイブテンプレートで描画されるWooCommerceのショップページそのものです。3カラム、2カラム、1カラムのページには、Canvas Productsブロックが配置されます。その「Columns」設定が1行あたりの列数を決めます。このブロックは、4種類のショップテンプレート（全幅、左サイドバー、右サイドバー、または両側サイドバー）のいずれかを使用しているページ内で使います。
商品ページ
商品ページは、編集時に選んだテンプレートからレイアウトを取得します。標準ページのほか、左右どちらか、または両側にサイドバーを配置したバージョン、追従表示される概要、カラースウォッチ、仕様一覧があります。カルーセル版もあるLinked Galleryテンプレートも含まれます。
カテゴリーバナー
画面全体の高さのParallax Imageブロックを積み重ね、カテゴリーごとに1枚ずつ配置します。各ブロックはページのスクロールに合わせて動きます。ブロックごとにオーバーレイとコンテンツを設定できるため、見出しとボタンで、お客様をストアの該当部分へご案内できます。
組み合わせフィルター
Canvas Products ブロックの上に 2つの Grid Filter バーを配置します。1つは「Select Category」、もう1つは「Sort By」というラベルです。これにより、購入者はその場でカタログを1種類に絞り込み、名前や価格で並べ替えられます。ページの再読み込みは不要です。
カート
ショーケースのカートでは、WooCommerceに含まれるカートブロックを使用しています。ブロック単位でカートページをレイアウトしたいストア向けに、Canvasは独自のCanvas Cart TableブロックとCanvas Cart Totalsブロックを追加しています。
チェックアウト
カートが空のままではチェックアウトを表示できないため、このリンクは、Canvas Checkout Billing ブロックと Canvas Checkout Order Review ブロックで構成された Christmas Store デモのチェックアウトを開きます。このデモは、商品とこのチェックアウトを含めてインポートされます。
どのショップレイアウトがカタログに合うか
商品点数に合わせてレイアウトを決めましょう。写真の魅力が強い少数の商品は、幅の広いカードで表示するのがおすすめです。1行に2～3点ずつ並べるか、商品ごとに説明文を載せたい場合は1列にします。商品数が多い場合は一度に多くの商品を表示する必要があるため、4列のショップページが適しています。
買い物客がタイプと価格という2つの条件を同時に考える場合は、組み合わせフィルターを使うとよいでしょう。カテゴリーバナーは、ホームページやルックブックに配置しましょう。商品グリッドより先に、写真が商品の魅力を伝えます。
商品ページでは、購入を促すポイントに応じてテンプレートを選びます。衣類は色で売れるため、カラースウォッチ版が役立ちます。テクニカル商品は詳細で売れるため、仕様リストの出番です。固定表示のサマリーが、長いページでも価格とボタンを見えるように保ちます。
88件のデモサイトのうち21件が、商品、カテゴリー、カートページ、チェックアウトページが設定済みの状態で、WooCommerceストアとしてインポートされます。