Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
Shopify CEOのTobiが、Karpathyのautoresearch（コーディングエージェントに数百の実験を自動で回させるフレームワーク）を使って、Liquidエンジン本体のパフォーマンス改善を行ったというお話。テンプレートの書き方ではなく、それを動かす処理系側の最適化で、パース+レンダリングが53%高速化、メモリ割当61%削減とのこと。これらの変更が実際に本番に反映されれば、テーマ開発者が何もしなくても全ストアが速くなる性質の改善なので、インパクトが大きいですね。
ただ、それ以上に面白いのは、これだけの規模の企業のCEOが「再びコーディングできるようになった」ということ。AIエージェントに的確な指示が出せれば、長時間コードに向き合わなくても技術的な成果が出せてしまう、経営者の方にとっても相当に大きな変化ですね。
-
【Shopify TIPS】
Shopifyの /collections ページ、デフォルトだと全コレクションがそのまま表示されてしまうため、テスト用に作ったコレクションやまだ整備中のものまで見えてしまうのは困ります。そこで、Horizonテーマで表示するコレクションを個別に選び、順序も自由に並び替えられるようにする設定方法です。テーマエディタだけで完結します。
スレッド
詳しい手順はこちら
-
【Shopify TIPS】
2026年1月にShopifyのテーマファイルで使用するLiquidの入力設定タグとして新たに追加された「article_list」、複数ブログから記事を横断的にピックアップできるので特集やおすすめ記事の表示に便利です。ただ、新着記事は自動反映されないので、従来のblog.articlesとは用途が異なります。それぞれの特徴と、複数ブログの新着を自動表示したい場合のLiquidでの対応方法も含めてまとめました。
https://store-dojo.com/blogs/tips/shopify-article-list-setting
-
【Shopify TIPS】
「価格順」を出すと競合比較されやすかったりすることもあり、コレクションページの並び替えオプションは、全部出しておけば良いというものでもなかったりします。Horizonテーマで特定のソート項目を個別に非表示にする方法をまとめました。カスタムLiquidセクションにコードを貼るだけなので、テーマ本体は変更しません。
https://store-dojo.com/products/2026-03-19
-
【Shopify TIPS】
HorizonテーマでSALEバッジを「20% OFF」や「1,000円OFF」に変えたいというケースをモデルに、テーマファイルのカスタマイズの具体的な手順をまとめてみました。従来のテーマ「Dawn」の改修方法と比較して、どのような点が異なるのかを整理しています。Horizonのブロックアーキテクチャでは構造の理解がかなり重要なポイントとなります。そして、実は先日ブログに投稿した公式推奨の「ベンダーファイルを触らないcustom.*方式」で対応しようとすると、１つのカスタマイズ専用ファイルを設置するために、関連する11ものベンダーファイルを変更しなければならないという本末転倒な状況になります。
そこで現実的な落としどころとして、直接編集＋設定項目追加＋Git管理というアプローチについてまとめました。
https://store-dojo.com/blogs/tips/horizon-product-card-badge-customization
-
【Shopify TIPS】コレクションページをランキング形式で見せたい、というご要望は多いです。売れ筋やおすすめ順が一目でわかるとお客様の購買判断を後押しできます。
Horizonテーマで「カスタムLiquid」セクションにコードを貼るだけで実装できる方法をまとめました。上位3位は色分けバッジ付き、ページネーションや無限スクロールにも対応しています。今回もHorizonのカスタマイズ方針に則り、テーマのオリジナルファイルは一切変更していません。
https://store-dojo.com/products/2026-03-17
-
【Shopify TIPS】Shopifyの「ページ」でも専用のOGP画像を表示したい、というご要望をいただくことがあります。
ページにはブログ記事のように「画像」を設定する項目がないため、SNSでシェアするとホームと同じOGP画像が表示されてしまいます。
Horizonテーマでメタフィールドを使ってページごとにOGP画像を出し分ける方法をまとめました。テーマのベンダーファイルを直接編集しない方針に沿った対応方法です。
https://store-dojo.com/products/2026-03-16
-
【Shopify TIPS】Horizonのヘッダーメニューのデフォルトメディアタイプ設定はコレクション画像をメニューに表示できて便利です。
今回はさらに一歩進めて、商品のサムネイルをデスクトップ・モバイル両方のメニューに表示するカスタマイズ方法です。以前Dawn用に作成したものをHorizon用に調整しなおしました。サブメニューに商品を設定し、カスタムLiquidセクションにJavaScriptとCSSを追加することで実現できます。
https://store-dojo.com/products/2026-03-15
-
【Shopify TIPS】
Horizonテーマのメニュー「メディアタイプ」設定、3つの選択肢でそれぞれ画像の取得元が違います。どの設定でどの画像が表示されるのか掴みづらかったので、全パターン試して整理しました。◆ コレクション画像 → 子メニューの各コレクション画像をグリッド表示
◆ 特集商品 → 親メニューのコレクションから商品カードを表示
◆ 特集コレクション → 親と子のコレクションをカード表示
※リンク先がコレクション以外の場合は自動的にテキスト表示のみになります。 -
リリース前に"答え合わせ" -- SimGymがストア構築に与える影響
ShopifyのSimGymを早速使ってみました。SimGymは複数のAIのショッパーにストアを巡回させることで、テーマ変更の影響を様々な角度から検証し、比較判定してくれるアプリなんですね。
そして個人的な感想ですが、このツールが今後のストア構築に大きく影響しそうだと感じました。ストアの構築やカスタマイズは事前に要件定義や設計を入念に行った上で進めますが、最終的に売上にどう影響するかは、やはりリリース後の実績をもって判断するしかありません。
もちろん、SimGymはあくまでもAIショッパーによるシミュレーションなので、売上が担保されるというわけでは無いかと思います。ですが、リリース前に購買体験への影響が何らかのスコアとして見えるようになること自体は、個人的にも非常に大きな変化だと感じています。
せっかく時間もコストもかけてカスタマイズしたのに、そのストアのスコアが低かったとしたら、やはりそのままリリースすることはできない可能性が高いと思います。ですので、今後は構築途中でもシミュレーションを挟みながら、スコアが落ちていないかを随時確認しつつ進めるやり方になっていきそうです。途中確認した結果、公開スケジュールがずれたり追加のコストが発生する可能性はあります。ですが、公開後の不安を抱えたままリリースしなくてよくなるのは、マーチャント様や開発を担当される方双方にとって安心材料になるのではないかと思います。
-
【Shopify TIPS】管理画面で注文を編集したのに、顧客側の注文履歴に反映されない —— この件、マーチャント様からお問い合わせをいただくことがあります。
新しい顧客アカウントページではこの制限がなくなり、編集内容がリアルタイムで顧客側に表示されるようになりました。注文修正後すぐに「確認してください」と案内できるので、問い合わせ対応の流れもスムーズになりますね。 -
【X記事】Prestige開発者のHorizonテーマブロック対応方針から考える、テーマアーキテクチャの選択
Shopifyのテーマ「Horizon」がリリースされ、テーマブロックの多重ネスト構造やAIセクション生成など、テーマのアーキテクチャがかなり変わりました。…
https://x.com/i/article/2031669897277882368
-
完全に個人用なんですが、Horizonテーマのセクションとブロックの構成を俯瞰できるツールを作成してみました。
https://store-dojo.com/blogs/tips/horizon-section-inventory-toolHorizonはこれまでのテーマと違い、セクション・ブロック・スニペット・アセットが非常に細分化されていることもあり、「このブロックどこから呼ばれてる？」を調べるだけでもかなり手間取ってしまうことが多かったものでして...。
カテゴリ別フィルターやテキスト検索をできるようにし、またブロックについては呼び出し元のファイルもわかる様にしているほか、ヘッダーにあるURL入力欄に管理画面のテーマエディタURLを入れることでコード編集画面の該当ファイルを開いてくれる直リンク機能などを搭載しています。
-
Shopify MagicのAIブロック生成機能ですが、管理画面が日本語のままで使えるようになっていますね。言語設定を切り替えなくて済むのは助かります。
ところでこれを機に、日本語で全く同じ指示を出した際にShopify MagicとClaude Codeでどんな結果になるのかを試してみました。（AI生成機能はHorizon以外の既存テーマでも使えるので、自分のストアで採用しているDawn上で実行してみました）
結果を見た感じでは、Shopify Magicはデザイン性の高いブロック（雑誌のような編集レイアウトや、アニメーション効果のある見出しなど）に適性があり、一方、ロジック重視のブロック（今回試した商品とブログ記事が混在する更新履歴など）は、引き続き手元でコード編集した方がよさげな印象でした。
ちなみに今回のプロンプトはこちらです。
「ストア全体の商品とブログ記事を対象に、最新の5件を公開日の降順（新しい順）で表示するセクションを作成して。各項目には公開日とタイトルを含めて、クリックしたらそれぞれの詳細画面に遷移するようにして。」
-
クラウドサーバ上で動くClaude Codeが結構便利でした。
- 外部APIを使うタスクが実行可能
- 24時間稼働で定期タスクも確実に遂行
- Telegramを使ってスマホからサーバー上のClaudeに作業指示
- Maxプラン範囲内なのでAPI従量課金なしCoworkのスケジュール機能を使って色々なタスクを自動実行させたかったのですが、PCが起動中でないと実行されないのと、X検索API（Grok API）などの外部API連携ができなかったので断念。
そこで、OpenClawをテストする目的で契約していたクラウドサーバーにClaude Codeをインストールして、リモートで操作する環境を構築してみました。（OpenClawはGeminiやClaude APIの従量課金がプランとは別に必要になってしまい、自分の利用ペースだとものすごい勢いでクレジットを消費してしまうので一旦諦めました...）
構築した24時間稼働Claudeを使って、cronでclaude -pを毎朝実行し、Shopifyに関するニュースやプレスリリース、Shopify Changelog、そしてShopifyに関するXの直近の話題をAPIで検索させるなどして、Slackに送ってもらっています。
またTelegramを繋いで、スマホからアプリ構築してみる実験も始めています。
先日発表されたClaude Code Remote ControlはローカルPCのセッションに接続する仕組みなので、MacBookを持ち歩いている間は使えないのが難点でした。クラウドサーバーならその心配がなく、常時スマホから指示が出せるので助かります。
※動画キャプチャのデモ画面は時間を縮めて掲載しています。実際の応答はもっと時間がかかっています。
-
先日弊社CPOの @KazukiN74451 さんに「Claude in ChromeをMCP経由でClaude Codeから動かせる」と教えもらって（https://x.com/KazukiN74451/status/2017236773869670837）から、メインでClaude Codeを本格的に使い込むようになりました。
そうして使い込むほどにその利便性にハマりまして、様々なディレクトリでプロジェクトを立ち上げるようになったのですが、その結果、あまりにもプロジェクトを立ち上げすぎたせいで、今度は過去のセッション履歴がどこに何があるか把握しきれなくなってきてしまいました。
そこで、全プロジェクト横断で検索・管理できるデスクトップアプリを作ってみました。過去のセッションからナレッジを自動抽出してMEMORY.mdを生成する機能もつけたので、セッションをまたいだ記憶の引き継ぎが個人的にはかなり楽になりました。
◆ セッション管理
プロジェクト一覧 → セッション一覧 → 会話内容の3カラム構成で、「あの件どのフォルダだっけ」がなくなり、セッションを選べばそのままフォルダに移動してClaude Codeの再開もすぐにできるようにしてみました。◆ MEMORY.md生成
各セッションから決定事項・修正内容・依存関係変更を正規表現で自動抽出し、文章整理だけclaude -pに渡す2段構成です。claude -pはサブスクリプション内で動くのでAPIを別途使用するコストはかかりません。生成したMEMORY.mdはプレビューで確認・編集してから保存。指示を入れて再生成させることもできます。複数プロジェクトの一括MEMORY.md生成にも対応しています。技術スタックはClaude Codeにお任せした結果、Tauri + Rust + Reactに。Claude Codeに全て書いてもらっています。
-
Horizonテーマはコード編集を避ける設計思想ですが、それでもコードに手を入れなければならないケースはあります。そして、いざコードを開いてみると、「テーマブロック」という新しいアーキテクチャにより、ブロックの仕組みが従来と大きく変わっていることに気づきます。
従来のDawnなどはセクション内で `{% for block in section.blocks %}` とループするだけでしたが、Horizonでは「動的ブロック」と「静的ブロック」という2つの呼び出し方が加わり、これらの混在が標準になっています。全39セクション・94ブロックのコードを解析し、呼び出しパターンをA/B/Cの3分類に整理してみました。
カスタマイズ前に把握しておくとコードの見通しがだいぶ変わってくるかと思います。
https://store-dojo.com/blogs/tips/shopify-blocks-invocation-patterns
-
Shopify用アプリを作っていて、インストール後の初期設定などをClaude CodeからAPI経由で動かせるようにしたところ、手動でやっていた設定時間がほぼゼロになりました。動作確認もClaude in Chromeでテストケースを流して自動化できるようになり、開発・検証サイクルがかなり速くなっている実感があります。
UIは人間用に作りつつ、設定や運用操作はAPIでもできる状態にしておく。この「AI操作前提の設計」は、アプリに限らず今後のShopify開発全般で意識しておいた方が良さそうですね。
-
Shopify公式テーマ「Horizon」のv3.4.0が2月18日にリリースされていたので、変更内容をブログにまとめてみました。ストア運営に影響しそうなポイントは主に2つです。
・1つ目は、テーマ独自のアカウントUIが廃止され、Shopify公式の<shopify-account>コンポーネントに一本化されたとのこと。ここは影響が大きめです。
・2つ目は、バリアントが1つしかない商品で、ドロップダウンの代わりにテキスト表示になったこと。地味ですがUIがすっきりします。今回のように、UIコンポーネントの置き換えといった大きめの改善もテーマアップデートに含まれてきます。運用中のストアでも、いつでもアップデートを取り込める状態にしておくと、こうした恩恵をスムーズに受けられます。
（詳細はスレッドのリンク先のブログに記載してあります）
#Shopifyスレッド
Horizon v3.4.0アップデート解説 ― アカウント管理の刷新と単一バリアント表示の改善
https://store-dojo.com/blogs/tips/horizon-v340-update
