ShopifyのコレクションページをB2Bカタログ表にする（アプリなし）

ミューコマースのsakiです。Shopifyで中小のBtoB（法人卸）向けストアを作っています。

型番と在庫区分が横に並ぶ、卸の商品カタログの一覧表。ああいう画面を作るには専用のアプリを入れるしかない——そう思っていないでしょうか。2026年7月に、この形の一覧表をShopifyで実際に組みました。

結論：アプリなしで、この一覧表は作れます

型番・在庫区分・メーカーが横に並び、絞り込み・検索・CSVダウンロードができるカタログ一覧表は、Shopifyの標準機能だけで作れます。追加アプリの月額はゼロ円です。

私が実装したデモでは、こうなっています。

• 品名（クリックで商品ページへ）／英名／メーカー／型番／在庫区分（3色バッジ）／詳細、が1行に並ぶ表
• 左サイドバーにカテゴリ（ボルト・ナット類、配管部品など4分類）。「全商品」を開くとカテゴリ見出しつきで一覧
• 在庫区分（在庫あり／取り寄せ／直送のみ）のボタン絞り込みと、品名・型番・メーカーの検索窓
• 表示中の行だけをCSVでダウンロード（Excelで開いても文字化けしない形式）
• スマホでは「表のまま横スクロール」と「カード表示」を切り替え。数量を入れてそのままカートに入れる注文モードつき

何で作っているか（部品は3つだけ）

Shopifyに最初から入っている標準デザイン（テーマ）に、私が作った部品を3つ足しただけです。

部品	中身	分量
表の画面そのもの	一覧表・左のカテゴリ・絞り込みボタン	プログラム701行
商品1行分の表示	どのページでも使い回せる形	97行
動きの仕組み	絞り込み・検索・CSV・スマホ切替	237行

商品データ側の準備は2つだけです。型番は、Shopifyの商品登録画面にもともとある「SKU」という欄をそのまま使います。「在庫区分」は、商品に欄を1つ追加して「在庫あり／取り寄せ／直送のみ」の3択にしました。欄の追加はShopifyの標準機能でできるので、ここでもアプリは要りません。デモは16商品・4カテゴリで動いています。

つまり、月額のかかるアプリを入れる前に、「商品データを整えて、テーマに部品を足す」だけでここまで行けます。

実際にハマったところ

（ここだけ少し技術の話です。読み飛ばしていただいて大丈夫です）

カテゴリ一覧の設定から「今見ているカテゴリ」を取り出せず、手が止まりました。 Shopifyのテーマ設定には「コレクションのリスト」という型があるのですが、公式ドキュメントに書いてある使い方は「順番に全部並べる」方向だけで、「リストの1番目だけ取り出す」という配列のような操作ができません。配列に見えるのに配列の取り出しが効かない、が落とし穴でした。結局、リストを順番に回して「いま開いているカテゴリと一致したら現在地マークを付ける」という書き方に変えて解決しています。

ほかにも3つ踏みました。

• CSVダウンロードに、画面で非表示にした行やカテゴリ見出しの行まで混ざって出力された → 「本物の商品行」だけを拾うように直した
• 在庫区分で絞り込んだとき、商品が全部消えたカテゴリの見出しだけが宙に残った → 空になった見出しは隠すようにした
• スマホで表が画面からはみ出した → 表の組み方を直したうえで、カード表示との切り替えを付けた

こういう細かい詰まりは必ず起きます。「アプリなしで作れる」は本当ですが、「何も考えずに作れる」ではありません。

向いている会社・向かない会社

向いているのは、型番で商品が特定できて、SKUがおおむね数十〜300点くらいまでの卸・製造の会社です。紙のカタログやFAXの注文書を「Webの一覧表」に置き換えるイメージにいちばん近い形になります。

一方で、次のような場合はこの作りの外側です。

• SKUが数千点あり、寸法や材質での段階的な絞り込み（パラメトリック検索）が必要 → アプリまたは開発の領域
• 取引先ごとの価格グループが多く、複雑な出し分けが必要 → プランの上位（Plus）やアプリ開発の話になります

どちらに当たるかは、商品数と価格の作り方でほぼ決まります。

次の一歩

自社の商品構成・価格の作り方でこの形が使えるかどうかは、価格表と注文の流れを拝見すると判定できます。ヒアリングの際に「Shopify適合チェック」（貴社の価格構造と受注の流れが、どのプランでどこまで再現できるかの判定書）を無料でお渡ししていますので、お問い合わせください。

---

この記事の実装は2026年7月時点のShopify（Horizonテーマ）で確認したものです。仕様は変わることがあります。記事中の実装はデモストアのもので、貴社での動作や成果をお約束するものではありません。