Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
2026年4月の投稿 絞り込みを解除
-
【Shopify TIPS】
Rewind Backupsを使うと、商品・顧客データ・テーマ・メタフィールドなどを毎日自動でバックアップし、必要なときに個別または一括で復元できます。あらゆるデータがバックアップできるわけではないので過信は禁物ですが、何かあった時のために過去のデータを復帰できるのは助かります。
詳細はスレッドにて。
スレッド
Shopifyストアのデータを自動バックアップ・復元するアプリ「Rewind Backups」
https://store-dojo.com/products/2026-04-12 -
@sh_sakamoto Solid plan, heads up Shopify can permanently remove data without confirmations, export backups and test changes in a dev store first
-
Shopify AI Toolkitを本番ストアで使う前に、整えておきたいことをまとめてみました。
AI経由の操作には管理画面の確認ダイアログがなく、Shopifyには削除・編集したデータを元に戻す方法がありません。商品を削除すれば外部ツールとの連携が外れ、一度失った情報は二度と戻せなくなります。
こうした事故を防ぐために、AIを使う際の運用ルールと、AIに読み込ませておきたい作業ルールの例を掲載しています。付録として、実際に動作検証したルールプロンプトもそのまま掲載してみました。
-
Shopifyから「AI Toolkit」という公式のAIプラグインがリリースされました！ありがたいですね。ざっくり調べたところ、こんなことができるようになったようです。
まず「コード生成＋検証」。AIがGraphQLやLiquidを書くと、http://shopify.devの公式スキーマ定義に基づいてバリデーションをかけてから返してくれるようです。検証が通るまでコードを返さない設計のようで、「動かしてみたら存在しないフィールドだった」が起きにくくなりそうです。
もう1つは「ストア実行」。検証済みのAdmin GraphQLを、Shopify CLI経由で実際のストアに対して実行できるようです。商品・在庫・注文・メタフィールドなど、管理画面でできることの大半をAI経由で操作できるようになるようですね。
一方で、テーマファイルの直接デプロイやアプリのデプロイはまだスコープ外のようです。Liquidは「正しいコードを手元に生成するところまで」で、ストアへの反映は自分でやる設計のようです。この辺りは今後の拡張に期待でしょうか。
AIが推測で書くのではなく、公式スキーマを参照して検証済みのコードだけを出力できるようになるだけでもとても助かるのでありがたいですね。
スレッド
Admin GraphQLの編集権限範囲が広くて強力ですね。
例えばブログ記事はAIにHTMLを編集してもらえば複雑なレイアウトも自在に投稿できますし、様々な条件でコレクションを作成した後でヘッダーメニューにまとめて登録、なんかもすぐにできてしまいます。
-
【Shopify TIPS】
Horizonテーマで、ページをブログのようなサムネイル付きグリッドで一覧表示したいときの設定例です。メタフィールドでサムネイル画像や掲載除外指定を管理し、カスタムLiquidブロックで呼び出す構成にしています。表示順序の制御や、一覧から除外するページの指定はコードの中身で対応しています。
詳細はスレッドにて。
スレッド
【Horizon】ページをブログのようにサムネイル付き一覧で表示する設定例
https://store-dojo.com/products/2026-04-09 -
ご活用いただけて何よりです！Horizonで機能追加する時はカスタムLiquidの方が手軽で影響範囲を限定できるので管理しやすいですよね。
Dawnはjsの処理が内部化されててユーザーイベントを取りづらかったのですが、Horizonの場合、テーマブロック化の恩恵で、どこからでもイベント検知できるようになったので連動処理を実装しやすくなりました。そこはメリットかもしれないですね〜。 -
Shopify公式テーマ「Horizon」のv3.5.1が3月19日にリリースされていたので、変更内容をブログにまとめてみました。207ファイル・約4,200行の変更と、かなり大規模なアップデートです。
運用中のストアに影響しそうなポイントは主に3つです。
・1つ目は、CSSの分離リファクタリング。base.cssから約800行が各スニペットへ切り出されました。直接CSSを編集してカスタマイズしている場合は、コードの場所が変わっている可能性があります。
・2つ目は、アクセシビリティの大規模改修。30以上のファイルにわたってaria属性の追加・見出し階層の整理などが行われました。
・3つ目は破壊的変更で、ヘッダーロゴの水平padding設定が削除されました。テーマエディタで調整していた場合は再設定が必要です。大規模な内部改修が入るアップデートが続いています。カスタマイズ済みのストアほど、アップデートを取り込む際に差分確認のコストがかかるのが悩ましいですね。。。
詳細はスレッドのリンク先のブログに記載してあります
#Shopifyスレッド
Horizon v3.5.1 アップデート解説 ― CSS分離・アクセシビリティ大改修
https://store-dojo.com/blogs/shopify-tips-blog/horizon-v351-update -
【Shopify TIPS】
Horizonテーマのカート画面に「あといくらで送料無料」バーを追加する方法をまとめました。テーマファイル本体は一切触らず、カスタムLiquidセクションにコードを貼るだけで実装完了。設定が必要な箇所は送料無料の金額と遷移先URLの2か所だけです。
Horizonの「Section Hydration」に対応しているので、商品を追加・削除するたびにページリロードなしで残り金額がリアルタイム更新されます。送料無料に到達した瞬間、メッセージも自動で切り替わる仕様です。
詳細はスレッドにて。
スレッド
【Horizon】カート画面に「あといくらで送料無料」を表示する設定例
https://store-dojo.com/products/2026-04-07 -
【Shopify TIPS】
先日のHorizonドロワーメニューバナーの実装に、テーマ本体を一切変更しない「カスタムLiquid＋JavaScript版」を追加しました。方法1はテーマエディタから画像・リンクを設定できる本格実装（5ファイル変更）ですが、方法2は「カスタム Liquid」セクションにコードを貼るだけで動きます。変更ファイル数はゼロなので、テーマアップデートの影響を受けないのがメリットです。
なお、Horizonはページ遷移を高速にする目的でページ表示直後にHTMLの外枠だけ読み込み、後からJavaScriptでドロワーの内容を更新する仕組み（Section Hydration）になっています。その完了タイミングを検知するため、Dawnに比べるとこちらも少々複雑なJavascriptコードになっています。
-
【Shopify TIPS】
Horizonのドロワーメニューにキャンペーンバナーを表示したいというケースをモデルに、テーマファイルのカスタマイズ手順をまとめました。従来の「Dawn」での実装方法と比較して、どのような違いがあるかも整理しています。Dawnであれば1ファイルの修正で完結する変更ですが、Horizonはメニュー周りのファイルが分離されているため、まずどのファイルを触ればいいかを追跡するところから始まります。
header.liquidから始まり、_header-menu.liquid、header-drawer.liquidと3段階たどって初めて目的のファイルにたどり着きます。Horizonのカスタマイズでは構造の理解が前提になります。なお、今回もHorizonの公式推奨である「custom.*ファイルを新設する方式」を採用していません。content_forのtype指定がベンダーファイルにハードコードされているため、カスタムブロック経由にしようとすると結局ベンダーファイルの変更が必要になってしまい、芋蔓式に他のベンダーファイルも「custom.*ファイル化」しなくてはいけなくなってしまうためです。
直接編集＋設定項目追加の方が変更箇所が少なく、現実的な落としどころではないかなと判断しています。スレッド
【Horizon】ドロワーメニューにバナー画像を表示するカスタマイズ
https://store-dojo.com/blogs/tips/horizon-drawer-banner-customization -
【Shopify TIPS】Shopifyのテーマ「Horizon」のドロワーメニュー上部にバナー画像を表示する設定例
DawnではLiquidファイル1つの修正で済んでいた実装ですが、Horizonはアーキテクチャが異なるためスキーマやスニペットなど複数ファイルの編集が必要になります。設定が完了するとテーマエディタから画像とリンク先を変更できるので、キャンペーンバナーや特集ページへの誘導に使いまわせます。
詳細はスレッドに掲載しています。
スレッド
【Horizon】Shopifyのテーマ「Horizon」のドロワーメニュー上部にバナー画像を表示する設定例
https://store-dojo.com/products/2026-04-04 -
AmazonがAIによるレビュー要約を導入してしばらく経ちますが、先日Shopifyへの全ベットを表明したレビューアプリhttp://Judge.meでも同様の機能が追加されたようですね。
最大500件の公開レビューをAIが分析して、要約文とセンチメントキーワードを自動生成し、商品ページやトップページにウィジェットとして埋め込める仕組みです。30日ごとに自動更新されるので、レビューが溜まるほど精度も上がっていきそうです。
Awesomeプランが必要で、現状キーワードは英語のみ対応とのことなので、日本語ストアでの実用はもう少し先になりそうですが、レビューの活用方法として面白い方向だと思います。
スレッド
詳細はhttp://Judge.me公式ヘルプに記載されています。
https://judge.me/help/en/articles/13672572-ai-reviews-summary-widget -
GoogleとShopifyが「Universal Commerce Protocol（UCP）」というオープン標準を策定しています。AIエージェントがユーザーの代わりに商品を探し、カートに入れ、チェックアウトまで行う仕組みです。
以前書いたACP（OpenAI/Stripe側）と比べると、ACPはAIが商品を「見つける」ための仕組みです。UCPはそこからさらに先、カート・チェックアウトまで購買フロー全体をカバーしていて、ストアの外で購入が完結しうる設計になっています。両陣営合わせると、「AIが買い物を代行する」基盤が整いつつありますね。
ただ、この件に関してはストア側で今すぐやるべきことは、正直まだ限られています。Shopifyの詳細な対応手順もまだ公開されていません。なので、今できることは以前の記事で書いた商品データの構造化でしょうか。プロトコルが何であれ、データが整っていないストアはAIの候補に上がりにくくなると思われます。
焦る必要はないですが、流れとしては確実に来ていますね。
-
Googleが公式ブログでGooglebotのfetch上限について言及していました。HTMLは1URLあたり2MB（HTTPヘッダー含む）で、超えた場合はページが拒否されるのではなく、2MB地点でfetchが打ち切られます。
つまり2MB以降のバイトはfetchされず、レンダリングもされず、インデックスもされない、ということになります。
Shopifyストアだと特にトップページが大きくなりがちで、セクションを多く配置したり、アプリが増えてくるとHTMLサイズも膨らんできます。Liquidで動的に生成されるインラインCSS（{% style %}ブロック）やインラインJSもHTMLの一部としてカウントされるので注意が必要です。外部ファイルとして読み込まれるCSS/JSは別カウントですが、HTMLに直接埋め込まれたものはすべて2MBの対象になります。
ブログ記事ではベストプラクティスとして、重いCSS/JSの外部ファイルへの分離と、metaタグ・title・canonical・構造化データをHTMLの上部に配置することが挙げられています。カットオフで重要な要素が欠落しないようにするためですね。
ShopifyはLiquidでSSRされるのでJS描画サイトよりは有利そうですが、アプリの多いストアやセクション数の多いページは一度確認してみると良いかもしれません。
ちなみに確認したいページを開いて、ブラウザのコンソールでこれを実行すると簡易的にチェックできます：
t = await (await fetch(location.href)).text(); (t.length / 1024 / 1024).toFixed(2) + ' MB'
スレッド
参照: Inside Googlebot: demystifying crawling, fetching, and the bytes we process https://developers.google.com/search/blog/2026/03/crawler-blog-post