Xポストログ
Xで投稿したShopify関連の内容をそのまま記録しています。
-
【Shopify TIPS】
テーマ「Horizon」のカートドロワー・カートページに「よくある質問」のアコーディオンを追加する設定例です。「ディスカウント」などと並列に表示されます。カートまで進んでいるお客様は購入直前で、「送料は？」「いつ届く？」「返品は？」といった最後の疑問が出やすいタイミングです。ここで別ページに離脱して戻ってきてもらえないと機会損失になりがちなので、カート内で即座に疑問解消できる導線は購買アシスト力が高いと感じています。
テーマファイル本体は触らず、テーマエディタに「カスタムLiquid」セクションを1つ追加するだけで動くシンプルな実装にしています。
スレッド
【Horizon】カートにFAQ（よくある質問）アコーディオンを追加する設定例
https://store-dojo.com/products/2026-05-03 -
【Shopify TIPS】
テーマ「Horizon」のフッターに「ページのトップに戻る」フローティングボタンを追加するブロックの設定例です。テーマエディタから色・サイズ・アイコンの太さ・シャドウ・位置・形状を変更できます。プライベートブロック（ファイル名先頭に `_`）として実装しているので、ブロック追加メニューには出てこず、フッターの固定パーツとしてだけ機能します。
なお、ベンダーファイルであるフッターセクション（sections/footer.liquid）とロケールファイルに手を加えていますが、こちらは影響範囲を限定するためカスタムファイル対応はしていません。
スレッド
【Horizon】フッターに「ページのトップに戻る」ボタンを追加するブロック
https://store-dojo.com/products/2026-05-02 -
【Shopify AI Toolkit】
Shopifyの翻訳機能は、Translate & Adaptアプリやテーマ編集の「テーマのコンテンツ」、テーマエディタの言語切替など、編集の入り口が複数ありますが、実はこれらすべて同じ翻訳データを見ているだけというのが面白いところです。そしてShopify AI Toolkit経由でこのデータレイヤーをAdmin GraphQLから直接操作できるようになったので、商品やページだけでなくメタオブジェクト、テーマエディタに入れた文言、マーケット別の上書き翻訳まで、UIで1点ずつ触ると地味に大変な領域も同じ仕組みで一括対応できるようになりました。
おまけにAIに翻訳させればブランドボイスや用語集を反映できるので、Shopify内蔵の機械翻訳より品質を担保できますし、修正したい時も「未翻訳の項目だけ抽出」「outdatedだけ再翻訳」のような差分処理が一気にかけられます。多言語ストアの運用が大きく変わりそうです。
-
Shopifyで新たに設定できるようになったストア分析の目標管理機能ですが、リリースして2日後にAdmin APIまで開放してくれました。
これで、外部システム側からも目標を操作できるようになるので、自社の予算/KPI管理ツールとShopifyの目標管理を双方向で繋げることができます。
UIリリースから48時間でAPI公開というスピード感、最初から外部連携前提で設計しているんだなと感じますが、単体機能で済ませずに、最初から連携ありきで開発してもらえるのは助かりますね。
https://shopify.dev/changelog/analytics-metric-targets-now-available-in-the-graphql-admin-api
-
【Shopify TIPS】
テーマ「Horizon」のお問い合わせフォームに「問い合わせ種別」「注文番号」などの独自項目を追加する設定例です。テーマファイルは一切変更せず、テーマエディタの「カスタムLiquid」ブロック内にJavaScriptのコードを貼り付けるだけで動きます。追加できる項目タイプはテキスト（text/tel）・セレクト・ラジオボタンで、fieldsの配列を編集して管理します。
テーマファイルへの変更が不要なので、Horizonのアップデート時に上書きの影響を受けないのがポイントです。
スレッド
【Horizon】テーマファイルのコードは変更せずにお問い合わせフォームに項目を追加する設定例
https://store-dojo.com/products/2026-04-29 -
【Shopify AI Toolkit】
検証用の開発ストアにテーマを移行する際、テーマコードのコピー自体はファイルのエクスポート／インポートやGitHub連携で済むのですが、テーマエディタ上で登録されたバナー画像や商品動画といったコンテンツファイルが引き継がれないため、インストール直後はストアの見た目が崩れた状態になる——この問題がずっと悩みでした。Shopifyのテーマではassetsディレクトリに入れたファイルでない限り、同じファイル名のファイルが移行先の「ファイル＞コンテンツ」にも存在していないと、画像などが一切表示されません。
そこで、Matrixifyを使って数百〜数千ファイルを手動でアップロードし直すのもなかなか手間なので、Shopify AI Toolkitを使って以下の仕組みで自動化してみたところ、これが非常にうまくいきました。
① テーマファイルを検証用開発ストアに従来の手順でインストール（この時点では画像リンクは壊れた状態）
② 本番ストアのファイル一覧をAI Toolkitでエクスポートし、CDN URLを取得
③ AI Toolkitで開発ストアにファイルを取り込む（CDNを直接参照し、元のファイル名のまま登録）ポイントは「ダウンロードして再アップロード」ではなく、URLを渡すだけでファイルの取り込みを完結してくれる点です。ファイル名も保持されるので、テーマ側の参照を一切変更せず解決してくれます。
数千件規模のファイルであっても途中停止・再開に対応しており、本番環境と見た目がほぼ完全に一致する検証用ストアをスムーズに構築できるようになりました。
-
【Shopify TIPS】
テーマ「Horizon」v3.3.1以降で、お問い合わせフォーム送信時に「お問い合わせいただきありがとうございます」のメッセージが表示されない問題の暫定対応です。送信自体は正常に通っているのですが、お客様には何も表示されないため「送れたのか分からず何度も送信してしまう」といった事態に繋がりかねない箇所です。原因は v3.3.1 で追加された `http://form.id == form_id` の判定で、Shopify側の `http://form.id` が空文字を返すため条件が常にfalseになってしまうことのようです。
blocks/contact-form.liquid の該当2箇所から `and http://form.id == form_id` を外すと、従来通り完了メッセージが表示されるようになります。Shopify本体側で修正が入るまでの繋ぎ対応として記しているので、テーマ更新時には再適用が必要です。
スレッド
【Horizon】お問い合わせフォーム送信メッセージが出ない問題の暫定対応
https://store-dojo.com/products/2026-04-27 -
そうなんです。じつはAI Toolkitのおかげで、一度作成した検証用ストアを本番ストアと同期とるのも非常にやりやすくなりまして。AIにお願いしておけば特に作業せず同期とってくれます。これは便利ですね。
ちなみに一時的な関わりであったとしても、Shopify Partnersのdev dashboardから検証用に開発ストアを作成し、一部機能のところだけでも同期しておいても良いかと思います。クエビコさんが説明したい内容について、本番ストアに影響なく操作できるので、色々安心かと思います。（ただし、本番用のAI Toolkitは読み込み権限限定で！）
-
【Shopify AI Toolkit】
Shopifyで既存のストアをベースに検証用ストアを作成する際、これまではそっくりそのまま移行することが非常に手間のかかる作業だったのですが、AI ToolkitとAIを使うことでだいぶスムーズに行えるようになりました。中でも特に難所だったのが、商品情報の「関連商品」や「ブログ記事リンク」「メタオブジェクト参照」といった、参照型情報の移行です。これまでもMatrixifyのような便利なデータ移行ツールを使いつつ、この最後のひと手間だけは人間が貼り直す必要がありました。特に大規模ストアではその張り巡らされたリレーションはかなり複雑なものとなり、検証用ストアを構築するだけでも相当な時間を要していました。
今回Shopify AI Toolkitを組み合わせて、以下の3ステップで仕組み化したらほぼ自動で復元できるようになりました。
① AI Toolkitを使って元ストアのメタフィールド／メタオブジェクトの定義を完全コピー
② 商品データはShopify標準のCSVエクスポート／インポートでそのまま投入
③ 残った"参照の貼り直し"をAI + AI Toolkitに任せる（移行先で対応表を組み立てて自動で繋ぎ直す）③が長らく一番厄介な部分でしたが、AIに多段の処理を任せられるようになってようやく完全移行化の目処がついた感覚です。実走では1,000件超の参照データも、ほぼ全ての値を復元できました。
-
【Shopify TIPS】
テーマ「Horizon」で、ストアのメニュー階層から自動でパンくずリストを生成するテーマブロックの設定例です。商品ページ・コレクション・記事・固定ページ・ブログTOPに対応していて、商品が複数コレクションに属する場合はメニュー上で最も深い階層のものを起点に自動で組み立てるようにしています。メニュー設計さえ整っていれば運用負荷を増やさずに導線を整えられます。
blocks/breadcrumb.liquid を新規追加するだけで既存ファイルへの変更が無いので、Horizonテーマ更新時の上書き影響を気にせず使えるのもポイントです。
スレッド
【Horizon】テーマ「Horizon」でストアのメニューから自動でパンくずリストを生成するテーマブロック
https://store-dojo.com/products/2026-04-25 -
Shopify公式ブログの「AIに推薦される商品とは？ 最新GEO（生成エンジン最適化）実践ガイド」記事、非常に読み応えがありました。
Shopifyストア経由のAIトラフィックは前年比9倍、AI検索由来の注文数は15倍に増えていて、Shopifyが実施した独自調査でも買い物客の64%が「購入時にAIを利用する可能性がある」と答えているそうです。
記事で印象的だったのは、「ChatGPTで確実に1位になる方法を教えられる人はいない」と認めた上で、やれることは「SEOの基本・ブランドの権威性・データの質」という商売の土台の徹底だ、と言い切られているところです。
その理由もつぶさに解説されていて、どれも納得できるものでした。
【SEO対策がなぜAIにも効くのか】
AIはユーザーの1つの質問を複数の「サブクエリ」に分割し、それぞれについて情報を収集しています。そこで得られた結果を統合して最終的な回答をつくり上げる「クエリファンアウト」というプロセスを採用しており、そもそもの回答の材料を検索エンジンから得ているから。【ブランド価値の重要性】
AIも信頼できるブランドを推薦しようとします。顧客に愛され、メディアに評価され、ファンコミュニティを築き上げてきた「本物のブランド」が推薦される。誠実にブランドを築いてきた企業ほど、ネット上に評判が蓄積され、AIに参照される機会が増えるから。【データの質が成否を分ける】
AIがAPIで直接連携できる場合、AIは必ずそちらの情報を最優先する。例外はない。情報の正確性を疑いながらWebページを解析するよりも、リアルタイムの在庫、正確な価格、詳細な属性情報を直接提供してくれる、信頼感のあるAPIにアクセスする方を選ぶ。GEOは小手先のアルゴリズム対策ではなく、最新データ・ブランド力・信頼の積み上げだ、という結論も腑に落ちる内容でした。
・常に最新のデータを提供すること
・強いブランド力を育てること
・確固たる信頼を積み上げることこれらを徹底することで、AIに選ばれ、推薦され、またそれを見た顧客に最終的に選択されるようになる。
そして、Shopifyを使っていればそれを成し遂げるための特にシステム面での憂いがなくなるので、ブランド価値を高め、顧客が求める情報を提供することに集中できるなと実感しています。
結局のところ、AIに選ばれるブランドであることは、これまで顧客に選ばれ続けてきたブランドであることと地続きだと感じます。AIが台頭する今こそ、商品・ストーリー・顧客との関係性を磨くことに時間を使いたいですね。
スレッド
AIに推薦される商品とは？ 最新GEO実践ガイド【エージェンティック・コマース最前線】
https://www.shopify.com/jp/blog/generative-engine-optimization -
【Shopify TIPS】
Shopifyのテーマ「Horizon」で、昨日紹介した商品カードの商品タグ表示ブロックを、商品詳細ページにも差し込めるようにする設定例です。blocks/_product-details.liquid のスキーマに1行追加するだけで、テーマエディタから商品詳細ページの任意の位置に商品タグを配置できるようになります。ネストされていないブロックに限るのですが、タイトルと価格の間に挿入したり、商品説明の上に置いたりと、レイアウトに合わせて柔軟に配置できます。
ブロック本体はコレクション一覧用に作成したファイルがそのまま流用できるので、除外タグの設定もコレクションページの商品カードと同じ感覚で使えます。Horizonの更新でスキーマの追記が上書きされる可能性があるため、GitHub連携で管理しておくと安心です。
スレッド
【Horizon】商品タグ表示ブロックを商品詳細ページにも差し込めるようにする設定例
https://store-dojo.com/products/2026-04-23 -
【Shopify TIPS】
Horizonテーマの商品カードに、商品タグを表示するブロックを追加する設定例です。Horizonの標準商品カードには「商品タグを表示する」ブロックが用意されていないのですが、Liquidブロックを1つ追加することでテーマエディタから差し込めるようにできます。商品の特徴や用途別のタグをコレクションページの一覧で見せたいときに使いやすいと思います。
除外タグの設定も付けているので、アプリが自動付与するタグなど表示したくないものを隠すこともできます。ちなみにコレクションページの商品カード専用なので、それ以外のセクションやブロックでは追加できません。
スレッド
【Horizon】Horizonテーマの商品カードに商品タグ表示ブロックを追加する設定例
https://store-dojo.com/products/2026-04-22 -
日経クロストレンドさんの最新調査で、生成AIで商品提案を受けた消費者のうち約9割が「他媒体でも調べ直してから購入している」という結果が出ていました。検索エンジン57%、比較・口コミサイト33%、SNS30%と、裏取りの動きが明確になっています。
これを踏まえると、AIで最初に出合っても、購入の決め手は「確認フェーズで出てくる情報の納得感」にあるのだと感じます。つまり、AIが説明してくれた内容を、そのまま裏づけられる情報が商品ページ側に揃っているかどうか。
具体的には、こういう情報が効いてきそうです。
・仕様と数値の明文化（素材、サイズ、使用条件、期限）
・第三者の声（レビュー、メディア掲載、受賞・認証）
・比較軸の提示（類似品との違い、用途別の選び方）
・想定質問への回答（FAQ、使用シーン別の注意点）
・運営主体の情報（会社概要、こだわり、生産背景）商品情報の充実化は、SEOやAEOの文脈でも言われてきたことですが、AIが入口になったその先の「AIの説明を裏づける材料」として機能するかどうか、という視点でも整理しておく価値が十分ありそうですね。
-
【Shopify TIPS】
Horizonの「カラムごとの幅比率を指定できるレイアウトブロック」について、ブログ記事で詳しくまとめてみました。14種類のプリセット比率の一覧、PCとスマホで独立した比率を設定する方法、カスタム入力で「1 2 1」のように自由に指定する手順、CSS Gridを使っている理由など、実装と使い方の両方を解説しています。
blocks/column.liquid と snippets/column.liquid という独自の2ファイルを追加する必要がありますが、既存ファイルの変更は不要なので、テーマ更新時のコンフリクトも避けられる作りになっています。
スレッド
【Horizon】カラムレイアウトブロックで幅比率を自由に設定する独自ブロック
https://store-dojo.com/blogs/tips/horizon-column-layout-block -
【Shopify TIPS】
Shopifyのテーマ「Horizon」で、カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例です。Horizonの標準groupブロックは、内包するコンテンツを横並びにした際、各カラムの幅が要素に合わせて自動で決まってしまい比率を指定することができません。「左7割・右3割のレイアウトにしたい」という場合に使えるカスタムブロックです。
blocks/column.liquid と snippets/column.liquid の2ファイルを追加するだけで適用でき、既存ファイルの変更は不要です。 13種類のプリセット比率＋カスタム入力、PCとスマホで独立した設定もできます。
スレッド
【Horizon】カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例
https://store-dojo.com/products/2026-04-19 -
Shopifyの管理画面がアップデートし続けてくれるので管理画面用に独自アプリを作る必要性はそこまで無い感じもするのですが、細かいところで使い所はありそうです。
ただ、非常に残念なことに、現時点では支援会社という立場ではリリースしづらい点が困りどころです。
・アプリのコードは会話に紐づいており、他のShopifyアカウントから直接アクセス・編集することはできません。
・複数アカウントでの共同編集ができません。つまりマーチャント様ご本人に作成いただく必要があり、修正する際も引き続きご本人アカウントから指示を出し続けていただく必要があります。
-
普段、【Shopify TIPS】としてテーマやFlowの使い方を発信していますが、実務ではその知見を土台に、マーチャント様ごとの事情に踏み込んで、より具体的な取り組みをしています。
弊社StoreHeroの業務の幅は本当に広く、ストアグロースのために様々な業務が同時並行で走ります。数字の裏側を複合的に読み解いて打ち手を提案する、ペルソナを深掘ってコンテンツや顧客体験を設計する、そしてそれらを実行に移すためにシステムの実装・設定まで持っていく、といった感じで戦略の立案からストア構築、施策実行までを一気通貫で担当しています。
この守備範囲の広さはStoreHeroの強みだと自認しているのですが、ここ最近はAIのおかげでさらに広がっている実感があります。「これはマーケ」「これはデザイナー」「これはエンジニア」と分かれていた領域が、AIを使いこなしていくことで業務を越境していけるようになりました。AIに任せられる領域が増えれば増えるほど、結果的にマーチャント様やその先のお客さまに対して、より高い価値のアウトプットを生み出せている感覚があります。
個人的にも、あらゆる業務にAIを介在させることで、特にデザインやテーマカスタマイズのスピード感は昨年までとは比較にならないほどです。年が明けてわずか3ヶ月ほどで、ここまで景色が変わってしまうのかと驚きです。
いまのStoreHeroは「AIをShopifyの運用に入れるとはどういうことか」、そのラストワンマイルの具体的な部分を、あらゆる業務を通じて体感できる現場になっています。
昨年までは想像もしていなかったスピード感なのですが、この「AI×EC業務」にワクワクする方、他にもいらっしゃいますか？
もし同じような手応えを感じている方がいらっしゃれば、ぜひリアルな現場の話を分かち合う場を設けてみたいですね。 -
【Shopify TIPS】
Shopifyのテーマ「Horizon」の検索ウィンドウに任意の検索ワード候補を表示する設定例Shopifyのサイト内検索で、検索ボックスを開いた際に最初からトレンドや人気の検索ワードを出しておくのもおすすめです。
なお、Horizonはページ遷移を高速にする目的でページ表示直後にHTMLの外枠だけ読み込み、後からJavaScriptでドロワーの内容を更新する仕組み（Section Hydration）になっています。その完了タイミングを検知するため、少々複雑なJavascriptコードになっています。
詳細はスレッドに掲載しています。
スレッド
【Horizon】検索ボックスに検索ワード候補を表示する
https://store-dojo.com/products/2026-04-16
