- 投稿日：2026/04/29
🤔 どんな課題があったか
ぼくはコーヒー豆のオンラインショップを運営しています。
もともと商品ページでは「Zoorix Sticky ATC」という追従カートボタンのアプリと、「Hextom Free Shipping Bar」という送料無料バーのアプリを使っていました。
ちゃんと動いてはいたんですが、ずっと気になっていたもやもやがありました。カート追加後は右上のカートアイコンを押さないとカート画面に進めない、送料無料バーはリロードしないと金額が更新されない、そして何よりも「アプリ代」と「サイト表示の重さ」がじわじわ効いてきたんです。
「これ、自作できないんかなぁ」とClaude Codeに相談したのが、今回のスタートでした。
🛠️ 作ったもの（何ができるか）
今回作ったのは、追従カートボタンと送料無料バーの2つをセットにしたものです。
スマホで商品ページをスクロールしていくと、画面下部にスッと出てくるんですが、これがそこそこやるんです。
バリエント（豆のまま／粉、200g／500gなど）はピル型ボタンでタップして選べて、在庫切れの組み合わせは取り消し線でグレイアウトされます。ボタンには「クーポン」みたいな黄色バッジで「-20%」と表示されて、定期便で割引がかかる商品は取り消し線付きの元価格と割引後価格を両方見せています。
タップしてカートに追加すると、スティッキーバーの上に「✓ カートに追加しました ／ あと¥××で送料無料！」というトーストが出て、ボタン自体が「カートへ進む →」に変わります。タップすればそのままカート画面へ、もう一個追加したいときは「続けて買い物」を押せばOKの2択仕様です。
画面最上部には送料無料バーを常時表示して、「あと¥500で送料無料！」というメッセージと進捗バーを表示。カートに追加した瞬間、リロードせずに金額が更新されます。定期便をカートに入れると「定期便は送料無料です！」に切り替わる仕様も付き。
定期便ページでもそのまま動作して、割引価格やセリングプラン（「4袋以上プラン」など）も自動で見分けてカートに追加されます。
🔄 仕組み（技術的なポイント）
テーマはShopify公式のDawnを使っていて、そこにスニペットという部品を追加してレイアウトに組み込んでいます。
ポイントはたぶん3つありました。
1つ目は、スクロールと連動した表示コントロール。IntersectionObserverを使って、本来のカート追加ボタンが画面外に出たときだけスティッキーバーを出すようにしています。デスクトップだと本来のボタンがさッと見えていることが多いので、一定以上スクロールしたら表示、というフォールバックも付けています。
2つ目は、カートデータをShopifyのAJAX API（/cart/add.js と /cart.js）で取りにいくこと。これでページをリロードせずにカート追加も、送料無料バーの金額更新もリアルタイムでやれます。
3つ目は、定期便のセリングプランというShopifyの仕組みへの対応。バリエント（2袋・3袋・4袋以上…）ごとに使うプランが違うため、バリエントを選んだときに「このバリエントに紐づく正しいセリングプランID」を自動で選んで送るようにしています。これで「4袋以上プラン」の商品もスティッキーからカート追加できるようになりました。
どれもClaude Codeがコードを書いてくれるので、ぼくは「こうしたい」を言語化するだけで進めるのがいいところでした。
📋 使い方（どう導入したか）
導入手順はとてもシンプルでした。
まずテーマを複製してバックアップ。Shopifyの管理画面で「テーマを複製」を押すだけで、もし何かあったときもワンタップで戻せる状態にしました。
次にClaude Codeを起動して、「スティッキーカートボタンをアプリを使わずに作れる？」と語りかけました。あとは「こんな感じにしたい」「ここが見切れる」「こうしたら使いやすい」とスクリーンショットを見せながら言うだけ。Claudeがコードを更新して、Shopify CLIでテーマへ自動送信してくれます。
最初は「本番じゃない未公開テーマ」に送ってもらって、プレビューURLでスマホとPCで動作確認。問題なければ本番のDawnテーマに変更ファイルだけをピンポイントで送るスタイルで安全に進めました。
最後に、Shopifyアプリたち（Zoorix Sticky ATCとHextom Free Shipping Bar）をオフにして完了。これでアプリ代もその分の読み込みスクリプトもサイトから消えました。
💬 こんな指示でできた
実際のClaude Codeとのやりとりは、さくっと振り返るとこんな感じでした。
ぼく「ページ下部の追従カート追加はZoorix Sticky ATCというアプリを使用してあるけど、アプリを使用せずに同じような感じでよりユーザーフレンドリーに作ることは可能？」
Claude「テーマを直接編集すれば、アプリ無しでも追従カートは実装できます。以下が概要です…」→としてコードと手順を示してくれる。
ぼく「もうちょっと上段の文字を大きくしてほしい」
Claude「修正しました。割引後価格：16px→20px、元価格：12px→14px…」→そのまま本番サイトに反映。
ぼく「定期便ページでカート追加できない、価格も割引後にならない」
Claude「セリングプランが2種類あり（2～3袋用と4袋以上用）、バリエントによって使うプランが違います。バリエントに紐づく正しいセリングプランIDを自動で選んで送るよう修正します」→動くようになる。
こんなふうに、機能の追加や細かい調整を、ぼくは一度もコードを書かずに進められました。
📝 まとめ
今回実感したのは、Shopifyのアプリでまかなっている機能を、テーマを少しいじるだけで自作に置き換えられるケースが意外と多い、ということでした。しかも以前は「エンジニアさんに頼まないとムリ」だったものが、Claude Codeのおかげで非エンジニアのぼくでも対話だけで進められるようになっています。
アプリで済ませるか、最初にちょっと頑張って仕掛けを作るか。トータルで見ると、後者のほうがサイトスピードも自由度も、ちゃんとリターンとして返ってきた感覚があります。
Shopifyでショップを運営している方で、「このアプリ、本当に必要かなぁ」と思うものがあるなら、一度Claude Codeに語りかけてみる価値は十分にあると思います。「そもそも何ができるの」を知るだけでも、選択肢はずいぶん広がります。
これからもちょこちょこ「そういうもの」を自作していこうと思います～。
