Shopifyの標準Buy X Get Y割引はカートに無料ギフトを自動的に追加しません。ギフトが既にカートに入っている場合は$0に割引することができ、最小支出額でトリガーすることさえできますが、顧客はまだオファーに気づき、ギフト商品を見つけ、自分で追加する必要があります。カートが支出しきい値を超えた瞬間にギフトが単独で表示され、カートがその下に低下した場合に消える真の自動追加ギフト配布には、Shopifyのajax Cart APIに構築されたカスタムテーマコードまたはカートの追加と削除を行うアプリが必要です。
このガイドでは、標準ギフト配布が不足している理由、手動追加ステップがプロモーションを無言で殺す理由、DIY Ajax cartアプローチがどのように機能し、メンテナンスコストがどの程度かかるか、アプリで何を探すか、および今日確実に出荷できるこのパターンの1つの部分について説明します。購入者がどのくらい報酬に近いかを示すライブカート進捗バー。
Shopifyはカートがしきい値に達したときに無料ギフトを自動的に追加しますか?
いいえ、それ自体ではありません。Shopifyは2つのネイティブビルディングブロックを提供しており、どちらも商品を自動追加しません。
最初は最小購入注文割引です。これはカートが支出しきい値を超えると注文からお金を取ります。それは無料商品ではなくお金の割引です。
2番目はBuy X Get Yです。これにより、特定の商品を無料にすることができます。2019年以来、Buy X Get Yは最小購入金額をトリガーとしてサポートしているため、「$100を支出すると無料ギフトを受け取ります」と読むプロモーションを構築できます。Shopify開発者チェンジログによると、このオプションでは支出金額を要求できます。特定の数量の代わりに、これはギフト配布にまったく見えるように見えます。
ほぼすべての商人をつまずかせるキャッチはこちらです。それを試します。Buy X Get Y割引は既にカートに入っているギフトです。カートにギフトを入れません。割引を機能させてその価格をゼロにするために、顧客がギフト商品を自分で追加する必要があります。追加しない場合は、単にオファーを受け取らず、割引はそこにある何もしません。その「割引が存在する」と「顧客が実際にギフトを受け取る」の間のギャップは、この記事が関するすべてのエリアです。
画像プレースホルダー(画像1):ネイティブBuy X Get Yと真の自動追加
推奨される視覚:白い背景の上に清潔な16:9図。左フロー「Native Buy X Get Y」は4つのステップを示す赤い摩擦アイコン:カートが$100に達する、バナーが表示される、顧客はギフトを見つける必要があります、顧客は手動で追加する必要があります。右フローに「自動追加ギフト配布」というラベルが付けられます2つのステップは緑のチェック付き:カートが$100に達して、ギフトは$0.00で自動的に表示されます。ブランドカラー紫と金、フラットベクトル、サンセリフラベル、写真なし。
ネイティブBuy X Get Yはなぜ無料ギフトには不足していますか?
Buy X Get Yは真に有用な割引ですが、カートの内容を管理するのではなく、アイテムの価格を設定するために構築されました。その設計上の選択は、ギフト配布に対して3つの実用的なギャップを生み出します。
ギフトを割引します、ギフトを追加しません
これはコア制限です。Buy X Get Yはカートを監視し、「購入」条件(支出金額または適格な商品の数量)が満たされると、「取得」商品に割引を適用します。しかし、割引が機能するために「取得」商品がカートに存在する必要があります。Shopifyはそれを挿入しません。そのため、オファーはプロモーションに気付き、ギフトを追加するための追加の手順を取ることの両方を行う買い物客のサブセットに対してのみ機能します。
顧客が負担を負う
買い物客に取ってもらう各ステップは、買い物客を失うことができるステップです。顧客がしていることを離れて、ギフト商品ページに移動し、カートに追加するための必要なギフト配布は、チェックアウトに最も近い瞬間に努力を求めています。ほとんどの買い物客はそれを行いません。ギフトが大好きだったはずの人は決して起こるのを見ません。あなたが支払っているインセンティブは未実現のままです。
それはギフトを自動的に削除することもできません
逆の場合も同じくらい厄介です。買い物客がギフトを追加してから、アイテムを削除し、しきい値を下回ったとします。手動セットアップでは、無料ギフトはカートに残ることができます。割引の設定方法によっては、チェックアウト時に黙って全額に戻るか(チェックアウトで不快な驚き)、顧客が適格ではなくなったときに割引されたままになります(意図しなかったマージン)。適切なギフト配布はおよびカート合計に合わせてギフトを削除する必要があります。
商人はこれを直接感じます。広く見たShopifyコミュニティスレッドで、商人はサードパーティアプリなしでカートが支出しきい値に達したときに無料ギフトを自動的に追加する方法を尋ねました。答えはいつもと同じ方法で戻ってきました。ネイティブBuy X Get Yが存在しますが、ギフト自体を追加しないため、カスタムコードまたはアプリが残されています。
Shopify Functionはなぜ単にギフトをカートに追加できないのですか?
これは自然な次の質問です。Shopify Functionsは割引をカスタマイズするための現代的でサーバー側の方法であり、すべてが信頼できるチェックアウト内で実行されるためです。正直な答えは、割引機能は物事に価格をつけることができますが、商品を追加することはできないということです。
Shopify割引機能は既存のカートラインをターゲットする割引操作を返します。Shopify Discount Function APIドキュメントによると、機能はパーセンテージまたは固定金額の商品または注文から割り引くか、送料を割引します。カートを読み、価格を調整します。そのモデルのどこにも「新しいラインアイテムを挿入する」というのはありません。割引機能の仕事は、購入者が選択した商品に価格をつけることであり、カートに何が入っているかを変えることではないからです。
カートに接触する他の機能はCart Transform APIです。その文書化された仕事は、カート内のアイテムの「価格設定と提示」を変更することであり、ユースケースはバンドルをそのコンポーネントに展開し、行をバンドルにマージし、ラインのタイトル、画像、または価格を更新することに限定されています。それは既に存在するラインで動作します。それは無ぞどからカートに新しいギフト商品をドロップするメカニズムではなく、その操作のいくつかは開発ストアまたはShopify Plusに制限されています。
そのため、サーバー側ツールキットはギフトが既にカートに入ったら無料にするのに優れており、ギフトをそこに置くことに無用です。カートに商品を追加することはストアフロントでテーマ内で発生するため、すべての実際の自動追加ソリューションはそこで実行されるJavaScriptで終わります。
DIY Ajax Cart APIアプローチはどのように機能しますか?
アプリなしで自分で自動追加を構築したい場合、ストアフロントルートはShopifyのAjax Cart APIです。これはテーマがページリロードなしでカートに商品を追加するために使用するのと同じ軽量エンドポイントです。
メカニック
Ajax Cart APIはPOST /{locale}/cart/add.jsエンドポイントを公開して、カートに1つ以上のバリアントを追加します。Shopify Ajax Cart APIリファレンスによると、バリアントIDと数量を送信すると、アイテムはカートに表示されます。実際には、この方法で構築されたギフト配布は次のようになります:
- テーマのスクリプトはカートの変更をリッスンします。
- カート小計が目標金額を超えると、スクリプトが呼び出しますcart/add.jsギフトバリアントのIDを使用。
- Buy X Get YまたはProduct割引(ネイティブまたは機能ベース)がそのギフトを$0の価格に設定するため、顧客は請求されません。
- カートがしきい値を下回ると、スクリプトはカートAPIを再度呼び出してギフトを削除します。
カート内容を管理するストアフロントスクリプトと価格を管理する割引を組み合わせます。どちらの半分も仕事全体をしません。
メンテナンスコスト
これは機能し、たくさんのストアはそれのいくつかのバージョンを実行していますが、それはあなたが永遠に所有するコードです。コミットする前に注意すべきことがいくつかあります:
- それはテーマに結合されています。Ajax APIはShopifyでホストされたテーマでのみ機能し、スクリプトはテーマの特定のカートマークアップとイベントにフックします。テーマを切り替えるか、カート引き出しを変更するテーマアップデートを取得すると、スクリプトが無言で破損する可能性があります。
- エッジケースを保護する必要があります。買い物客が既にギフト商品を有料アイテムとしてカートに入れていた場合はどうなりますか?彼らが2つの異なるギフトの対象の場合はどうなりますか?彼らが急速に数量を変更した場合はどうなりますか?これらのそれぞれはあなたが書く必要のあるブランチです。テストします。
- 削除は難しい半分です。しきい値でギフトを追加することは簡単です。カートがしきい値を下回った瞬間にそれを確実に削除して、カートを編集しようとしている顧客と戦わないことは、DIY実装が不安定になるところです。
加速チェックアウト引っかかり
実際のお金がかかる失敗モードはこちらです。ストアフロントのみの割引ロジックに当たる同じ罠です。Shop Pay、Apple Pay、Google Payなどの加速チェックアウトにより、購入者はカートページ全体をスキップして直接チェックアウトにジャンプすることができます。テーマのJavaScriptはそのパスで実行されません。したがって、Shop Payボタンをタップする買い物客は、ギフトスクリプトを追加して、プロモーション全体が彼らのために無言で起こらない可能性があります。
これが、ストアフロントのみの割引ロジックがある場合でも、ギフト配布の価格側がShopify Function内にある理由です(すべてのチェックアウトパスでサーバー側で実行されます)。割引をサーバー側に保つと、買い物客がカートページを通じて進んだか、高速チェックアウトか、同じように適用されます。割引ロジックをテーマのJavaScriptに置くと、カートで合計が1つになり、最速コンバージョン購入者のチェックアウトで別のものになります。
画像プレースホルダー(画像2):Ajaxスクリプトが実行したり実行しないとこ
推奨される視覚:16:9分割イラスト。左のパネルに「標準チェックアウト」というラベルが付けられたカートページは、緑の「ギフトスクリプト実行」バッジと$0.00で追加されたギフトを示します。右のパネルに「Shop Pay / Apple Pay」というラベルが付けられたカートページをバイパスする高速チェックアウトボタンは、赤い「テーマJSは実行されない」バッジとギフトがありません。以下のキャプション「ストアフロントスクリプトは高速チェックアウトをスキップします。価格設定をサーバー側に保つ。」ブランドカラー紫と金、フラットベクトルスタイル、写真なし。
無料ギフトアプリで何を探すべきですか?
DIYが望むよりも多くのメンテナンスのように聞こえる場合、アプリは通常の答えです。すべてのギフト配布アプリが同じ方法で構築されているわけではありません。実際に重要なことはここにあります。
自動追加と自動削除、両方
ギフトの追加は机の杭です。実際のテストは、カートがしきい値を下回ったときにアプリがギフトを自動的に削除するかどうかです。自動削除なしでは、彼らがもう適格ではないギフトを保持し続けるカート、またはギフトが静かに戻ってきて顧客を驚かせます。両方向を主張してください。
カートとチェックアウトが同意するようにサーバー側の価格設定
ギフトが$0に価格設定される方法を尋ねてください。答えが「私たちのスクリプトがカートページの価格を設定する」の場合、加速チェックアウトの問題がベイク済みです。信頼できるパターンはShopify Functionでギフトに価格をつけるため、$0はカートページ、チェックアウトページ、Shop Payをすべて保持します。追加はテーマで起こることができます。割引はできません。
他のオファーと連携しています
ギフト配布はめったに単独で実行されません。おそらく同時にライブな売却、ボリュームティア、または送料無料も有効にしています。Shopifyの実際のスタックルールの下で、ギフトオファーが他の割引と清潔に組み合わせられることを確認してください。(割引スタックが新しい場合は、ガイドをご覧くださいShopifyでの割引スタックの仕組み3つの割引クラスと何が何と組み合わせるかを説明します。)
それはカタログを書き直しません
一部のアプリは割引をシミュレートするために商品価格を変更します。これは脆弱であり、アンインストール時に混乱が残ります。クリーンなアプローチはカタログに決して触れないチェックアウト時の調整であるため、アプリを削除するとカタログは正確にそのままになります。
今日確実に出荷できること:支出目標進捗バー
正直な分割はここにあります。ギフト配布の自動追加および削除部分は本当に難しいです。なぜなら、Shopifyのサーバー側ツールができないストアフロントカート操作に依存するためです。しかし、大部分の変換リフトを駆動する部分、買い物客がどのくらい報酬に近いかを示して、完全に解決可能であり、Stackableはそれを今出荷しています。
A支出目標はカートがしきい値を超えたときに支払う注文レベルの割引です。$75を支出して10%割引を取得するか、$100を支出して$15割引を取得してください。Stackableの支出目標機能は構築されてライブであり、ライブカート進捗バーが付属しており、実際のカート合計を読み込み、買い物客がアイテムを追加するとカウントダウンし、ページリロードなし。「あなたのギフトまであと$12です」は、しきい値プロモーションで最も効果的な単一の推進力であり、報酬がお金の割引であるか無料ギフトであるかに関係なく同じ心理的な仕事をしています。
支出目標はShopify Functionによって計算されるため、買い物客がカートページで見る報酬は、Shop Payを含め、チェックアウトが請求するのとまったく同じです。狩るカート対チェックアウトドリフトはありません。支出目標は注文クラスレイヤーとしてスタックするため、同じ注文で商品割引または送料無料と組み合わせます。
今すぐ何が利用でき、何が利用できないかについて明確にするために:Stackableの自動追加無料ギフト機能。ギフト商品自体は、しきい値で自動的に表示および消え、ロードマップにあり、近日公開予定です。今日あなたができることではありません。無料ギフト機能ページ配布で出荷されたときにどのように機能するか正確に説明しています。今日実行できるのは、ライブの進捗バー付きの支出目標報酬です。これはパターンの信頼できる、チェックアウトセーフな半分です。
画像プレースホルダー(画像3):カート進捗バーは報酬にカウントダウンします
推奨される視覚:16:9ストアフロントカート引き出しモックアップ。上部近くの進捗バーは紫色で約80%充填されており、「あなたの報酬まであと$12です」というラベルが付いています。以下、価格のある2つのカートラインアイテム。進捗バーの終わりの金色の報酬チップは「10%割引」を読みます。クリーンな現代的な電子商取引スタイル、テーマ中立、ブランドアクセント紫と金、写真なし。ドキュメント/screenshot-manifest.mdスロット支出目標ステップ3を参照して、後で実際のウィジェットをキャプチャします。
実行例:$75で自動追加され、その下で自動削除されるギフト
真の自動追加ギフト配布がどのように機能するかを説明しましょう。そのため、「正しく完了」がどのように見えるか、および支出目標進捗バーが今日それをサポートしているかを知ります。
ファッションブランドは$75以上のすべての注文に無料トートバッグを含める必要があります。自動的に追加されました。買い物客はこのカートを構築します:
- 1つのニットセーター@ $58
- 1つのビーニー@ $22
- 小計:$80
ストアは、$75カートの小計でトリガーするように設定されたギフト配布を実行し、トートをギフトとして使用します。
これを楽にする2つのことは、ネイティブBuy X Get Yが単独ではできない2つのことです:トートそれ自体を追加しますカートが$75に当たった瞬間、それはそれ自体を削除しますカートが$75を下回った瞬間。顧客はギフトを探してはいけませんし、適格でなくなったギフトは請求されません。
今日、その経験の進捗バー半分(計算されたサーバー側であるため、チェックアウトと一致する「$17離れた」推進力)は、Stackableの支出目標がマネーオフ報酬と組み合わせて提供するものです。ギフト商品の自動追加および削除はまもなく無料ギフト機能です。正直に枠組みされた:今はカウントダウンと報酬を実行でき、自動追加ギフト商品は道中です。
Stackableで確実にしきい値報酬を実行します
しきい値報酬メカニクスが信頼できるのではなく、テーマスクリプトが必要な場合はベビーシッターStackableShopifyの実際のルール内に構築されたものです。
- 支出目標ライブカート進捗バー買い物客がアイテムを追加すると、ページリロードなしで報酬にカウントダウンします。
- 報酬は計算されますShopify Functionにより、カートページ、チェックアウトページ、Shop Payはすべて同じ合計を表示します。テーマ対チェックアウトドリフトはありません。
- 支出目標スタック注文クラスレイヤーとして、Shopifyの組み合わせルールの下で商品割引と送料無料と組み合わせることができるように。
- Stackable商品価格を書き直しません。報酬はチェックアウト調整のみであるため、アンインストールはカタログを変更されないままにします。
- 自動追加無料ギフト機能はロードマップにあり、正直に近日公開予定とフラグされているため、常に何がライブで何が計画されているかを知ります。
Stackableを無料でインストールして、特典までのカウントダウンを今日から買い物客に見せましょう。usestackable.com/pricing 🎁
底線
- Shopifyの標準Buy X Get Yはギフトを自動追加しません。ギフトを$0に価格設定でき、支出金額でトリガーすることができますが、顧客がギフト商品を自分で追加する必要があります。
- 手動追加ステップは、プロモーションがリークする場所です。ほとんどの買い物客は気付きませんし、実際には支払っているインセンティブは未実現のままです。
- サーバー側の関数はカートに商品を追加することはできません。割引関数は既存のラインにのみ価格をつけ、Cart Transformは既に存在するラインのみを展開、マージ、または更新します。
- DIYルートは、ギフトを追加および削除するAjax Cart APIのテーマスクリプトであり、価格設定する割引と組み合わせました。それは機能しますが、テーマに結合されており、エッジケースが重く、加速チェックアウトによってスキップされます。
- アプリで、自動追加と自動削除、カートとチェックアウトが同意するようにサーバー側の価格設定、他のオファーとの清潔なスタック、およびカタログ価格の書き直しなしを主張します。
- 今日確実に出荷できることは、ライブカート進捗バー付きの支出目標報酬です。Stackableはそれを今提供し、サーバー側で計算されているため、チェックアウトと一致し、自動追加無料ギフト機能は正直に近日公開予定とフラグされています。
関連記事
- 支出目標と注文割引:カートバリューしきい値で全注文に報酬を与え、チェックアウトと一致するライブ進捗バー。今日構築およびライブ。
- 購入でギフトを自動追加する:自動追加および削除ギフト機能がどのように機能するか。近日公開予定。
- 送料無料オファー:送料無料を送信クラスのしきい値報酬として追加して、他のオファーと一緒に積み重なります。
- 割引スタック、正しく行われました:3つのクラスごとの結合スイッチがしきい値報酬がどのレイヤーレイヤーを決定します。
- Shopifyでの割引スタックの仕組み:3つの割引クラスとなぜネイティブが最高のみを適用するか。
- Shopifyの100商品がX Get Y制限を購入する:別のネイティブBuy X Get Yの天井とそれの周りで大規模な在庫オファーを実行する方法。
- Stackable価格設定:プラン、無料層、各プランを含むもの。
