カート目標バー

Cart Goal Bar は、Spend More Save More のオファーを 1 行のテキストと 1 本のバーにまとめます。あといくら購入すればよいか、それで何が解放されるのか、そして途中の各ティアを示すマークです。購入者のカートが増えるにつれてバーが埋まっていきます。

設定手順

Spend More Save More のディスカウントで Show on storefront をオンにします。

Spend More Save More のディスカウントを開き、 Show on storefront をオンにします。新しく作成したディスカウントでは最初からオンです。
Cart Goal Bar の横の Add をクリックします。

そのカードの Add to your theme パネルにある Cart Goal Bar の行には “Shows progress toward the next tier in the cart” と表示されています。Add ボタンを押すと、ブロックを配置できる状態でテーマエディターが開きます。
テーマエディターでブロックを配置して保存します。

購入者に進捗を見せたい場所にブロックを置き、Save をクリックします。
バーの色と文言を設定します。

以下はすべて、テーマエディターでのブロックの設定です。

設定項目

Bar

Track color — バーの埋まっていない部分です。初期値は #e5e5e5。
Fill color — 埋まった部分です。初期値は #1a1a1a。
Unlocked color — いちばん上のティアに到達したときに使われます。初期値は #2e7d32。
Text color — バーの上のテキストの色です。
Bar height — 4〜32 px。初期値は 10。
Roundness — 0〜24 px。初期値は 8。
Show amounts under the bar — 初期状態ではオフです。購入済みの金額と次のしきい値を表示します。

Wording

Goal text — 初期値は Spend {amount} more to get {percent} off。{amount} と {percent} は自動的に置き換わります。
Unlocked text — 初期値は You’ve unlocked {percent} off!
Tier mark colour — 初期値は #ffffff。まだ到達していないマークに使われます。到達したマークには unlocked の色が使われます。
Tier mark shape — Circle（初期値）または Square。
Tier mark size — 6〜28 px。初期値は 14。
Show tier amounts under the bar — 初期状態ではオフです。幅の狭い画面ではラベルが重なることがあるためです。
Tier reached text — 初期値は You've got {current} off. Spend {amount} more to get {percent} off。あるティアに到達し、まだ上のティアが残っているときに表示されます。{current}、 {amount}、{percent} は自動的に置き換わります。
Code hint prefix — 初期値は “Use code”。コードディスカウントのときだけ表示されます。
Static text — 初期値は Spend {amount} to get {percent} off。進捗を測れないときに使われます。
Static text with excluded items — 初期値は Spend {amount} to get {percent} off eligible items。ディスカウントが一部の商品を除外しているときに、静的テキストの代わりに使われます。

設定例

ブランドカラーの控えめなバー

Fill color: #1a1a1a
Unlocked color: #2e7d32
Bar height: 10
Roundness: 8
Show amounts under the bar: off

すべてのティアを示す目立つバー

Bar height: 16
Tier mark shape: Square
Tier mark size: 18
Show tier amounts under the bar: on
Goal text: Only {amount} more for {percent} off

購入者への表示

アプリがカートを測れているあいだ、テキストは残りの金額をカウントダウンし — “Spend $20 more to get 15% off” — バーは次のマークに向かって埋まっていきます。あるティアに到達し、まだ上のティアが残っている場合、テキストは Tier reached text に切り替わります。いちばん上のティアでは Unlocked text に切り替わり、バーが unlocked の色になります。マークが描かれるのは最大 6 ティアまでです。

進捗を測れない場合、ブロックは代わりに Static text でオファーの内容を伝えます。裏付けのない進捗を主張することはありません。どちらの場合でもディスカウント自体は影響を受けません。Shopify がカートを確認し、条件を満たしていれば適用します。

コードディスカウントの場合は、コードが必要だと購入者にわかるように Code hint prefix が表示されます。

上限と注意点

ティアのマークが描かれるのは最大 6 ティアまでです。 それを超えてもバーは埋まり、文言もカウントダウンします。マークだけが省かれます。
Bar height 4〜32 px ・ Roundness 0〜24 px ・ Tier mark size 6〜28 px。
条件や除外があると、リアルタイムの進捗表示が止まることがあります。 オファーのルールのためにカートの対象部分をアプリが測れない場合、ブロックは静的な文言に切り替わります。どちらに当てはまるかは、ディスカウントの Show on storefront カードに表示されます。
オファーを停止するとバーは表示されなくなります。 スイッチが有効そうに見えたまま残るのではなく、カードがその旨を表示します。
App embed は不要です。 このブロックは単独で表示されます。