# 9種類のショップレイアウト

URL: https://canvaswp.com/ja/templates/shop/
Updated: 2026-11-03

テンプレート

WooCommerceのカタログレイアウト：列数とサイドバーの位置、カテゴリーページ、フィルターページ、さらにカートとチェックア ウト

[ライブショーケースを開く](https://demos.canvaswp.com/classic/) [デモサイトを閲覧](https://canvaswp.com/ja/demos/)

更新日：2026年11月3日

- [4カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop/)
- [3カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-3/)
- [2カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-2-right-sidebar/)
- [1カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-1/)
- [商品レイアウト （新しいタブで開きます）](https://demos.canvaswp.com/classic/product/pink-printed-dress/)
- [カテゴリー - パララックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-category-parallax/)
- [組み合わせフィルター （新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-combination-filter/)
- [カート （新しいタブで開きます）](https://demos.canvaswp.com/classic/cart/)
- [チェックアウト （新しいタブで開きます）](https://demos.canvaswp.com/xmas/xmas-checkout/)

各リンクは、お客様がインストールするのと同じテーマとブロックで作られた、ライブショーケースの実際のページを開きます。

各ページの構成

## ブロックとテンプレートで構築されたストアページ

ストアを動かすのは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ストアとしてインポートされます。

### ストアの機能

24件のWooCommerceブロックと18件のストアテンプレート。商品ギャラリーから注文内容の確認まで。

- [Canvas の WooCommerce 対応](https://canvaswp.com/ja/woocommerce/)

### 操作手順

商品、ショップページ、商品ページ、カート、チェックアウトを、実際に構築する順番に沿ってご紹介します。

- [WooCommerceストアを始める](https://canvaswp.com/ja/guides/start-a-woocommerce-store-with-wordpress/)

### ショップ向けのデモ

ファッション、陶芸、家具などのデモを、インポート前にページごとにプレビューできます。

- [ECデモの比較](https://canvaswp.com/ja/wordpress-themes/ecommerce/)

その他のテンプレート

## ライブラリのその他すべて

- [ページテンプレート 13](https://canvaswp.com/ja/templates/page-templates/)
- [ショートコードと要素 57](https://canvaswp.com/ja/templates/shortcodes/)
- [ポートフォリオレイアウト 27](https://canvaswp.com/ja/templates/portfolio/)
- [ブログレイアウト 35](https://canvaswp.com/ja/templates/blog/)