コンテンツにスキップ
← GraphicMeat Prime Bundles

ストア向けアプリ · セットアップガイド

GraphicMeat Prime Bundles セットアップガイド

26 シナリオ。それぞれ、アプリで設定する内容とテーマエディターで設定する内容に分け、実際に表示されるラベルを使って説明します。必要なものだけお読みください。他のシナリオを読んだことを前提にした説明はありません。

Prime Bundles は2か所で設定します。オファーは Shopify admin 内のアプリで作成し(バックエンド)、ストアフロントのウィジェットはテーマエディターで一度だけオンにします(フロントエンド)。以下では、アプリが実現できるすべてのシナリオを同じ形式に分け、実際に表示されるラベルとともに説明します。

読み方。 各シナリオには2つの列があります。 バックエンド は Shopify admin 内のアプリ、 フロントエンド はテーマエディターと、買い物客がストアフロントで見るものです。太字のラベルは画面上に表示される正確な文字です。フロントエンドの列が空の場合、App embed(下で一度だけオンにします)以外にストアフロント側で必要な設定はありません。

すべてのシナリオの前に

バックエンド · アプリ内

  1. Shopify App Store からインストールします。admin 内のアプリの Home ページが開きます。
  2. Home では、セットアップガイドの最初のステップ Activate Prime Bundles on your storefront、これを押すと、テーマエディターが開き、 Bundle deals 埋め込みがすでにオンの状態になっています。エディターの Save を押して、戻ってきてください。
  3. 2つ目のステップ、 Create your first bundle deal、でオファーエディターが開きます。以下のすべてのシナリオは次から始まります: Offers → Create bundle deal.

フロントエンド · テーマエディター & ストアフロント

  1. Online Store → Themes → Customize → App embeds → Bundle deals をオンにする → Save。ウィジェットは、オファーのあるすべての商品ページで、商品フォームの上に自動で表示されます。
  2. 場所を自分で選びたい場合は、エディターで商品テンプレートを開き、 Add block → アプリ → Bundle deals、を押して、好きな位置にドラッグします。配置したブロックは常に埋め込みより優先されます。
  3. 埋め込みとブロックにはそれぞれ設定が1つあります: Accent color (既定値 #1a7f37)。オファー自身の Style の色が設定されている場合は、そちらが優先されます。

テーマエディターの全設定

設定できること既定値
Bundle deals (app embed)オファーのある商品ページで、商品フォームの上にウィジェットを表示します。テーマのファイルには触れません。オンにするまでオフ
Bundle deals (app block)同じウィジェットを、商品テンプレート内に手動で配置します。そのテンプレートでは埋め込みより優先されます。未配置
Accent color選択中のバー、バッジ、カウントダウン、ボタンの色です。オファーの Style → Colors で上書きされている場合を除きます。#1a7f37

アプリ内の各機能の場所

ページ内容
Home生み出した売上(30日間 / 累計)、兄弟アプリからのスイート売上、2ステップのセットアップガイド、 Create bundle deal ボタン。
Offersすべてのオファーを、タイプ(Quantity breaks、Mix & match、Buy X get Y、Fixed bundle、Order volume、Shipping discount)とステータスとともに一覧表示します。
Offer editor上から順に、Choose a discount type · Settings · Who sees this offer · Target by metafield · Method · Products · タイプ固有のセクション(Bars、Buy X get Y、Fixed bundle、Order volume tiers、Shipping discount) · Style · Boosters · Checkbox upsells · Translations · Combinations · Active dates · Live preview(A/B のアームと Traffic allocation 付き) · Summary · Save.
AnalyticsMetrics over time、Bundles、Features、Conversion funnel、Quantity per order、A/B tests、 Export as CSV.
Planプランの管理: 各段階とそれに含まれる追加売上、 Monthly / Annual (3 mo. free), Cancel plan — downgrade to Free、 そして Enter code (割引コードまたは紹介コード用)。
Help / Supportアプリ内ドキュメントとサポートフォーム。メッセージはスタジオに届きます。

シナリオ

1つの商品で、買うほど安く

商品ページに段階が並ぶはしご(2個購入で10%オフ、3個購入で15%オフ)で、買い物客がバーを選ぶと数量と価格がそれに連動します。

バックエンド · アプリ内

  1. Offers → Create bundle deal → Choose a discount type → Quantity breaks.
  2. Settings: Title (買い物客にはチェックアウトで割引名として表示されます)を付け、 Status を次の値に設定します: ACTIVE。DRAFT と PAUSED はストアフロントに表示されません。
  3. Method: Automatic discount を選択したままにします。
  4. Products → Applies to: Selected products → Select products → 商品を選択します。 All products を選ぶと、段階はストア全体に適用されます。
  5. Bars:バー1 Min qty 2, Discount Percent off, Percent 10、バー2は Min qty 3、15。必要に応じてバーを追加します。バーごとの任意項目: Title, Subtitle, Label, Badge と Badge style, Product image、 そして Selected by default (最初から選択しておくバーに設定)。
  6. Save。オファーは同じ保存でストアフロントとチェックアウトの両方に公開されます。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

商品価格の下に選択できるバーが表示されます。バーを選ぶと数量フィールドが設定されて行が再計算され、チェックアウトの Function も同じ金額を請求します。

確認する

商品を開き、3個以上のバーを選んで、カートに追加します。カートとチェックアウトには、コードを入力しなくても、オファーのタイトルの下に割引が表示されます。

デモストアで

4段階の価格を、カートに入れる前に。

2個以上で1個 $26.99、3個以上で $24.99、5個以上で $22.99、いちばんお得な10個なら1個 $19.99。すべてのバーに行の合計、取り消し線付きの通常価格、割引額が表示され、バーを選ぶと商品本来の数量フィールドがその場で再計算されます。

プレミアム Tシャツのデモストア商品ページ。Prime Bundles の数量割引ウィジェットに、2個以上で1個 $26.99(割引額 $6.00)から、いちばんお得な1個 $19.99(割引額 $100.00)までの、選択できる4つの段階が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

末尾が .99 の段階価格

割合だと $16.77 のような価格になります。代わりに段階の価格を直接指定します: 2個で1個 $26.99、3個で $24.99。

バックエンド · アプリ内

  1. 同じオファーで、各バーに Discount を次の値に設定します: Fixed price per unit を設定し、単価を入力します(例: 26.99)。 Amount off per unit も同じように使えます(「1個あたり $3 オフ」)。
  2. Style → Price display: Price per item か Per item, total underneath、バーは選んだ数字を先頭に表示します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

バーには「Buy 2+」と「$26.99 each」と表示され、その横に行の合計と取り消し線付きの通常価格が並びます。 GraphicMeat Prime Bundles ページ上の全ページキャプチャ。

確認する

複数の通貨で販売していますか? 固定金額は、カートの通貨でその数字としてそのまま適用されます。複数通貨のストアでは割合を使うか、各マーケットを次で確認してください: Live preview → Country previewing.

コレクション全体にわたる1つの段階

ドリンクウェア任意の2点で10%オフ、3点で15%オフ(マグカップ1個とボトル2本でも3点の段階に届きます)。

バックエンド · アプリ内

  1. Quantity breaks オファー → Products → Applies to: Selected collections → Select collections。コレクションに商品が追加または削除されると、メンバーシップは自動で再展開されます。
  2. Exceptions & counting:次にチェックを入れます Count quantity across all matching products (collection breaks).
  3. 任意: Select exceptions コレクションに含まれていても、決して割引してはいけない商品に使います。
  4. Bars を通常どおり設定し、次に Save.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

コレクション内のすべての商品に同じタイルが表示され、「Mix savings」の行はカートに入っているミックスに合わせて変わります。

確認する

マグカップ1個とボトル2本を追加します。チェックアウトでは3点の段階が3つの行すべてに適用されます。

デモストアで

商品群全体で数量を数える。

ドリンクウェアの段階は、対象のすべての商品を合算して数えます。任意の2点で10%オフ、3点で15%オフ、5点で20%オフなので、マグカップ1個とボトル2本でも、マグカップ3個と同じく3点の段階に届きます。ミックスの割引額の行は、カートの中身に合わせて変わります。

11oz マグカップの商品ページ。「Mix any drinkware」ウィジェットに、任意の2点で10%オフ、「Best mix」の表示が付いた任意の3点で15%オフ、任意の5点で20%オフのタイルと、$5.39 の「Mix savings」の行が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

カート内のすべての数量を段階の判定に数える

カート内のどの商品でも3個以上の段階に到達できますが、割引されるのはこのオファーの商品だけです。

バックエンド · アプリ内

  1. Quantity breaks オファー → Exceptions & counting → 次をオンにします: Volume discount with other products。これはコレクション方式のカウントを意味します。
  2. 次の設定を維持します: Applies to は、実際に割引したい商品に設定したままにします。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

商品ページでは何も変わりません。チェックアウトでは、無関係な2点とこのオファーの商品1点で、その商品はすでに3個以上の段階に達します。

確認する

カート: 無関係な2点 + オファー商品1点 → オファー商品に3個以上の割引率が適用されます。

パック価格: 3個パック、6個パック、12個入りケース

パック用 SKU を作らずに1つの商品からまとめ売りを販売し、「Most popular」と「Best value」のバッジを付けます。

バックエンド · アプリ内

  1. Quantity breaks オファー → Bars:Min qty 3 / 6 / 12、 Percent off 10 / 15 / 25(または固定の単価)。
  2. バーごとに: Title 「3-pack」「6-pack」「Case of 12」; Badge 「Most popular」を真ん中のバーに、「Best value」を最後のバーに設定し、次のスタイルを選びます: Badge style;次をオンにします: Selected by default (最初から選択しておきたいバーで)。
  3. Style → Layout:バーの代わりにタイル(横並び)。 Boosters → Savings summary をオンにし、テキストは「You save {amount} ({percent})」にします。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

パックの合計、取り消し線付きの通常価格の合計、割引額を表示する3つのタイルが並び、選択中のタイルはアクセントカラーで縁取られます。

確認する

ケースのタイルを選ぶと、テーマの数量フィールドが12になり、カート行に1個あたりの割引が表示されます。

デモストアで

計算が見える、パック価格。

3個パックは $75.58、6個パックは $142.75 で「人気No.1」の表示、12個入りケースは $251.91 で「いちばんお得」の表示で、それぞれに合計の割引額が付きます。ラベル、バッジ、どのバーを最初から選択しておくかは、すべて自由に設定できます。

Tシャツの商品ページ。「Stock up & save」ウィジェットに、3個パック $75.58、「Most popular」の表示が付いた6個パック $142.75、「Best value」の表示が付いた12個入りケース $251.91 のタイルと、「You save $25.19」の行が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

2つ買うと無料ギフト

1パックは通常価格、2パックなら無料のマウスパッド付き。

バックエンド · アプリ内

  1. 2つのバーを持つ Quantity breaks オファー: Min qty 1 は Percent off 0(タイトルは「One pack, standard price」)、Min qty 2 は希望する割引(任意)。
  2. 2つ目のバーで Add free gift を押して、ギフトのバリエーションを選びます。 Change free gift で、あとから差し替えられます。
  3. ギフト商品が購入可能であることを確認してください(在庫があるか、在庫管理されていないこと)。通常の行としてカートに入ります。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

2つ目のバーにはギフトのバッジが付き、バーの下にギフトの名前が表示されます。選択するとギフトが100%オフで追加され、チェックアウトでは2パックが実際にカートにある場合にのみ無料のまま維持されます。

確認する

2パックのバーを選んで、カートに追加し、カートで数量を1に減らします。チェックアウトでギフトの割引が消えます。

デモストアで

クーポンではなく、ギフト段階。

1パックは通常の $4.95、2パックは $9.90 で無料のマウスパッド付きです。ギフトは100%オフの実際の商品行で、ウィジェットが追加し、チェックアウトで Function が再確認するため、1パックだけでは受け取れません。

ステッカーパックの商品ページ。「Free gift with purchase」ウィジェットに、通常価格 $4.95 の1パックと、無料のマウスパッド付きで $9.90 の2パック(「Free gift」の表示付き)が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

段階ギフト: 段階ごとにより良いギフト

マグカップ2個で10%オフとステッカーが解放され、3個で15%オフとマウスパッドが解放されます。

バックエンド · アプリ内

  1. 3つのバー(1 / 2 / 3)を持つ Quantity breaks オファー。 Add free gift をバー2(ステッカー)とバー3(マウスパッド)で使います。バーごとに別のギフトを付けられます。
  2. Badge をバー(「Gift unlocked」「Best loot」)に付け、 Style → Block title を「Unlock gifts as you add」に設定します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

各バーがギフトの名前を示すはしご。買い物客が上の段階に進むと、バーの下のギフト行が入れ替わります。

確認する

マグカップを3個追加します。カートにはマグカップと無料のマウスパッド1つが入り、両方のギフトが入ることはありません。

デモストアで

数量が増えるほど解放されるギフト。

マグカップ1個は $11.99。2個なら10%オフで無料のステッカー付き、3個なら15%オフで無料のマウスパッドも追加されます。ギフトは $0 でカートに入り、対象の数量が本当にそろっている場合にのみチェックアウトで適用されます。

11oz マグカップの商品ページ。「Unlock gifts as you add」というタイトルの Prime Bundles ウィジェットに、マグカップ1個 $11.99、2個で10%オフと「Gift unlocked」の表示が付いた無料ステッカー、3個で15%オフと「Best loot」の表示が付いた無料マウスパッド、そして「You save $2.39」の行が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

Mix & match: 商品のセットから任意の N 個を選ぶ

買い物客は商品群(ステッカー、マグカップ、マウスパッド)から自分のセットを組み立て、点数が増えるほど割引が大きくなります。

バックエンド · アプリ内

  1. Create bundle deal → Mix & match.
  2. Products: Select products か Select collections をプールに使います。メンバーはそれぞれ自分のページでカードが表示されます。
  3. Bars:Min qty 2 Percent off 10、Min qty 3 → 15、または Amount off per unit (「1個あたり $3 オフ」用)。
  4. Save.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

メンバーごとのチェックボックスと、点数にチェックを入れるごとに点灯する段階タイルを備えた「Build your set」カード。ボタン1つでセット全体が追加され、チェックアウトで各アイテムがまとめて価格計算されるよう印が付きます。

確認する

メンバーのページで2点にチェックを入れ、次を押します: Add bundle;カート行にはオファーのラベルが付き、チェックアウトでは3点すべてが割引されます。

知っておくと便利なこと

このカードは、数量割引のオファーを持たない商品にだけ表示されます。同じ商品に数量のはしごがある場合は、そちらが優先されます。

デモストアで

セットを、ひとつずつ選んで組み立てる。

買い物客は、あなたが選んだ商品群(ここでは四角いステッカー、マグカップ、マウスパッド)から欲しいものにチェックを入れ、カードがそれを2点(10%オフ)と3点(15%オフ)の段階に向けて数えます。ここでは2点にチェックが入っていて、カードには3点、15%オフと表示され、ボタン1つでセット全体が追加されます。チェックアウトでどの行が同じセットかが分かるよう、印が付きます。

「Build Your Own Bundle, Pick Your Loadout」というタイトルのデモストア商品ページ。Prime Bundles の Build your set カードに、2点10%オフと3点15%オフの段階タイル、チェックが入った四角いステッカーとマグカップ、チェックなしのマウスパッド、「Add bundle, 3 pieces」ボタンが表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

1つ買うと1つ無料

同じキャップを2個、2個目は無料。

バックエンド · アプリ内

  1. Create bundle deal → Buy X get Y.
  2. Buy quantity 1, Get quantity 1, Get % off (100 = free) 100.
  3. 次をオンにします: Buy and get are the same product(s)、次に Products → Select products → キャップを選びます。
  4. Save.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

商品ページに「Bundle deal: Buy 1 get 1 free」というコンパクトなストリップが表示され、2個目はチェックアウトで 0 になります。

確認する

カートの数量が2 → 1個が100%オフ。数量3 → 無料は1個のまま。4 → 無料は2個。

デモストアで

ページに明記し、チェックアウトで適用。

キャップを1つ買うと同じ商品が1つ無料: 購入オプションの下にコンパクトな Bundle deal ストリップが表示され、チェックアウトで入力するものはなく、無料の1個も実在庫です。商品をまたぐオファー(「これを買うとあれが無料」)や一部だけのオファー(「2個目は50%オフ」)も、同じストリップを使います。

「Buy One Get One」キャップのデモストア商品ページ。購入オプションと、カートに追加ボタンの上に「Buy 1 get 1 free」と表示された Bundle deal ストリップが表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

これを買うとあれが無料、または半額

帽子を買うとマウスパッドが無料、または2個目が50%オフ。

バックエンド · アプリ内

  1. Buy X get Y 同じ手順で、 Buy and get are the same product(s) をオフにします。
  2. 購入セットと特典セットを、それぞれの Select products ボタンで選びます。セットを空のままにすると、すべての商品を意味します。
  3. Get % off 100 なら無料、50 なら半額。 Buy quantity 2 / Get quantity 1 なら「2個買うと1個もらえる」になります。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

ストリップは購入対象の商品に表示され、割引は両方がカートに入った時点で特典対象の商品に適用されます。 GraphicMeat Prime Bundles ページ上の全ページキャプチャ。

確認する

帽子だけ → 割引なし。帽子 + マウスパッド → マウスパッドが無料。

キットを1つの価格で

Tシャツと帽子を1つのボタンから $69.99 でセット販売し、架空のキット SKU による売り越しはありません。

バックエンド · アプリ内

  1. まず Shopify で: Products → Add product キット自体の商品を作成します(「Starter Kit」)。価格は $69.99、在庫は管理しません。注文上ではバンドルを表し、在庫は構成商品から引かれます。
  2. Create bundle deal → Fixed bundle.
  3. Select component variants → Tシャツ(Black / M)と帽子を選び、 Qty をそれぞれ設定します。
  4. Bundle price 69.99(「統合されたバンドル行が販売される合計価格」)。
  5. Select bundle product variant → 先ほど作成したキット商品を選びます。 Image URL (optional) (カード用)。
  6. Save。アプリは統合のためにカート変換を登録します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

コンポーネント商品のページに「Add bundle」カードが表示されます。各アイテムは実際の行としてカートに入り、チェックアウトでバンドル価格の1つのキット行にまとめられます。

確認する

Add bundle を押してチェックアウトへ進みます。「Starter Kit」の1行が $69.99 で表示されます。Tシャツの在庫を0にすると、ボタンは購入不可と表示します。

デモストアで

架空の在庫なしで、キットを1つの価格で。

スターターキットは、Tシャツと帽子を Add bundle ボタン1つで $69.99 でセット販売します。構成商品は在庫管理された実際の行としてカートに入り、カート変換がチェックアウトで1つのバンドル行にまとめるため、キットが手元にない在庫を売ることはありません。

「Complete the Bundle, Tee + Hat」というタイトルの商品ページ。価格の下に GraphicMeat Starter Kit $69.99 の Add bundle ストリップ、固定バンドルの仕組みの説明、「You may also like」の行が表示されています
GraphicMeat デモストア · Horizon テーマ · 修整なしクリックで拡大

$X 購入で注文全体が Y%オフ

カート全体の段階: $100 を超えると10%オフ、$200 を超えると15%オフ、または点数で設定。

バックエンド · アプリ内

  1. Create bundle deal → Order volume.
  2. Order volume tiers → Based on: Cart subtotal か Item count.
  3. 行: Min subtotal (または Min items), Discount Percent off か Amount off, Label (optional):ラベルはチェックアウトに表示される文言です。
  4. Save.

フロントエンド · テーマエディター & ストアフロント

  1. このタイプには商品ページのウィジェットはなく、チェックアウトでカートに価格が適用されます。しきい値は Smart Cart の Announcement text、リワードの段階、またはテーマのお知らせバーで告知します。

買い物客に見えるもの

小計または点数が段階を超えると、チェックアウトにあなたのラベル付きの注文割引の行が表示されます。

確認する

カートが $99 → 何もなし。$100 を超える1点を追加 → 注文割引が表示されます。

$X 超で送料無料(またはより安く)

小計が $50 を超えたら、配送プロファイルに触れずに送料無料にします。

バックエンド · アプリ内

  1. Create bundle deal → Shipping discount.
  2. Minimum subtotal 50, Percent off shipping 100(「100 = 送料無料」)。50 なら送料が半額になります。
  3. Save.

フロントエンド · テーマエディター & ストアフロント

  1. 同じ金額の Smart Cart のリワード段階と組み合わせると、ドロワーに進捗バーが表示されます。次をご覧ください: Smart Cart ガイド。数字は一致させる必要があります。ここでの割引が、実際に送料を無料にします。

買い物客に見えるもの

チェックアウトでは、小計が条件を満たすと配送料の行が $0 に割引されます。このタイプでは商品ページには何も表示されません。

確認する

$49 のチェックアウトでは送料がかかり、$51 では送料の行が無料と表示されます。

バーの下のチェックボックス式アドオン

数量のはしごの下に、ステッカーを50%オフ、マグカップを25%オフで、チェックボックスとして提供します。

バックエンド · アプリ内

  1. Quantity breaks オファー → Checkbox upsells → Select add-ons → 商品を選択します。
  2. 次を設定します: % off (アドオンごと)。 Remove で1つ削除します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

バーの下にチェックボックスの行が並び、アドオンの価格と割引が表示されます。チェックしたアドオンは主商品と一緒に追加され、チェックアウトで割引されます。

確認する

アドオンにチェックを入れてカートに追加します。2つの行ができ、アドオンにはその割合の割引が適用されます。

知っておくと便利なこと

Quantity breaks オファーでのみ利用できます。

カウントダウン付きでセールを予約

金曜日に自動でオンになり、日曜の夜にオフになり、その間はカウントダウンの時計を表示する週末限定オファー。

バックエンド · アプリ内

  1. Active dates: Start date + Start time、次をオンにします: Set end date、次に End date + End time。時刻はストアのタイムゾーンで、ラベルに表示されます。 Status ACTIVE のままにします。切り替えは日付が行います。
  2. Boosters → Countdown timer をオンにします。 End date は全員に共通の固定の期限用、 Minutes per visitor は最初の表示から始まり再読み込みしても続く、常時型のタイマー用です。
  3. 任意: Label (「Offer ends in」)、 Icon, Button text (optional) は、タイマーから直接、選択中のバーを追加するボタン用、 Expired text (空欄にすると 0 になった時点でタイマーを消します)、さらに Design, Alignment と Colors.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

時計はバーの上に表示され、終了日を過ぎるとオファーは自動でストアフロントとチェックアウトから外れます。

確認する

終了時刻を10分後に設定し、ウィジェットとチェックアウトの割引が一緒に消えるのを確認します。

コンバージョンブースター: 固定バー、割引額の行、ステッパー、バリエーション選択、カートのスキップ

同じウィジェットから、任意のアドオンでさらに成果を引き出せます。それぞれオンにするまではオフです。

バックエンド · アプリ内

  1. Boosters → Sticky add to cart:ウィジェットが画面外にスクロールされると、選択中のバーを画面下部に固定します; Button text.
  2. Savings summary:バーの下または上に「You save {amount} ({percent})」を表示します(Text, Design, Alignment & position, Icon, Colors).
  3. Quantity selector:選択中のバーの内側に − / + のステッパーを表示します。上限は Maximum quantity.
  4. Pick a variant per item:「3個買って、サイズを選ぶ」(Style Dropdowns または Swatches、 Button text)。各ユニットは個別のカート行になり、それでも合算して数えられます。
  5. Skip cart — go straight to checkout:カート追加後、買い物客はチェックアウトに移動します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

各ブースターは有効にしたときだけ表示され、オフのままのオファーには何も変わりません。

確認する

固定バーをオンにしてウィジェットをスクロールして通り過ぎると、バーが現れ、選択中の数量を追加します。

スクラッチカードでオファーを明かす

買い物客がスクラッチして開く箔のカードの下に最良のバーを隠し、必要に応じて実際の割引コードを適用します。

バックエンド · アプリ内

  1. Boosters → Scratch-off をオンにします。次を選びます: Cover finish、次を切り替えます: Glitter, Confetti on reveal と Holo card after reveal;次を設定します: Card text (「Scratch to reveal your deal」)、 Card text style と Text size.
  2. 設定場所: Bars、次をオンにします: Hide behind the scratch card (隠したいバーで)。隠すバーがない場合、カードは単体で表示され、次の内容を表示します: Prize text.
  3. コードを配布するには、Shopify の Discounts でコードを作成してから、次の欄に貼り付けます: Discount code (optional);カードは公開時にそれを適用するため、チェックアウトでも反映されます。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

隠れたバーの上のスクラッチできるカバー。スクラッチすると、紙吹雪とともにバーが現れて選択されます。

確認する

スマートフォンでもデスクトップでもスクラッチできます。現れたバーが選択され、設定されている場合はコードがカートに適用されます。

コード付きのオファー(顧客がコードを入力)

コードを持つ人だけのバンドル価格: ニュースレター、インフルエンサー、サポート。

バックエンド · アプリ内

  1. どのオファーでも、 Method → Discount code → コードを次の欄に入力します: Discount code.
  2. 段階は通常どおり作成し、次を押します: Save。アプリがそのために Shopify でコード割引を作成します。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

コード付きのオファーでは、商品ページには何も表示されません。価格はコードが入力されたときにチェックアウトで適用されます。

確認する

コードなしのチェックアウト → 通常価格。コードを入力 → 段階が適用されます。

一部の買い物客だけに: 国、B2B、metafield

米国とカナダのみ、卸売の購入者のみ、または metafield でタグ付けされた商品のみを対象にしたオファー。

バックエンド · アプリ内

  1. Who sees this offer → Audience: Everyone, B2B (company) buyers only か Retail customers only.
  2. Countries:ISO コードをカンマ区切りで入力します(「US, CA」)。空欄はすべてのマーケットを意味します。
  3. Target by metafield: Level (Product metafield / Variant metafield) → Metafield → Equals に値を入力すると、一致する商品だけがオファーに含まれます。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

対象外の相手にはウィジェットがオファーを非表示にし、チェックアウトの Function も価格を適用しません。両者は一致しています。

確認する

Live preview → Country previewing は、保存する前に各マーケットで何が表示されるかを確認できます。

オファーの2つのバージョンを A/B テスト

「Buy 2, save 10%」と「Buy 2, save 15%」のどちらが成果が出るでしょうか。トラフィックを分けて結果を確認します。

バックエンド · アプリ内

  1. 次の Live preview カードで次を押します: Start an A/B test、次に + Add variant を、追加するアームごとに押します。最初のアームは設定済みのオファーそのものです。
  2. アームごとに、次を上書きできます: Bars, Style または Block title.
  3. Traffic allocation:アームごとに % を指定します。空欄にすると均等に分割されます。 Save.
  4. 結果は次で確認します: Analytics → A/B tests;集計は合計値であり、買い物客ごとではありません。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

各訪問者にはアームが割り当てられ、一貫して同じものが表示されます。チェックアウトでは、その人が見たアームの価格が適用されます。

確認する

2つのプライベートウィンドウで商品を開きます。それぞれ再読み込みしても同じアームのままです。

ウィジェットを翻訳する

フランス語の買い物客には、フランス語のバーが表示されます。

バックエンド · アプリ内

  1. Shopify で、 Settings → Languages:言語を追加して公開します。公開済みで、プライマリ以外の言語だけがアプリに表示されます。
  2. Offer → Translations → Language → 一覧表示された各文字列(ブロックのタイトル、バーのタイトル、サブタイトル、バッジ、ボタンのテキスト)を入力 → Save.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

ウィジェットはストアフロントのロケールを読み取って文字列を切り替えます。空欄のものは元の文言のままです。

確認する

ストアフロントの言語セレクターを切り替えて、商品ページを再読み込みします。

ウィジェットをテーマに合わせる

ウィジェットが、最初からテーマに付属していたように見えます。

バックエンド · アプリ内

  1. Style: Block title (“BUNDLE & SAVE”)、 Title alignment & style, Uppercase; テーマ; Layout (バー、タイル、グリッド、リスト); Corner radius; Spacing; Price display (Bundle total, Price per item, Total, per item underneath, Per item, total underneath, No price); Colors; Typography.
  2. 変更しながら Live preview を確認します: Test product, Country previewing, Unit price がサンプル表示を決めます。

フロントエンド · テーマエディター & ストアフロント

  1. 埋め込みの Accent color は、オファーの Colors で未設定のすべてのものに使われる代替です。

買い物客に見えるもの

オファーごとのスタイル設定で、クリアランス用のはしごとプレミアムなバンドルを同じストアで違う見た目にできます。

確認する

プレビューを、デスクトップとスマートフォンの幅の本番商品ページと見比べます。

オファーを重ねる、または最良のものだけにする

数量のはしごと BOGO が1つの行に同時に一致した場合の動作を決めます。

バックエンド · アプリ内

  1. 既定では1行につき1つのオファーです。アプリは買い物客にとって最も得になるものを残します。
  2. 代わりにオファーを他のオファーに重ねて適用するには、そのオファーを開いて次をオンにします: Combinations → Combine with other discounts (“applies on top of other offers instead of best-of”)。
  3. Shopify の割引コードは、コード自体の併用設定に従って重なります。設定場所: Discounts;アプリの割引は併用を許可するように作成されます。

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

ウィジェットが、チェックアウトで適用されない合算割引を宣伝することはありません。

確認する

1つの商品に2つのオファー、併用オフ → 大きいほうが適用されます。併用オン → チェックアウトに両方の行が表示されます。

オファーの一時停止、終了、削除

オファーを削除せずに取り下げる、または完全に終了する。

バックエンド · アプリ内

  1. Status → PAUSED:ストアフロントとチェックアウトから外れ、設定は保持されます。 DRAFT は、一度も公開されなかったオファー用の同様の状態です。
  2. 予定された終了には、代わりに Active dates → Set end date を設定します。
  3. アプリをアンインストールすると、そのすべての割引、カート変換、保存されたオファーが一度に削除されます。

フロントエンド · テーマエディター & ストアフロント

  1. 次の Bundle deals 埋め込みをオフにすると、すべてのウィジェットが一度に非表示になりますが、チェックアウトの価格は有効なままです。本当の一時停止には Status を使います。

買い物客に見えるもの

一時停止したオファーは商品ページから消え、同じ保存のうちに価格適用も止まります。

確認する

一時停止し、商品ページを再読み込みして、カートに追加します。チェックアウトでは通常価格です。

成果を確認する

何かに支払う前に、どのオファーが効果を上げているかを把握しましょう。

バックエンド · アプリ内

  1. Home:生み出した売上(30日間)と(累計)、さらに兄弟アプリからのスイート売上。
  2. Analytics:Metrics over time、Bundles(オファーごと)、Features、Conversion funnel、Quantity per order、A/B tests、 Export as CSV.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

貢献売上は、あなたのオファーのいずれかが1行を割引したすべての注文の小計です。プランのしきい値が監視する数字でもあります。

確認する

割引された行を含むテスト注文をします。webhook の遅延の範囲内で、Home に表示されます。

プラン、年払い、紹介コード

アプリが元を取るまでは無料のままで、取れたらプランを選びます。

バックエンド · アプリ内

  1. Plan:各段階に月額料金と含まれる追加売上が表示されます。次を切り替えます: Monthly / Annual (3 mo. free)、プランの選択ボタンを押し、Shopify のページで請求を承認すると、アプリに戻ります。
  2. 直近30日間の貢献売上が $200 未満であれば、何も必要ありません。それを超えると、新規または編集したオファーの保存にプランが求められます。稼働中のオファーは動き続けます。
  3. Cancel plan — downgrade to Free は有料プランを終了します。 Enter code は、次を受け付けます: Discount or referral code.

フロントエンド · テーマエディター & ストアフロント

すでにオンになっている App embed 以外は不要です。

買い物客に見えるもの

請求は Shopify の請求書に記載されます。開発ストアには決して請求されません。

確認する

承認すると、Plan ページで現在の段階に印が付き、アップグレードのバナーが消えます。

公開前チェックリスト

  1. テーマエディター: Bundle deals 埋め込みがオン(またはブロックが配置済み)で、保存済みです。
  2. 公開中のすべてのオファーで Status が ACTIVE であり、スケジュール設定がある場合は日付とタイムゾーンが正しいこと。
  3. ギフトとアドオンの商品は、在庫があるか、在庫管理されていません。
  4. 1つの商品に1つのはしご: mix & match のカードは、同じ商品の数量割引オファーの裏に隠れます。
  5. 複数通貨のストアですか? 割合の段階にするか、各マーケットを次で確認します: Country previewing.
  6. 各段階でのテスト注文、カートを減らす方向に編集したもの、割引コードを使ったものをそれぞれ1回ずつ行います。
  7. Smart Cart をインストールしていますか? そのリワードの段階が、送料と注文のしきい値と1セント単位まで一致していることを確認します。

まだ解決しませんか?

メッセージの送信先は お問い合わせフォーム です。アプリを作った本人が回答します。 FAQ は料金、貢献売上、データを扱っています。 アプリページ では、上記のすべてのシナリオを、デモストアで実際に見られます。