Xポストログ

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

2026年7月の投稿 絞り込みを解除

  • そうなんです。
    今回のHorizonアップデートはメジャーナンバーも上がっており、変更箇所の影響範囲が広いため、その点は特に注意が必要そうです(独自作成したセクションやカスタムLiquidで参照していたカラースキームが参照エラーを起こします)。

    Horizonのメジャーアップデートに伴う破壊的変更は非常に悩ましいところです。ただ、ShopifyがAIに全振りしている状況を踏まえると、新機能がリリースされるたびにその恩恵を最速で受けられるのは最新のHorizon、という前提に立つと、結局アップデートし続けるしかないのかな、というのが悩ましいところですね。

    なので、Horizonについてはコードレベルの修正はできる限りかけない方が良さそう、という認識になりつつあります。

    Xで見る
  • 【Shopify TIPS:テーマHorizon】
    Horizon v4アップデートで最大の変更だったカラーシステム、仕組みを詳しく見てみました。

    新方式は3層構造。①パレットで背景+メインカラーを決めると、②スマートコントラストやホバー色が自動計算され、③ボタン・入力欄・カートなど各UIに適用されます。旧方式の「6スキーム×約50項目を手動指定」から、色を一元化して自動導出する形に変わりました。

    便利な一方、"セクション単位で束ごと配色を当て替える"使い方は1操作ではできないなどクセもあるので、そのあたりも整理しています。

    https://store-dojo.com/blogs/tips/horizon-color-palette

    #Shopify #Horizon

    Xで見る
  • 【Shopify TIPS:テーマHorizonアップデート】
    Horizonがv4.1.1にアップグレードされたので、要点をまとめました。

    最大の変更はカラーシステムの全面刷新で、パレットを1つ定義すれば各UI要素が自動参照する方式に。DisclosuresブロックやShopify Inbox統合、カートの再設計なども入っています。

    ちなみに、色々と手を加えているテーマにアップデートをかけたところ、最初は失敗してしまいました。「変更をプレビューするには配色を定義する必要があります」というエラーにハマってしまったのですが、その対処法も記事にまとめています。カスタムCSSや独自セクションを持つストアは特に事前確認が必要そうです。

    https://store-dojo.com/blogs/tips/horizon-v411-update

    #Shopify #Horizon

    Xで見る
  • Shopifyパートナー向けの本人確認、自分のDev Dashboardにも画面が出てきました。マーチャントストアへのアクセスをリクエストする画面の上部に「まもなく本人確認が必要になります」と案内が出ていて、進むと決済パートナーであるStripe経由で、写真付き身分証の撮影と顔写真(生体認証)による確認、という流れでした。

    我々のようにマーチャントのストアに入って作業するパートナーに影響する話で、新しくコラボレーター申請を送る人がそれぞれ本人確認を必要とする形のようです。いまはまだ任意ですが、必須化されると申請を出す係が未確認のところで止まってしまうので、早めに済ませておいたほうが良さそうですね。

    https://shopify.dev/changelog/identity-verification-for-partners

    #Shopify

    Xで見る
  • 【Agentic commerce:UCPカタログ利用サイト例】
    自分がクックパッド出身だから、というわけではないのですが、「作りたい料理」を指定すると、そのまま材料を購入できてしまうページを、ShopifyのUCP(Universal Commerce Protocol)カタログを使って作ってみました。

    料理を選ぶ(または写真をアップする)と、AIがレシピと分量を出し、各材料を全マーチャント横断のカタログから検索してくれます。また、必要な分量に近い商品が「おすすめ」として推奨され、そのままカートへ入れられます。単一ストアに縛られず材料が集まるのが横断カタログならではで、購入まで繋がるのが面白いところですね。サーバも立てずGAS単体で動かしています。(今回は実際にClaudeのAPIを使ってレシピに合致する商品を検索させています)

    ちなみにUCPカタログを使いつつも、決済周りをUCP対応にするところまではまだ正式にリリースされていないので、カートに追加した商品を個別に各サイトで決済しないといけない状態です。

    ※実際のページは詳細リンクに掲載しています。

    #Shopify #UCP #ShopifyEditions


    スレッド

    Cookart — 作りたい料理の材料を、ちょうどの分量で。
    https://script.google.com/macros/s/AKfycbywLR5SnKxAFFMFZPTxnTu410gtBPJWrRvQbl9OzB7upaHid_eeKlAOSEba11XNQmC1/exec

    Xで見る
  • 【Shopify TIPS:Sidekick Adminアプリ】
    商品の「公開予定日」を販売チャネル別に一覧表示して、予定/公開済の確認から、その場での日時変更・即時公開までできるアプリです。Sidekickに貼り付けるプロンプトで実装できます。

    予約公開自体は標準機能ですが、"今どの商品がいつ公開予定か"を横断で見渡すのは意外と手間。そこを1画面に集約しています。

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

    #Shopify #Sidekick


    スレッド

    【Sidekick】商品の「公開予定日」を一覧管理する(公開予定日マネージャー)
    https://store-dojo.com/products/2026-07-08

    Xで見る
  • 【Shopify TIP:ABテスト(テーマ:Horizon)】
    Shopify Rolloutsとメタフィールドを使い、テーマはそのままに、デフォルト画像と差し替え画像を50%ずつ同時配信してA/Bテストする設定例です。写真以外は完全に同一条件、テーマHorizonを使った場合の具体的な手順です。

    ※このTIPSの詳細はスレッドに記載したリンク先に掲載しています。

    #Shopify


    スレッド

    【Horizon】Rolloutsで商品写真をA/Bテストする設定例|メタフィールドで商品ギャラリーを丸ごと差し替え
    https://store-dojo.com/products/2026-07-06

    Xで見る
  • そうなんです。
    今後、本格的にUCPが展開されると、会員先行販売などをストアフロント制御で行ってもAI経由で購入されてしまうので注意が必要ですね。

    Xで見る
  • 【Shopify TIPS:商品画像ABテスト】
    商品写真について「どれを主役にするか」「どの順で見せるか」「中身とパッケージのどちらを優先して見せるか」など、購入率の変化をABテストしたいとき、これまではLiquidコードをゴリゴリ書いて、かなりの手間をかけてテストしていました。(テーマファイルを丸ごと入れ替えてABテストするタイプのアプリは、別の項目が表示されないなどの運用上のリスクがあるので使えずにいました)

    Shopify Rolloutsを使うと、テーマファイルは同じまま画面の一部をユーザーごとに出し分けることができる上に、同時に配信できるので、非常にテストしやすくなりました。

    デフォルトの商品画像とは別に、メタフィールドに設定しておいた画像を表示する処理をテーマ側に用意しておくことで、「デフォルト画像を出すパターン」と「メタフィールドの画像を出すパターン」を同時に配信して評価できます。

    #Shopify

    Xで見る
  • 【Agentic Commerce:UCP】
    Shopifyで発売前の商品に在庫だけ入れておき、テーマ側では「予約中」と表示して購入ボタンを隠す、という運用をするケースがあります。
    この時、すでに在庫を入力済みで購入可能な状態にんっていると、テーマを経由しないUCP/Shop経由で商品に直接アクセスされ、そのまま購入まで進めてしまいます。

    実際に試してみたところ、ストアフロントで塞いでいた事前告知商品が、UCP経由で購入できてしまいました。発売前の商品を確実に止めたい場合、フロント側で隠すだけでは不十分といえます。

    在庫は0のままにしておいて販売開始時刻にMatrixifyなどで自動投入するか、Checkout Validation Function(チェックアウト側でサーバーサイドに購入可否を判定する仕組み)で発売前フラグを見て弾く、といった対応をしておく方が良さそうです。

    #Shopify #AgenticCommerce #UCP #ACP

    Xで見る
  • 【Shopify TIPS:テーマカスタマイズ】
    shopify theme dev、--port で別々のポート番号を指定すれば、localhost 上で異なるストアを並行して確認できるようになります。

    shopify theme dev --store http://storeA.myshopify.com --port 9292
    shopify theme dev --store http://storeB.myshopify.com --port 9293

    起動するとポートごとに、ローカルプレビュー(127.0.0.1:ポート)と、そのポートに紐づくテーマエディタURL(?hr=ポート)が返ってきます。手元のファイル編集もエディタ側の操作も双方向でホットリロードされるので、複数ストアを並行して進めたいときに便利です。

    #Shopify

    Xで見る
  • 【Agentic Commerce : UCP】
    Shopifyのグローバルカタログ(UCP)を使って、「開いているページに掲載されているものに近い商品」を出すブックマークレットを作ってみました。どんなページでもクリックひとつで、内容を読み取ってShopify全体のストアから関連商品を横断で拾い、その場で購入リンクまで表示できます。

    アフタヌーンティーの記事で試すと、各店のアフタヌーンブレンドや夏向けのお茶が並んで、思ったより実用的でした。

    今はページから抜き出したキーワードでテキスト検索しているだけですが、ここにLLMを一段噛ませて「このページで紹介されている商品」を調査してもらい、実際の商品そのもの、もしくはそれに近いものをサジェストさせるようにすれば、より親和性の高い提案に引き上げられそうです。
    「この商品探して」or「これに近い商品探して」がその場でできますね。

    #Shopify #AgenticCommerce

    Xで見る
  • そういえばSidekickで生成したブロック、ゴミ箱ボタンで削除できるようになっていたんですね。気づいていませんでした。

    何度か作り直して似たような名前のブロックが増えてしまったときに整理できるのは便利です。

    ただ一覧では"どれをいつ作ったか"までは分からないので、同じ名前が並んでいると取り違えやすいので、消すときは注意が必要そうです。

    #Shopify

    Xで見る
  • Shopify Editions Spring '26 で紹介されていた「ストアフロントの標準イベント&アクション」ですが、これまでは、アプリや独自Javascriptを使ってストアのカートを操作するのに、テーマのHTMLを推測して読み解いたり、通信を横からキャッチしたりする必要がありました。

    今回、Shopify共通の「命令」(Shopify.actions.openCart など)と「イベント通知」(shopify:cart:lines-update など)が用意されたことで、テーマの中身を知らなくても操作や状態取得ができるようになりました。

    実際に試すと、対応済みのHorizonではカートドロワーがその場で開き、未対応のDawnではカート画面に遷移する、という違いも見られました。今後のテーマアップデートで広く浸透すると良いですね。

    https://shopify.dev/changelog/standard-storefront-events-and-actions

    #Shopify

    Xで見る
  • @mijupom625 ただ、こちら、通常の「カートに追加」ボタンと併用しようとした場合、ネストされたLINEアイテムを渡すために別途jsを組む必要があるので、そこがちょっと手間になりそうでした。

    Xで見る