Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
先日、従来の顧客アカウントの将来的な廃止が告知されましたが、新しい顧客アカウントでのみ利用可能なHorizonテーマの導入を検討するストアも本格的に増えてきそうです。
Horizonを安全にカスタマイズする方法について、公式ガイドの要点整理と所感をブログにまとめてみました。「ベンダー公式ファイルを直接編集しない」を原則に、GitHub管理・カスタムCSS/JSの読み込み集約・セクション分離など6つのフェーズで進める内容です。ブランチ戦略については公式の方法だとマージ時に差分が大きくなるケースがあったので、実運用で試した代替案も書いています。
（詳細はスレッドのリンク先のブログに記載）
#Shopifyスレッド
Shopify新テーマ「Horizon」を安全にカスタマイズする方法
https://store-dojo.com/blogs/tips/how-to-customize-shopify-horizon-theme-safely -
Claude Codeから自分のShopifyストアをAPIで直接操作できるようにしてみました。
2022年9月からXで毎日投稿し続けてきたShopify TIPSをSTORE DOJOに移行する作業が3/1にようやく完了しました。現時点で615件公開されています。
https://store-dojo.com/collections/allこの移行作業が完了したところで、Claude Codeから自分のストアのデータを読み書きできると便利だと感じ、Shopifyのカスタムアプリを「API操作専用」として登録してみました。いわば擬似MCPサーバー的な使い方です。
◆やったこと
Shopifyのdev dashboardでカスタムアプリ「api-access」を作成し、自分のストアにインストールしました。これによりOAuth認証を通じたAdmin APIのアクセストークンが取得でき、Claude Codeからcurlで直接ストアのAPIを叩けるようになります。
正式なMCPサーバーを構築するのではなく、Shopifyのアプリ登録の仕組みをAPI認証の橋渡しとしてそのまま活用した形です。
APIのスコープは基本的にReadOnlyとし、書き込みを許可しているのは商品情報とコンテンツ（ブログ記事・ファイル）のアップロードに必要なものだけに限定しています。ストアの設定変更や注文操作などには触れない構成です。◆できるようになったこと
まず、過去のTIPS投稿（商品情報として登録されている615件）をClaudeに一括で閲覧させることができました。タイトル、本文、メタフィールドなど全ての情報にアクセスできるので、過去にどんなTIPSを書いたかをClaude自身が把握した上で作業を進められます。また、読み取りだけでなく書き込みも可能なので、当然のことながらブログ記事や商品情報の投稿をClaude経由で実行することもできました。記事や商品情報本文中にファイルとしてアップロードした画像を適用するなど、編集作業自体もClaude側で完結できますので、ローカルでの記事作成作業からシームレスにストア連携できるのがかなり便利だなと感じています。
---
MCPサーバーを自前で構築しなくても、Shopifyのカスタムアプリの仕組みを利用すれば、Claude CodeからAdmin APIを操作する環境が比較的手軽に整えられました。
いずれSidekickがこうした操作をカバーしていくとは思いますが、今の段階ではAdmin APIを直接叩ける方が小回りが利いて助かります。
大量のコンテンツを扱う作業では、Claudeがストアのデータを直接読み書きできることで、作業効率がかなり変わります。自分のストアでClaude Codeを活用したい方には、この方法はひとつの選択肢になるのではないかと思いました。
ちなみに、自分が過去に投稿したTIPSについて「あのコードなんだっけ」を探す際、めちゃめちゃ探すのが楽になりました。「⚪︎⚪︎⚪︎をしたいけどどう書くのが最適か？」と投げかけるだけで、過去の履歴を含めてベストな回答をしてくれます。
-
【X記事】Shopifyアプリの新規リリース動向をShopScanで調べてみました。
ShopScan（shopscan.app）の「Recently…
https://x.com/i/article/2028457064704729088
-
【Shopify TIPS】
ShopifyでShopify Flowを使って未発送の注文状況を定期通知する設定例出荷遅延はお客様の信頼を失ってしまうリスクがあります。Shopify Flowを使うことで、毎日（または数時間）に１回のペースで、未発送の注文状況を指定したメールアドレスに通知するためのFlow設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
【Shopify TIPS】 ShopifyでShopify Flowを使って未発送の注文状況を定期通知する設定例
https://store-dojo.com/products/2025-01-05 -
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のコレクションページや特集セクションで商品ごとに指定した商品サムネイルを表示できるようにする設定例商品画面のトップ画像と、一覧画面で表示する画像を意図的に変えておきたいというリクエストをいただくことがあります。そこで、「コレクション」や「特集コレクション」などの商品一覧画面で、トップ画像以外に指定したサムネイル画像を商品ごとに表示する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」で設置した特集コレクションで表示する商品のサムネイル表示順番号を指定できるようにする設定例トップページなどで一定数の商品をリスト表示するために使用する特集コレクションセクションで、最初の商品画像ではなく、指定した番号の商品画像を表示させる方法です。<br>一定の順番ルールで商品カラーバリエーション画像などを登録しているストアで、特定のカラーに絞って表示させる際に使用したりすることができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」でバリアントを持たない商品が売り切れ時に「今すぐ購入」ボタンが購入できそうに見えてしまっている状態を修正する設定例テーマ「Dawn/Rise」の商品詳細ページで、バリアントが１つだけの商品が売り切れている場合、「今すぐ購入」ボタンが購入可能な状態に見えてしまっているので、これを修正する設定例です。いずれ、この不具合が解消されるかもしれないため、商品の売り切れ状態を判別しJavascriptを使って「今すぐ購入」ボタンに状態を変更しています。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の特集コレクションに「商品をまとめてカートに追加する」ボタンを追加する設定例すでにアプリで一括購入できる機能は多々提供されていますが、テーマ「Dawn/Rise」の特集コレクションを活かして、そのセクションにまとめ買いボタンを設置する方法です。おすすめされている商品をまとめて購入したいユーザーにとって、購入ステップを簡略化することができるため、コンバージョン率向上が期待できます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の特集コレクションをカルーセルスタイルで表示する際にデスクトップ画面での左右送りボタンをクリックしやすいように調整する設定例Rise/Dawnテーマで非常に使う機会の多い特集コレクションですが、「デスクトップでカルーセルを有効にする」を有効にした際に表示される、カルーセルの左右送りボタンが少々小さいため、大きく表示させたいというリクエストをいただくことがあります。そこで、デスクトップ画面でストレスなく商品を閲覧できるように、クリッカブルエリアを大きくしつつ、左右に動かせることがすぐにわかるように左右送りボタンを商品リスト上に配置する設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyでコレクションの絞り込みにアプリ「Search&Discovery」を使っている場合に絞り込み条件の値に「任意のラベル」を設定する方法Search & Discoveryアプリを使っている場合に、絞り込み値の表示名をより直感的なラベルに変更する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」のヘッダーの見た目を周囲にシャドウを落としたフローティングスタイルに変更する設定例Rise/DawnテーマのヘッダーにカスタムCSSを追加するだけの手軽な設定で、印象を変えられるカスタマイズ方法です。シャドウ効果でモダンな浮遊感を演出します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページ「折りたたみ可能なコンテンツ」で「最初から開いておく行」に「任意の行」を指定できるようにする設定例（その２）こちらの設定方法（https://store-dojo.com/products/2024-12-22）は、最初に開いておきたい行を”１つだけ”指定できるようにするものでしたが、今回はコンテンツ行を複数指定できるようにする設定方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品詳細画面で注文前の事前承認モーダルを表示する設定例購入いただく前に何かしら承認を取っておきたい情報を掲載したい場合に、モーダルウィンドウを表示し、「承認」が取れたら以降は表示しないようにする方法です。cart attributesを使って承認状態を保持するので、注文情報に承認済みであることの証左を残すことができます。間に１ステップ挟むことになるので、カート追加率は下がってしまいますが、それでも了承いただく必要がある時などに使うことが想定されます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
Claude Codeを使い、空いた時間でShopify アプリをゼロから本番デプロイまで作り切ってみました。今回試しに作成してみたのは「お気に入り（ウィッシュリスト）」アプリなのですが、作業を始めてからおよそ１日ほどで仕上がりました。
個人的にの「どこまで出来るかやってみた企画」のつもりだったんですが、かなりの頻度でAIと壁打ちを繰り返した結果、普通にリリースできるレベルのものが完成してしまって驚いています。
作ったのは、商品だけでなくブログ記事や固定ページもお気に入り登録できるアプリ。ゲスト状態での登録やログイン後の自動マージにも対応し、管理画面では顧客別・アイテム別の統計やタグ付けまで一通り実装しました。
技術スタックは React Router v7 + React 18、Prisma + PostgreSQL。ホスティングは http://Fly.io を使い、アクセスがない時はマシンを自動停止させて無料枠に収まるようにしています。通知システムも作成し、Webhookで在庫や価格の変動を検知して「在庫少アラート」「再入荷通知」「値下げ」をメールやShopify Flowで飛ばせるようにしています。
ただ、やってみて痛感したのは「AIはコードを爆速で書いてくれるが、プラットフォームの仕様（ドメイン知識）は人間がカバーしないと詰む」ということでした。
実際、開発中はShopify特有の罠にかなりハマりました…。
・Flowトリガーを拡張で作ったものの、カスタムアプリだと「Shopify Plus限定」で動かないことに後から気づく
・GraphQLでCustomerデータを取るには「Protected Customer Data」の申請が別途必要
・shopify app dev を実行するとアプリURLがCloudflareトンネルに書き換わり、本番URLに戻すには再インストールが必要になる（開発ストアのみの話ですが焦りました）
・i18n対応で、ストアフロント用（.json）とテーマエディタUI用（.schema.json）の仕様の違いで翻訳が反映されない
・React Router v7のflatRoutesで、ドット区切りだと詳細ページが表示されずアンダースコアでのネスト解除が必要だったまだ「AIに全部おまかせ」では完成させることができませんが、Shopifyの仕様のクセさえなどを理解し、適切に人間がディレクションしてあげれば、個人開発でも相当にリッチなアーキテクチャがたった1日で組めてしまう、正直、とんでもない時代になったと実感しました。
今回の泥臭い試行錯誤の記録は全てドキュメントに残したので、次のアプリ開発の効率はさらに上がりそうです。
#Shopify #ShpoifyApp #ClaudeCode
-
【Shopify TIPS】
ShopifyでJavascriptを使わずにCSSだけでモーダルウィンドウを実装する設定例年末年始のお知らせなど、一時的なモーダルウィンドウを追加したい際に、Javascriptを使わずにサクッとCSSだけで実装する方法です。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントごとに価格が異なる商品に対して、価格表を掲載する設定例テーマ「Dawn/Rise」の標準仕様のため異なる価格のバリアントを持つ商品は、バリアントを選択して価格を確認する必要があります。<br>予めバリアントごとの価格表を表示しておけば、お客様がストレスなく商品を選ぶことができます。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
スレッド
-
@ecom_panda Well, there are some tips for product info on Shopify store like these: https://store-dojo.com/en-us/search?q=product+info&options%5Bprefix%5D=last
Although not all of them are ways to keep product information clean. -
【Shopify TIPS】
Shopifyのテーマ「Rise/Dawn」の商品ページでバリアントピッカーがボタンタイプの場合にバッジを表示する設定例：その２こちらの方法（https://store-dojo.com/products/2024-12-23）は商品バリアント名に直接バッジを記載する方法でしたが、商品管理や受発注への影響を避けるためバリアント名自体は変更せず、バリアントピッカーにバッジを表示する方法です。運用難易度が少々上がってしまいますが、JSON形式の商品メタフィールドを使ってバッジを表示させたいバリアントを指定します。
（詳細はスレッドのリンク先に記載）
#Shopify #ShopifyTIPS
