Xポストログ

Xで投稿したShopify関連の内容をそのまま記録しています。

  • ご活用いただけて何よりです！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」に対応しているので、商品を追加・削除するたびにページリロードなしで残り金額がリアルタイム更新されます。送料無料に到達した瞬間、メッセージも自動で切り替わる仕様です。

    詳細はスレッドにて。

    #Shopify

    スレッド

    【Horizon】カート画面に「あといくらで送料無料」を表示する設定例
    https://store-dojo.com/products/2026-04-07

  • Shopifyで検証用のデモ画面を作る際、商品データや画像、ブログ記事はもちろんのこと、メタフィールド定義とその値、タグなどそれなりに作り込む必要がある場合、Matrixifyを使ったり手作業で頑張ったりとこれまでは相応に時間を要する作業でした。

    それが最近は開発ストアにAPIを繋いだClaude Codeが一気に生成してくれるようになったので、かなりスピーディーかつバリエーション豊富に用意できるようになりました。マーチャント様との仕様確認もよりやりやすくなって非常に助かりますね。

    #Shopify

  • 【Shopify TIPS】
    先日のHorizonドロワーメニューバナーの実装に、テーマ本体を一切変更しない「カスタムLiquid＋JavaScript版」を追加しました。

    方法1はテーマエディタから画像・リンクを設定できる本格実装（5ファイル変更）ですが、方法2は「カスタム Liquid」セクションにコードを貼るだけで動きます。変更ファイル数はゼロなので、テーマアップデートの影響を受けないのがメリットです。

    なお、Horizonはページ遷移を高速にする目的でページ表示直後にHTMLの外枠だけ読み込み、後からJavaScriptでドロワーの内容を更新する仕組み（Section Hydration）になっています。その完了タイミングを検知するため、Dawnに比べるとこちらも少々複雑なJavascriptコードになっています。

    #Shopify

  • 【Shopify TIPS】
    Horizonのドロワーメニューにキャンペーンバナーを表示したいというケースをモデルに、テーマファイルのカスタマイズ手順をまとめました。従来の「Dawn」での実装方法と比較して、どのような違いがあるかも整理しています。

    Dawnであれば1ファイルの修正で完結する変更ですが、Horizonはメニュー周りのファイルが分離されているため、まずどのファイルを触ればいいかを追跡するところから始まります。
    header.liquidから始まり、_header-menu.liquid、header-drawer.liquidと3段階たどって初めて目的のファイルにたどり着きます。Horizonのカスタマイズでは構造の理解が前提になります。

    なお、今回もHorizonの公式推奨である「custom.*ファイルを新設する方式」を採用していません。content_forのtype指定がベンダーファイルにハードコードされているため、カスタムブロック経由にしようとすると結局ベンダーファイルの変更が必要になってしまい、芋蔓式に他のベンダーファイルも「custom.*ファイル化」しなくてはいけなくなってしまうためです。
    直接編集＋設定項目追加の方が変更箇所が少なく、現実的な落としどころではないかなと判断しています。

    #Shopify

    スレッド

    【Horizon】ドロワーメニューにバナー画像を表示するカスタマイズ
    https://store-dojo.com/blogs/tips/horizon-drawer-banner-customization

  • 【Shopify TIPS】Shopifyのテーマ「Horizon」のドロワーメニュー上部にバナー画像を表示する設定例

    DawnではLiquidファイル1つの修正で済んでいた実装ですが、Horizonはアーキテクチャが異なるためスキーマやスニペットなど複数ファイルの編集が必要になります。設定が完了するとテーマエディタから画像とリンク先を変更できるので、キャンペーンバナーや特集ページへの誘導に使いまわせます。

    詳細はスレッドに掲載しています。

    #Shopify

    スレッド

    【Horizon】Shopifyのテーマ「Horizon」のドロワーメニュー上部にバナー画像を表示する設定例
    https://store-dojo.com/products/2026-04-04

  • AmazonがAIによるレビュー要約を導入してしばらく経ちますが、先日Shopifyへの全ベットを表明したレビューアプリhttp://Judge.meでも同様の機能が追加されたようですね。

    最大500件の公開レビューをAIが分析して、要約文とセンチメントキーワードを自動生成し、商品ページやトップページにウィジェットとして埋め込める仕組みです。30日ごとに自動更新されるので、レビューが溜まるほど精度も上がっていきそうです。

    Awesomeプランが必要で、現状キーワードは英語のみ対応とのことなので、日本語ストアでの実用はもう少し先になりそうですが、レビューの活用方法として面白い方向だと思います。

    #Shopify

    スレッド

    詳細は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の候補に上がりにくくなると思われます。

    焦る必要はないですが、流れとしては確実に来ていますね。

    #Shopify #UCP #ACP

  • 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'

    #Shopify #SEO

    スレッド

    参照: Inside Googlebot: demystifying crawling, fetching, and the bytes we process https://developers.google.com/search/blog/2026/03/crawler-blog-post

  • @BlakeWisz Thank you for your comment. And I forgot about the English version — it's translated now.
    https://store-dojo.com/en-us/blogs/tips/agentic-commerce-product-data

  • いよいよ実装されるRollouts。
    テーマを丸ごと切り替えせずにセクションやブロック単位で変更できる上に、ABテストアプリで多かった「期間ごとに切り替え」方式ではなく、同期間で配信テストできるのが嬉しいですね。

  • 【Shopify TIPS】会員登録の導線、トップページのバナーやポップアップに頼りがちですが、購入ボタンのすぐ近くに置いてみるのも一つの手です。

    Horizonテーマの商品ページにカスタムLiquidブロックを追加するだけで、ログイン済みユーザーには非表示、未登録のお客様にだけ登録メリットを表示する設定例です。

    #Shopify

    スレッド

    設定方法の詳細はこちら
    https://store-dojo.com/products/2026-03-30

  • ShopifyのSimGymがアップデートされて、2つのテーマを比較しなくても単独のテーマを分析できるようになったとのこと。すでにメニューも管理画面で選択できるようになっていますね。

    ホームページ・商品ページ・コレクション・カートとページ別にフォーカスエリアを指定してAIのフィードバックがもらえるので、ページごとの課題を把握して対応する、といった使い方がしやすくなりそうです。

    #Shopify #SimGym

  • 先日、Shopifyのカテゴリーメタフィールドをきちんと埋めておくことがAI時代の検索で差がつくという話をポストしましたが、その具体的な対応方法をブログにまとめ　てみました。

    ShopifyカタログがChatGPTやGeminiなどのAIエージェントに商品情報を渡すための共通フォーマットを整備してくれるので、このフォーマットに沿って商品情報をきちんと登録しておいた方が良さそうですね。

    ブログのリンク先はスレッドにあります。
    #Shopify

    スレッド

    AIが商品を選ぶ時代に備える ― Shopify Agentic Commerce対応について
    https://store-dojo.com/blogs/tips/agentic-commerce-product-data

  • 【X記事】Horizon UI for FigmaからShopifyテンプレートを自動生成

    先日公開したHorizonテーマのUIデザインキットには、デザイン検証以外にもう一つの意図があります。テーマエディタで設定可能なセクション名やブロック名をFigmaのコンポーネント名と1:1で対応させることで、AIが各…

    https://x.com/i/article/2037384371200778240

  • ShopifyのエキスパートKurt Elster氏が、AIがECにもたらす変化について話している回。詳細は動画で語られていますが、特に興味深かったのは2点。

    1つ目は、ShopifyがUCP（Universal Commerce Protocol）という標準プロトコルを導入し、ChatGPTやGoogleなどのAI検索エンジンが膨大な商品カタログを迅速かつ正確に検索できるようにしているということ。販売者は商品の「カテゴリーメタフィールド」を詳細に入力することで、AIのおすすめ商品として自社製品が紹介される確率を高められるとのこと。

    2つ目は、従来のSEOに代わる「AEO（Answer Engine Optimization）」の重要性。JSONなどの構造化データを用いてページ内容をプログラミング的に明確にしておくことで、AIの処理負担を減らし、優先的にデータを読み取ってもらえるようになります。

    つまり、商品管理画面で「カテゴリー」を適切に選択し、カテゴリーメタフィールドをきちんと埋めておくことが、AIに商品を正しく認識してもらうための基本になります。後回しにしがちな項目ですが、これを丁寧にやっておくだけでAI経由の検索や提案で差がつく可能性があります。テーマ開発者としても、構造化データの出力品質がこれまで以上に重要になりそうです。

    #Shopify

  • AIでECのランディングページを作成する際、毎回ゼロから作るよりShopifyで固定テンプレートを用意しておいてそれをベースに改変した方が効率的だという話。

    これはまさにそうで、毎回ゼロから生成するとトークンも時間もかかるし出力の一貫性も崩れやすいです。なので、先にベースとなるテンプレートを作っておいて「これを○○向けに改変して」と指示する方が圧倒的に効率的です。
    Claude Codeのskillとして同じアプローチでやっていますが、テンプレートという「判断の基準点」があるだけでAIの出力精度がかなり安定します。

    #Shopify

  • 【X記事】Shopifyテーマ「Horizon」のUIデザインキット for Figmaを公開しました

    【2026-07-13 更新】Horizon v4.1.1で追加された「開示情報（Disclosures）」ブロック（商品ページ向けの折りたたみ／アコーディオン）をUI Kitに追加収録しました。…

    https://x.com/i/article/2036380565705048064

  • 【X記事】Google Stitchで作成したデザインをShopifyページに一気に実装するskillを試してみました

    Stitchの大型アップデート…

    https://x.com/i/article/2035683461042982912