- 投稿日：2026/04/12
- 更新日：2026/04/12
🤔 どんな課題があったか
Shopifyでコーヒー豆のECストアを運営しているのですが、ランキング表示のために月額5.9ドルのアプリを使っていました。
「このくらいの機能なら、Claude Codeで自分で作れるんじゃないか？」と思ったのがきっかけです。
・コードが書けない（Liquid / CSS / JavaScript の知識ゼロ）
・テーマ（Dawn）のデザインを壊したくない
・でも月額コストはなくしたい
そこで Claude Code（AI）に全部お願いしてみました。
🛠️ 作ったもの
Shopifyのカスタムテーマ「Dawn」に、以下の機能を持つランキングセクションを追加しました。
・週間・月間ランキングのタブ切り替え
・グリッド表示 / リスト表示の切り替え
・商品カードに順位バッジ（1〜3位はトロフィーアイコン付き）
・焙煎度バッジ（浅煎り・中煎り・深煎り・デカフェ）をタグから自動表示
・「選んでカートへ」ボタン → Quick Viewモーダルでバリエーション選択＆カート追加
・定期便の割引後価格を自動表示
・テーマエディタから文字サイズ・ボタンテキストなどを自由に調整可能
🔄 仕組み（技術的なポイント）
Shopify OS 2.0のセクション構成で作っています。
【ファイル構成】
・sections/best-sellers-ranking.liquid → ランキングセクション本体
・snippets/product-card.liquid → 商品カード＆Quick Viewモーダル
・templates/page.ranking.json → ランキングページのテンプレート
① 焙煎度の自動判定
商品タグに「浅煎り」「中煎り」「深煎り」「デカフェ」を設定しておくだけで、カードにバッジが自動表示されます。
② サブスクリプション価格の表示
/products/{handle}.js APIから selling_plan_groups を取得して、割引後の定期便価格をモーダル内に表示します。
③ テーマエディタで自由に調整
文字サイズ・ボタンテキスト・表示件数などをschema設定に組み込んでいるため、コード不要で調整できます。
④ Dawnテーマを壊さない設計
追加したファイルのみで完結しており、Dawnの既存ファイルは一切変更していません。
📋 使い方（ステップ形式）
① Shopify管理画面でコレクションを2つ作成（weekly-ranking / monthly-ranking）し、売れ筋商品を並べる
② 各商品のタグに焙煎度を追加（「浅煎り」「中煎り」「深煎り」「デカフェ」）
③ 管理画面 → ページ → 「ranking」ページを作成し、テンプレートに「page.ranking」を選択
④ テーマエディタでコレクション・表示スタイル・文字サイズ等を設定して完成！
💬 こんな指示でできた（実際の会話例）
「ランキングページを作りたい。週間・月間でタブ切り替えできて、グリッド表示にしたい。Dawnテーマを壊さないように。」
→ sections/ snippets/ templates/ のファイルを自動生成
「1位2位3位のバッジをおしゃれにして。トロフィーアイコンも付けて。」
→ グラデーション＋ホワイトシャドウのバッジに変更
「浅煎り・中煎り・深煎りをグリッド内に表示したい。タグで判定して。」
→ 商品タグを自動読み取りして色付きバッジで表示
「定期便でバリエーションを選んだら割引後の価格も表示したい。」
→ Shopify APIから自動計算して表示
「文字サイズを自分で調節できるようにして。」
→ テーマエディタのschemaにスライダー設定を追加
📝 まとめ
月額5.9ドルのアプリを解約して、同等以上の機能をゼロ円で実装できました。
コードが書けなくても、Claude Codeに「やりたいこと」を日本語で伝えるだけで実装が進みます。
「アプリの月額費用を削りたいけど機能は欲しい」と感じているEC運営者の方にぜひ試してみてください！
