Shopifyのお客様アカウント（新しいお客様アカウント）は、セキュリティの向上など多くのメリットがある一方で、「ログイン画面のみとなり独自の入力項目（性別・誕生日・アンケートなど）を追加できない」という仕様になっています。

従来のお客様アカウントでは、Liquidを編集することで会員登録時に項目を追加することができましたが、新しいお客様アカウントではその手法は使えません。

そのため、新しいお客様アカウントでは、アカウント作成後のプロフィール画面や購入後のタイミングで情報を取得する方法へと設計を変更する必要があります。

※2026/02/26以降に新しく作成するShopifyストアでは「従来のお客様アカウント」が選択できなくなりました。 2026年後半には「従来のお客様アカウント」廃止に向けたスケジュールも発表される予定です。 <a href="https://changelog.shopify.com/posts/legacy-customer-accounts-are-now-deprecated">https://changelog.shopify.com/posts/legacy-customer-accounts-are-now-deprecated</a>

１.&nbsp;ログイン・購入の「直後」に情報を取得

『AL CustomerMetaSync』を使えば、「購入完了画面（サンキューページ）」や「ログイン後のマイページ」で付加情報を取得することが可能です。

なぜ「後」から取得するのがベストなのか？

２.&nbsp;AL CustomerMetaSyncで実現する「付加情報取得」の例

①&nbsp;サンキューページに「アンケート」を設置して情報を取得する

購入完了画面に「よろしければ教えてください」といったフォームを表示し、自然な流れで付加情報を取得できます。

など、ストアの特性に合わせた複数の項目を設定できます。 また、すでに回答済みの項目は非表示に設定できるため、複数あるアンケートのうち未回答の項目のみを表示するなど、リピーターに同じ質問を繰り返して負担をかけることはありません。

②&nbsp;プロフィールページ（マイページ）で「追加情報」を設定して取得する

お客様アカウントのプロフィールページ内に、顧客メタフィールドと同期したフォームを設置することも可能です。

などを管理できます。 さらに、

といったように、項目ごとに編集権限を細かく制御することも可能です。

３.&nbsp;取得したデータは「顧客メタフィールド」へ保存

このアプリの最大の利点は、回答されたデータがShopify標準の「顧客メタフィールド」に直接書き込まれることです。

独自のデータベースに保存されるわけではないので、

など、Shopify標準機能との高い親和性を実現できます。

Shopifyの仕様変更により、アカウント作成時に独自項目を追加することはできなくなりました。 これまではHelium Customer Fieldsのような外部アプリが主な選択肢でしたが、コストの高さが導入のハードルとなっていました。 しかし、低価格で導入可能なAL CustomerMetaSyncを活用し、「最適なタイミングで、最適な項目を取得する」設計へと切り替えることで、コストを抑えながら顧客体験を損なうことなく、精度の高いデータ収集が可能になります。

「新しいお客様アカウントへの移行を機に、顧客データの取得方法を見直したい」とお考えの方は、まずはサンキューページに一つ質問を追加するところから始めてみてはいかがでしょうか。

Shopify app 「AL CustomerMetaSync」ページ <a href="https://apps.shopify.com/al-customermetasync?locale=ja">https://apps.shopify.com/al-customermetasync?locale=ja</a>

Shopifyのお客様アカウント（新しいお客様アカウント）で、付加情報を取得する方法

株式会社キューは、このたびShopifyより「Shopify Select Partner」として認定されました。

多くのお客様からのお引き立てにより、たくさんのShopifyストアの構築業務に携わらさせていただいた結果であり、株式会社キューを信頼しお任せいただいたことに感謝しかありません。

Shopifyは、Shopify自身による開発方針により、機能のアップデートが早く、「昨日できなかったことが今日はできるようになっている」ことも、「昨日はこういうやり方だったものが、今日からはこのやり方にしないといけない」こともたくさんあります。

そのスピード感にしっかり追随し、お客様に最適の解決方法を提供し続けられるよう、これからも精進して参ります！

なお、Shopifyが最適ではないと判断した場合は、Shopify以外のご提案もいたします。もちろん、Shopifyをご希望であれば無理強いはいたしませんが、Shopifyに固執せずフラットな提案ができるのも弊社の強みですので、Shopifyに限らず、ECストアの構築に悩んでいらっしゃるなら、ぜひ、お気軽にご相談ください。

Shopifyパートナーには、世界中で数多くの企業が登録されていますが、その中でも「Select Partner」は、Shopifyより優れた実績と高い専門性を持つと認められた、上位パートナーのみに与えられる称号です。

単にECサイトを構築できるだけでなく、以下のような厳しい基準を満たしていることが求められます。

Shopify Partners での弊社の紹介ページ <a href="https://www.shopify.com/partners/directory/partner/qcoltd">https://www.shopify.com/partners/directory/partner/qcoltd</a>

ECサイトの新規立ち上げをご検討中の方や、現在運営中のショップに課題を感じている方は、ぜひお気軽にご相談ください。

Shopifyストア構築の実績例は<a href="https://web.q-co.jp/stories?categories=ecsite">こちら</a>

Shopify Select Partner認定のお知らせ

こんにちはディレクターの小坂です。

Shopifyの管理画面で「ストア分析」を確認した際、「予想以上にセッション数が多いな」と感じたことはありませんか？ 実は、その数字には人間だけでなく、検索エンジンやツールなどが自動で巡回している「Bot（ボット）」のアクセスが含まれている場合があります。 データが水増しされた状態では、正しいコンバージョン率（CVR）の計測や施策の効果判定ができません。 そこで今回は、2025年10月7日に追加された「フィルター」の「<a href="https://help.shopify.com/ja/manual/intro-to-shopify/bots/bot-filtering?utm_source=sidekick"></a><a href="https://help.shopify.com/ja/manual/intro-to-shopify/bots/bot-filtering">人間またはボットセッション</a>」を活用して、Botを除いた「純粋な人間のアクセス」だけを表示させる方法を解説します。 <a href="https://www.shopify.com/jp/editions/winter2026#operations">Shopify Edition 26年冬のオペレーション</a>の「分析のボット絞り込み」でも紹介されています。

Botを除外して「人間」に絞り込む手順

Shopifyのレポート機能を使えば、数クリックでBotのデータを取り除くことができます。 以下の手順で設定してみましょう。

まず、Shopify管理画面の左メニューから [ストア分析] ＞ [レポート] を選択します。
ここで、セッション数を確認できるレポート（例：「セッション数の遷移」など）を開いてください。

画面右側のフィルターを選択 ・+を押して、「人間またはボットのセッション」で検索し追加

20260108image1.png

・条件： 「である」を選択 ・値： 「人間」 にチェックを入れます

20260108image2.png

「人間」を設定するとグラフと数値が「人間」のみに更新されます。Botが含まれていた時と比べて、数値がガクッと下がるかもしれませんが、それが実際にストアにアクセスされているセッションとなります。 この設定を毎回行うのは手間なので、画面上にある [名前を付けて保存] をクリックして、「【人間のみ】セッション推移」などの名前でカスタムレポートとして保存しておくのがおすすめです。 ※2025年10月7日以降のデータが対象となります。

正確なデータがなければ、正しい経営判断はできません。Botによるアクセスは、特に広告を出稿し始めた際や、検索順位が上がってきたタイミングで急増することがあります。

今回ご紹介した「人間」のフィルターを活用して、ノイズのないデータでユーザーのリアルな動きを把握することで、サイト改善のヒントがより明確に見えてくるはずです。

Shopifyのストア分析レポートのセッション数からBotを除外する方法！

こんにちは。 ディレクターの田辺です。

Shopifyのストアフロントにおいて、ワンタイムパスワードログイン方式がされている時、ログインプロセスをストレートにE2Eテストで突破できるか考えてみました。

結論から言うと、本記事で紹介する方法では突破できません。

しかし、途中まではうまくいきましたので備忘録としてまとめておきます。

達成できたこと / 失敗したこと

1つ1つの手順がPlaywrightでうまく自動化できることは確認できましたが、PlaywrightでChromeを起動してテストを行うと、ログイン画面のhCaptchaに阻まれてしまい、ワンタイムパスワードの送信を行うことができませんでした。

付録: ワンタイムパスワードを提供するAPIの作り方と使い方

Shopifyに限らず、メールアドレス宛にワンタイムパスワードが届くログイン方式を採用している場合に、もしかしたら役立つことがあるかもしれませんので、ワンタイムパスワードを提供するAPIの作り方をまとめておきます。

紹介する方法はほぼノーコードで実現できますので、非エンジニアの方でも挑戦できます。

まず、gmailを準備します。ワンタイムパスワードの受信用に利用します。

<a href="https://developers.google.com/workspace/add-ons/workflows?hl=ja">Googleが提供しているノーコードワークフローツール</a>です。 まだ、アルファ版ですが、非常に便利です。 <a href="https://dev.classmethod.jp/articles/trying-google-workspace-flows-alpha/">クラスメソッドさんの紹介記事</a>が詳しく説明されているのでおすすめです。

今回は下記のように設定しました。

① <code class="inline-code">Starter</code>に<code class="inline-code">When I get an email</code>を選択 ② <code class="inline-code">All emails</code>ではなく、<code class="inline-code">Specific emails</code>を選択 ③ Shopifyのワンタイムパスワードはストアごとに固定のメールアドレスから送信されるのでそのメールアドレスを、Fromに指定し、ワンタイムパスワードのメールのみを扱うようにする

④ <code class="inline-code">Action</code>として<code class="inline-code">Extract</code>を選択 ⑤ 抽出条件として、メール本文から下記の条件で6桁のコードを取得

This e-mail has one time password for Shopify. Extract only the authorization code from the content, which is 6 numeric characters in the below of the text "認証コード：".

⑥ 以降のActionで抽出したコードを利用するため変数名を指定。Descriptionは今回の場合、不要ですが、念のため6桁の数字を抽出するよう指定 <code class="inline-code">Custom content name</code> = <code class="inline-code">shopify_otp Description for Gemini</code>&nbsp;=&nbsp;<code class="inline-code">The 6-digit numeric authorization code for Shopify.</code>

なお、Shopifyから届くワンタイムパスワードの文面は下記になります。

⑦ <code class="inline-code">Action</code>として スプレッドシートの <code class="inline-code">Add a row</code>を選択 ⑧ スプレッドシートを作成しておいてその情報を入力 ⑨ Extractアクションで抽出された認証コードを設定

スプレッドシートの内容は下記のような簡易なものです。

ワンタイムパスワードがGmailに届くたびに、上記のシートのA2セルに追加されていきます。(A2セルが最新のワンタイムパスワード)

上記のスプレッドシートの「拡張機能 &gt; AppSheet &gt; アプリを作成」からAppSheetアプリを作成します。 と言っても、このスプレッドシートがデータソースであるAppSheetアプリが作成できればそれで十分なので、あとは、AppSheetでAPIを利用できるようにするだけです。

Settings &gt; Integrations にアクセスすると、APIの有効化ができます。 ① の<code class="inline-code">App Id</code>をメモしてください。 ② の<code class="inline-code">Enable</code>をオンにしてください。 ③ <code class="inline-code">Create Application Access Key</code>をクリックしてAccess Keyを作成し、メモしてください。

AppSheetでAPIを利用する場合の注意点

4. PlaywrightからAppSheetのAPIをfetchする

Playwright MCPを利用しているのであれば、下記のようなプロンプトを書くだけで、fetchしてワンタイムパスワードを取得してくれます。

<code class="inline-code">{app_id}</code>、<code class="inline-code">{access_key}</code>には、AppSheetからコピーした値を入力してください。

以上で、ワンタイムパスワードを取得できます。

今回はhCaptchaに阻まれてしまい、Playwrightによる「ワンタイムパスワードを利用しているShopifyストアへの自動ログイン」という目標は達成できませんでしたが、

などができたのは収穫でした。 特に、ノーコードでここまでのことができるAIツールの進歩には目を見張るばかりです。

最後に、元も子もないことを言えば、Shopifyのことですから、いずれ、ワンタイムパスワードやhCaptchaなどE2Eテストを実施する上でハードルになる要素を解消するもっとスマートな方法を提供してくれるかもしれません。

ShopifyのストアフロントのワンタイムパスワードログインをE2Eテストできるか試してみた

少し古いニュースになりますが、2025年10月21日に、Shopifyが下記のアップデートを発表しました。

New: Unlisted product status <a href="https://changelog.shopify.com/posts/new-unlisted-product-status-1">https://changelog.shopify.com/posts/new-unlisted-product-status-1</a>

We’ve introduced a new product status called “Unlisted”. It hides products from store search and collections, all sales channels, internet searches and Shopify Catalog—while still allowing access via a direct URL. It’s ideal for private sales, warranties, add-ons, or “free gift with purchase” items you don’t want discovered or used outside of their intended purpose.

以下は、意訳です。 Unlisted = 非公開、という商品ステータスを導入しました。非公開の商品は、サイト内検索、コレクション、全ての販売チャンネル、そして、Shopifyカタログで表示されません。しかし、商品詳細ページのURLを知っている人は、そのURLに直接アクセスし、商品詳細ページを表示できます。非公開ステータスは、プライベートセール、特別な顧客向けの販売など商品を閲覧・購入できる人を制限したい場合に理想的です。

今回は、この「非公開」ステータスについて紹介いたします。

これまで、商品のステータスは下記2つでした。

「非公開」商品は、サイト内検索からも、検索エンジンからも隠され、コレクションページなど商品詳細ページ以外のページにも表示されなくなります。この点は「下書き」と似ていますが、「非公開」が「下書き」と異なるのは、商品詳細ページに直接アクセスすれば商品を表示できるし、購入もできる、という点です。

強いていうなら、非公開ステータスは、これまでメタフィールドで設定してきた<code class="inline-code">seo.hidden (※)</code>に近いです。 ※seo.hiddenの詳細は<a href="https://help.shopify.com/ja/manual/promoting-marketing/seo/hide-a-page-from-search-engines">こちら</a>

「非公開」ステータスの注意点

ここまでお読みいただいた方はお気づきかもしれませんが、「非公開」ステータスは直感的な意味での非公開ではないことにお気をつけください。

直感的な意味での非公開は「下書き」ステータスの方であり、「非公開」はアクセス制限や制限公開に近いステータスです。

英語では「Unlisted」なので、直訳すれば非公開とも言えますが、「リストされない」だけで商品詳細ページ自体は公開されています。

したがって、商品詳細ページのURLを拡散されてしまえば、誰でもアクセスできてしまいます。

注意点はありますが、これまでいちいち<code class="inline-code">seo.hidden</code>メタフィールドを設定しないとできなかったサイト内検索や検索エンジンから商品を隠すことが、ステータス1つでできるようになったのは便利かと思います。

注意点にだけ気をつければ使い所はありそうなので、どんどん活用していきましょう。

Shopifyの新しい商品ステータス「非公開」

こんにちは。ディレクターの小坂です。

Shopifyでは、管理画面から注文の「明細表」を印刷することができますが、初期状態では商品価格や消費税などの情報が含まれていません。&nbsp; 納品書や領収書としてそのまま利用したい場合、表示内容を整える必要があります。

本記事では、Shopify明細表テンプレートの修正方法と、そのままコピペで使えるカスタマイズコードを紹介します。

明細表テンプレートの格納箇所

Shopify管理画面から以下の手順でアクセスします。 管理画面 → 設定 → 配送と配達 → 配送書類 → 明細表テンプレート このテンプレートのコードを修正することで、印刷時の明細表レイアウトを自由にカスタマイズできます。

商品一覧に商品価格を表示する

デフォルトの明細表では、商品名と購入個数しか表示されません。 &nbsp;そのため「どの商品がいくらなのか」が分からない状態になっています。

カスタマイズでは以下を追加します。

これにより、印刷時に価格情報が一覧で確認できるようになります。

合計額や送料・消費税を表示する

初期状態の明細表では、購入合計・送料・消費税・注文合計などが非表示です。 &nbsp;下記のカスタマイズコードを利用することで、これらの情報を明細表に追加できます。

また、軽減税率（8％）と標準税率（10％）の両方に対応しています。&nbsp; そのため、食品や日用品などを扱うショップでも正確な税区分を印字可能です。

コピペで使えるカスタマイズコード

以下のコードを明細表テンプレートにそのまま貼り付けるだけで反映されます。

管理画面 → 設定 → 配送と配達 → 配送書類 → 明細表テンプレート → コード編集

※上記のコードを貼り付け後、プレビューでレイアウトを確認し、必要に応じてフォントや余白などを微調整してください。

Shopifyの明細表をカスタマイズすることで、次のようなメリットがあります。

「Shopifyの明細表をもっと実務で使いやすくしたい」という方は、ぜひ本記事のコードをそのまま活用してみてください。

Shopifyの明細表に商品価格・消費税などを表示するカスタマイズ方法【コピペでできる】

2025年9月3日に、Shopifyから、Dev Dashboardの一般提供が開始されました。 <a href="https://shopify.dev/changelog/next-gen-dev-platform-ga">https://shopify.dev/changelog/next-gen-dev-platform-ga</a>

Dev Dashboardが何なのかを詳しく知りたい方は、下記の公式ドキュメントを参照すると良いです。 <a href="https://shopify.dev/docs/apps/build/dev-dashboard">https://shopify.dev/docs/apps/build/dev-dashboard</a>

私が個人的に興味深かった点は、「これまで、開発ストアの作成やアプリの開発は、Shopifyパートナーのダッシュボードから行ってきたが、その制約がなくなった」という点です。

特に、誰でも開発ストアを作成できるようになったことで、一般のマーチャントも気軽に機能テストできるようになりました。

本記事では、Dev Dashboardで開発ストアを作成する方法を紹介します。

一般のマーチャント向けに細かなニュアンスを無視して簡単に説明するなら、費用がかからない代わりに一般公開もできないテスト用のShopifyストアのことを「開発ストア」と呼びます。

これまで、開発ストアは、Shopifyパートナーに登録している個人や組織のみが作成することができましたが、Dev Dashboardの登場により、一般のマーチャントでも開発ストアを作成できるようになりました。

下記の画像のように、どのプランを想定した開発ストアかを指定してできるため、プランのアップグレードやダウングレードをお考えの方が、問題ないかをテストする用途にも利用できます。

それだけでなく、開発ストアを用意することで、アプリを事前に開発ストアに導入して挙動をチェックしたり、Shopifyストアの設定を開発ストアで事前に変更してチェックしたりが可能になり、これまで本番ストアで一発確認するしかなかったような変更を事前確認できるようになります。

Dev Dashboardから開発ストアを作成しますので、まず、Dev Dashboardにアクセスする必要があります。

Dev Dashboardにアクセスするには、まず、Shopifyストアの管理画面から「設定」にアクセスします。

続いて、「アプリと販売チャンネル」にアクセスし、「アプリを開発する」をクリックします。

すると、「Dev Dashboardでアプリを開発」というボタンが表示されますので、そのボタンをクリックします。

下図のようにDev Dashboardが開きますので、「Dev stores」をクリックします。

そして、「Create dev store」をクリックします。

開発ストアの設定を入力する画面に遷移するので、 「ストア名」に、希望するストア名を入力し、 「Shopifyのプラン」で、シミュレーションしたいShopifyの契約プランを選択し、 「ストア用のテストデータを生成する」にチェックを入れてから(※)、 「ストアを作成する」をクリックすれば、開発ストアが作成されます。 ※「ストア用のテストデータを生成する」は不要であればチェックを入れなくても大丈夫です。チェックを入れるとある程度の初期設定と初期商品が投入された状態で開発ストアが作成されます。

以上の手順で、開発ストを作成できますので、あとは、自由に開発ストアでの確認作業を行えます。 また、開発ストアは複数作成することができますので、チェックしたい内容に合わせて開発ストアを用意するのも良いです。

一般のマーチャントであっても開発ストアを作成できるようになったことで、個人でShopifyを運用されている方や、分け合って予算を抑えたい企業も、簡単に事前の機能チェックができるようになりました。

より良いShopifyライフのために、Dev Dashboardからの開発ストア作成を是非ご利用ください。

Shopifyで、誰でも開発ストアを作成できるようになりました

現在Shopify はチェックアウト体験の刷新を進めており、従来の追加スクリプト（Additional Scripts）、ScriptTags を利用したカスタマイズは、2026年8月26日 をもって廃止される予定です。これは Shopify のBasic / Shopify / Advanced プランを利用しているストアに適用されます。

新しい仕組みである「Checkout Extensibility」を利用して、今後は Shopify が提供する安全かつ拡張性の高い方法で、Thank You ページや注文状況ページをカスタマイズすることが求められます。 具体的には以下の手段があります。

１．現状把握 管理画面から、Thank You ページや追加スクリプトに設定している内容を確認してください。

２．新方式での再構築 ・トラッキング → Web Pixelやアプリ（<a href="https://apps.shopify.com/google?locale=ja">Google &amp; YouTube</a> / <a href="https://apps.shopify.com/facebook?locale=ja">Meta</a> / <a href="https://apps.shopify.com/tiktok?locale=ja">TikTok</a> 公式アプリなど）に移行 　※Yahoo!のコンバージョンタグの移行については、<a href="https://techlab.q-co.jp/articles/160/">こちらの記事</a>も参考にしてください ・クロスセルやアップセル → UI Extensionsやアプリ（<a href="https://apps.shopify.com/reconvert-upsell-cross-sell?locale=ja">ReConvert Post Purchase Upsell</a>など）で実装 ・複雑なロジック → Functionsやアプリ（<a href="https://apps.shopify.com/checkout-blocks?locale=ja">Checkout Blocks</a>など）を利用

３．テスト環境で動作確認 &nbsp;本番環境に反映する前に、計測や表示が正しく機能するか確認しましょう。

４．本番適用 &nbsp;余裕を持って 2026年8月26日までに完了することが推奨されます。

Shopify のBasic / Shopify / Advanced プランを利用している事業者も、2026年8月26日までに Checkout Extensibility への移行が必須となります。放置した場合、サンクスページやトラッキングが機能しなくなり、売上や分析に影響する可能性があります。

早めに現状を確認し、移行を進めていただくことを強くおすすめします。移行の対応がわからない、ご自身で対応できないなどのご相談はこちら。

ShopifyのBasic / Shopify / Advanced プランでの追加スクリプトの利用は2026年8月26日で終了します。

Shopify Yahoo!広告のコンバージョンを計測するカスタムアプリ

こんにちは、 ディレクターの小坂です。

以前からShopifyより告知されていた、サンキューページ／注文状況ページにおける追加スクリプトの削除ですが、Shopify Plusでは2025年8月28日、Shopify Basic、Grow、Advancedのプランでは2026年8月26日までとなっています。 追加スプクリプトでは、計測タグの追加や、サンキュー画面にUIの追加を行うことができていましたが、期日までに移行しない場合、これらのページはカスタマイズなしの標準Checkoutに自動的に置き換わり、追加スクリプトで表示している情報は表示できなくなってしまいます。

そこで本記事ではShopifyのサンキュー画面に、ShopifyのCheckout Blocksアプリを利用し、カート備考や配送日時、SNSのフォロー促進用ボタンを設置する方法を解説していきます。

「Checkout Blocks」は、Checkout Extensibilityに対応した公式アプリで、ドラッグ＆ドロップで独自コンテンツやロジックをチェックアウト、サンキュー、注文状況ページに追加できるアプリです。

１. Shopify管理画面で「アプリストア」を開き「Checkout Blocks」をインストールします。 ２. アプリを開き、左メニュー［Blocks］をクリックします。 ３. 「Create block」を押し、「Dynamic content」から作成したいブロックの種類を選択します。

image.png

４. 各種設定を済ませ、保存ボタンをクリック。 ５. Statusを「Active」に設定

１. 設定 &gt; チェックアウト &gt; カスタマイズをクリック。 ２. サンキュー画面を開き、セクションを選択 ３. アプリブロックを追加からCheckout blocksのDynamic contentを選択 ４. App block IDで作成したブロックのIDを選択し保存をクリック。 ５. テスト注文でサンキュー画面を確認し、表示内容を検証します。

【カート備考（注文メモ）の表示】

１. Shopify管理画面 &gt; テーマ設定 &gt; カート で「カート備考を有効化」し、顧客が備考を入力できるようにします。 ２. 注文メモは {{&nbsp;checkout.note }} で参照可能。 ３. Checkout blocksで［Dynamic content］ブロックを選択し、Blank templateを新規作成。

４. Content itemsからTextを選択し「ご注文時のご要望: {{ checkout.note }}」などを記述。

５. Display rulesでAdd display ruleから「Order note is not blank」を設定し、備考がある注文のみ表示。

【次回購入を促すクーポンコード】

１. Shopify管理画面 &gt; 割引 でクーポンコード（例: NEXT10）を作成。 ２. Checkout blocksで［Dynamic content］ブロックを選択し、Blank templateを新規作成。 ３. Content itemsからTitleを選択し「次回10%OFFクーポン: NEXT10」を設定。

４. Content itemsからButtonを選択しButton typeを「Link」、Urlに「 ?discount=NEXT10 を付けたストアURL」を設定、Button labelにボタン名を設定。

５. Ruleで顧客タグなど条件を設定し公開。（必要な場合） ※NEXT10クーポンコードはサンプルとなりますので、ご自身でご利用のクーポンコードに変更ください。

【LINE公式アカウントやInstagramフォロー促進】

１. LINE友だち追加URLまたはInstagramプロフィールURLを取得。 ２.&nbsp; Checkout blocksで［Dynamic content］ブロックを選択し、Blank templateを新規作成。 ３. Content itemsからImageを選択し、Desktop imageとMobile imageにSNSアイコンやリンク用のボタン画像を追加。

４. Make image clickableにチェックを入れて、Link urlにLINE友だち追加URLまたはInstagramプロフィールURLを追加

５. Open link in new tabにチェックを入れる。

６. Ruleで表示対象を絞る。（必要な場合） ※画像は事前にコンテンツのファイルに保存してください。

追加スクリプトの廃止に備え、Checkout blocksを活用してサンキュー画面をノーコードで拡張しましょう。

カート備考のような注文情報もLiquidを使って簡単に表示できます。 期日（2025年8月28日）までに移行を完了させ、顧客体験向上と運用効率化を実現しましょう。

キューではCheckout blocksを利用した設定支援や、Checkout Extensibilityに対応した設定、アプリ開発などご相談にも対応しております。 Checkout Extensibilityについてのご相談は<a href="/contact/">こちら</a>から

Shopifyのサンキュー画面に追加スクリプトで追加していた追加情報を出す方法

Shopify のカスタムピクセル機能を使って、購入完了（checkout_completed）時に注文IDと購入額（売上）を Google Tag Manager（GTM）経由で Google アナリティクス 4（GA4）に送信する方法を解説します。

&nbsp;ShopifyからGA4へのデータの流れ

Shopify（カスタムピクセル） →
window.dataLayer → GTM → GA4

管理画面 &gt; 設定 &gt; カスタマーイベント &gt; カスタムピクセル から新規ピクセルを追加します。

① 名前を入力（例: GA4ピクセル） 
② コードエディタに下記サンプルコードを貼り付け ③ 保存して公開

カスタムピクセル サンプルコード

※GTM-XXXXXXXXはご自身のコンテナIDを記載ください。 ※以降記載のある「test_event」は名称例となりますので、任意の名称でご利用ください。

以下 3 つの Data Layer 変数を作成します。

① 「order_id」&nbsp; • 名前: DLV -&nbsp;&nbsp;order_id • 変数タイプ: Data Layer 変数 • Data Layer 変数名: order_id • Data Layer バージョン: 2 • 既定値: 空（任意）

② 「value」 • 名前: DLV -&nbsp;&nbsp;value • 変数タイプ: Data Layer 変数 • Data Layer 変数名: value • Data Layer バージョン: 2 • 既定値: 0

③ 「currency」(任意) • 名前: DLV - currency • 変数タイプ: Data Layer 変数
 • Data Layer 変数名: currency

■ 「test_event」カスタムイベントトリガー&nbsp; • 名前: CE - test_event • トリガータイプ: カスタムイベント
 • イベント名: test_event • このトリガーの発生場所: 　- すべてのカスタムイベントに対して (既定) 　　または条件付きで「order_id が定義されている場合」などフィルタを追加しても可

■ 「test_event」イベントタグ
 • タグタイプ: GA4 イベント • 設定タグ: 既存の GA4 設定タグを選択 • イベント名: test_event • パラメータ設定: 　– order_id = {{DLV - order_id}} 　– totalPrice = {{DLV - value}} 　– currency = {{DLV - currency}} (固定で "JPY" としても可) • 送信時にパラメータを上書き: オフ (既定) • トリガー: CE - test_event

GA4 管理画面 &gt; データの表示 &gt; イベントで「test_event」をイベントとして登録します。
 また カスタムピクセルを利用すると DebugView などを用いたイベントの確認が行えませんので、実際に公開しGA4のリアルタイムで受信されているか確認してください。

カスタムピクセルとGTMを組み合わせることで、Shopifyの制限を回避しながら購入データなどの情報をGA4に安全かつ柔軟に連携できます。 導入に際しては、まずテスト環境で十分に検証したうえで本番環境へ反映することをおすすめします。 ご紹介したshopify標準の値以外でも値を作成することも可能ですので、ご自身でカスタムピクセルの対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ<a href="/contact/">お問い合せ</a>ください。

Shopify カスタムピクセルで注文IDと購入額を GA4 に送信する手順

こんにちは。 Webディレクターの田辺です。

Shopifyには下記のように特殊な操作が可能なURLが存在します。

これらのURLは、ランディングページやメルマガで有用であったり、購入導線におけるお客様の手間を省く役割を果たすことがあります。

今回はそういったURLをご紹介します。

※なお、Shopifyの公式ドキュメントに記載がないURLもあります。そういったURLについては、ご自身で動作を検証の上、自己責任でご利用ください。

まずは、Shopifyの公式なドキュメントにも記載があるので、ご存知の方も多いかもしれませんが、活用できる機会が多そうなカートパーマリンクをご紹介します。

参考: <a href="https://help.shopify.com/ja/manual/products/details/cart-permalink">https://help.shopify.com/ja/manual/products/details/cart-permalink</a>

任意の商品がカートに入った状態でチェックアウトページに遷移させる

ユーザーが、 <code class="inline-code">/cart/{バリエーションID}:{数量}</code> というURLにユーザーにアクセスすると、指定の商品が指定の数量だけカートに入った状態で、チェックアウト画面に遷移します。

複数種類の商品がカートに入った状態でチェックアウトページに遷移させる

上記の応用です。 {バリエーションID}:{数量},{バリエーションID}:{数量}のようにカンマ区切りすることで、複数種類の商品がカートに入った状態で、チェックアウト画面に遷移させることができます。

さらにクーポンコードを適用する

<code class="inline-code">discount={クーポンコード}</code> というクエリパラメータを付与することで、クーポンコードが適用された状態で、チェックアウト画面に遷移させることもできます。

ディスカウントを強制的に適用したり解除したりする

この方法にフォーカスした説明がなされたドキュメントはないのですが、下記のドキュメントに記載があるURLなので、Shopifyに正式にサポートされているものと考えています。

参考:&nbsp;<a href="https://help.shopify.com/ja/manual/discounts/discounts-for-abandoned-checkout-recovery-emails">https://help.shopify.com/ja/manual/discounts/discounts-for-abandoned-checkout-recovery-emails</a>

<code class="inline-code">/discount/{クーポンコード}</code> というURLにアクセスさせることで、指定のディスカウント(クーポンコード)をユーザーに適用することが可能です。