ストアフロントウィジェット

商品ページにティアのオファーを表示するブロックが 3 つあります。Quantity Break Table、 Quantity Break Picker、そして Spend More Save More の表です。テーマに一度配置すれば、あとは ディスカウントに追従し、そのティアを表示し、オファーが終われば非表示になります。

App embed は不要です

これらはテーマブロックで、それぞれが単独で描画されます。 App embed が必要なのは、Sale Badges、Price Drops、そして自動で 追加される無料ギフトのほうです。

設定手順

1. ディスカウントで Show on storefront をオンにします。

   対象のディスカウント — Quantity Break、Spend More Save More、Price List — を開き、Show on storefront をオンにします。新しい Quantity Break と新しい Spend More Save More のディスカウントでは、初期状態でオンです。カードのステータス行には、購入者が何を目にするのか、 あるいはウィジェットが非表示のままになる理由が示されます。

   

2. 追加したいブロックの横の Add をクリックします。

   そのカードの下部にある Add to your theme パネルには、テーマエディターでの名称そのままで各 ブロックが並び、内容を説明する 1 行と、Add ボタンが付いています。Add を押すと、そのブロックを 配置できる状態でテーマエディターが開きます。

3. テーマエディターでブロックを配置して保存します。

   商品ページの適切な場所 — 通常は価格や購入ボタンの近く — にブロックを置き、Save をクリックします。

4. テーマエディターでブロックの設定を調整します。

   以下のラベル、色、動作はすべて、ブロック自体に付いているテーマエディターの設定です。

Quantity Break Table

Quantity Break のオファーのすべてのティアを、商品ページに表として並べます。数量、購入者が受け取る もの、そして価格です。

General

• Border color — 表の枠線です。初期値は #d9d9d9。
• Roundness — 角の丸み、0〜24 px。初期値は 8。
• Borderless — 初期状態でオフです。オンにすると枠線がなくなります。

Header

• Header background — 空欄の場合はデザインの初期値が使われます。
• Header text — ヘッダーの文字色です。

Body

• Cell padding — 4〜32 px。初期値は 14。
• Body background
• Body text
• Highlight unlocked tier — 初期状態でオンです。選択中の数量に一致する行を強調表示します。
• Highlight color — 初期値は #e8f5e9。

Columns

• Display quantities as range — 初期状態でオフです。オンにすると “2+” ではなく “2–4” と 表示します。
• Quantity label template — たとえば Buy {quantity}+ のように指定します。{quantity} は自動で 置き換えられます。空欄なら “2+” のままです。範囲表示には影響しません。
• Quantity label — 初期値は “Buy”。
• Show savings column — 初期状態でオンです。金額値引きのオファーでは常に表示されます。
• Savings label — 初期値は “Get”。
• Off-each label — 初期値は “off each”。パーセントのオファーで使われます。
• Amount-off label — 初期値は “off”。金額値引きのオファーで使われます。この金額は対象商品の合計 に対するものなので、初期値は合計についての表現であり、1 点あたりの表現ではありません。
• Fixed-price label — 初期値は “each”。固定価格のオファーで使われます。
• Show prices column — 初期状態でオンです。金額値引きのオファーと、バリエーションが 50 を超える 商品では自動的に非表示になります。
• Price label — 初期値は “Price”。
• Show original price — 初期状態でオンです。値引き後の価格の隣に、通常価格を取り消し線付きで 表示します。
• Show base row — 初期状態でオンです。最初のティアより少ない数量向けに、通常価格の行を追加します。

Message

• Code hint prefix — 初期値は “Use code”。ディスカウントコードの場合にのみ表示されます。
• Linked message — 表の上または下に表示する、任意のテキストです。
• Message position — Above または Below。初期値は Below。

Quantity Break Picker

同じオファーを、購入者がタップして選び、そのままカートに追加できるカード形式で表示します。

General

• Heading — 初期値は “Choose your bundle”。
• Card border — 初期値は #d9d9d9。
• Selected accent — 選択中のカードの枠線とラジオボタンの色です。
• Roundness — 0〜24 px。初期値は 8。
• Card padding — 4〜32 px。初期値は 14。
• Card background
• Card text

Cards

• Show single-item card — 初期状態でオンです。ティアの上に “Buy 1” のカードを追加します。
• Single-item label — 初期値は “Buy 1”。
• Pre-selected tier — 0〜10。初期値は 0 で、既定の選択状態のままにします。実際に表示される ティアだけを数えるため、非表示のティアがあらかじめ選ばれることはありません。
• Tier label — 初期値は Buy {quantity}。{quantity} は自動で置き換えられます。
• Off-each label — 初期値は “off each”。パーセントのオファーで使われます。
• Amount-off label — 初期値は “off”。金額値引きのオファーで、合計についての表現として使われます。
• Fixed-price label — 初期値は “each”。固定価格のオファーで使われます（1 点あたりの価格）。
• Per-product suffix — 初期値は “of the same product”。オファーが商品単位で数える場合に表示され ます。
• Per-variant suffix — 初期値は “of the same variant”。オファーがバリエーション単位で数える場合に 表示されます。
• Show unit prices — 初期状態でオンです。金額値引きのオファーと、バリエーションが 50 を超える 商品では自動的に非表示になります。
• Show original price — 初期状態でオンです。値引き後の各価格の上に、通常価格を取り消し線付きで 表示します。
• Each label — 初期値は “each”。
• Most popular tier — 0〜10。初期値の 0 はタグなし、1 は最初のティアを指します。
• Most popular text — 初期値は “Most popular”。
• Most popular background — 初期値は #1a1a1a。
• Most popular text color — 初期値は #ffffff。

Button

• Button text — 初期値は “Add to cart”。
• Added text — 初期値は “Added!”。
• Unavailable text — 初期値は “Unavailable”。
• After adding to cart — Go to the cart page（初期値）、Refresh the page（テーマが新しい カートの件数を表示できるようにします）、Stay on this page（カートへのリンク付きの確認を 表示します）。
• In-cart text — 初期値は {count} in cart。ページにとどまる設定で、追加後に表示されます。 {count} は、追加した商品のうちカートに入っている数です。
• Cart link text — 初期値は “View cart”。
• Button background — 初期値は #1a1a1a。
• Button text color — 初期値は #ffffff。

Message

• Code hint prefix — 初期値は “Use code”。ディスカウントコードの場合にのみ表示されます。
• Linked message — カードの上または下に表示する、任意のテキストです。

Bundle composer

• Let shoppers mix variants per tier — 初期状態でオフです。オンにすると、選択中のティアが商品 1 点につき 1 行で表示され、購入者が組み合わせを決められます。バリエーション単位のオファーでは 表示されません。
• Bundle button text — 初期値は “Add bundle”。
• Items word — 初期値は “items”。金額の合計を表示できない場合に使われます。“Add bundle • 3 items” のような表示です。
• Unresolved text — 初期値は “Choose options”。
• Message position — Above または Below。初期値は Below。

Spend More Save More

Spend More Save More のオファーのすべての購入金額ティアを、商品ページに並べます。いくら使えば、 いくら値引きされるかです。

General

• Border color — 初期値は #d9d9d9。
• Roundness — 0〜24 px。初期値は 8。
• Borderless — 初期状態でオフです。

Header

• Header background — 空欄の場合はデザインの初期値が使われます。
• Header text

Body

• Cell padding — 4〜32 px。初期値は 14。
• Body background
• Body text
• Highlight unlocked tier — 初期状態でオンです。カートが到達している最も高いティアを強調表示します。
• Highlight color — 初期値は #e8f5e9。

Columns

• Spend label — 初期値は “Spend”。
• Savings label — 初期値は “Get”。
• Off-the-order label — 初期値は “off the order”。
• Off eligible items label — 初期値は “off eligible items”。ディスカウントが一部の商品を除外して いる場合に、off-the-order のラベルの代わりに使われます。

Message

• Code hint prefix — 初期値は “Use code”。ディスカウントコードの場合にのみ表示されます。
• Linked message — 表の上または下に表示する、任意のテキストです。
• Message position — Above または Below。初期値は Below。

Custom theme selectors

Sale Badges と Price Drops は、テーマ内の配置先を自動で見つけます。それがうまくいかないテーマでは、 Promotions ページの Theme selectors からモーダルを開くと、テーマ自身の要素をアプリに指定できる、 任意の CSS セレクターを 3 つ設定できます。

• Badge container in product cards — 各商品カードの中で、バッジを固定する要素です。1 つ入力すれば、 商品カードを表示するすべてのページに適用されます。
• Price element on the product page — 商品ページで価格を保持している要素で、値引き後の価格が ここに表示されます。
• Price element in product cards — 各商品カードの中で価格を保持している要素です。

空欄のままにすると、自動配置が維持されます。各セレクターは最大 200 文字で、有効な CSS セレクターで なければなりません。そうでない場合は、フィールドがその場で指摘します。何にも一致しないセレクターは 自動配置に戻り、価格を含まないセレクターは、誤った数字に取り消し線を引くのではなく、何も描画しません。

購入者への表示

各ブロックは、配置した場所で商品ページに描画され、オファーの実際のティアを表示します。ピッカーは カートへの追加も行います。購入者が見ている商品がオファーの対象でない場合、またはオファーが一時停止中 や終了済みの場合、ブロックは古い内容を出さずに何も表示しません。

上限と注意点

• 1 つの商品につきウィジェットは 1 つです。 表示を有効にしたオファーが 2 つとも同じ商品を対象に している場合、そこに表示されるウィジェットは 1 つだけです。ディスカウントの Show on storefront カードがその数を示し、Choose which one shows を提示します。ディスカウント自体は、それぞれの 条件どおりに適用され続けます。
• バリエーションが 50 を超えると価格は非表示になります。 金額値引きのオファーと、バリエーションが 50 を超える商品では、価格の列とピッカーの単価が自動的に非表示になります。
• オファーを一時停止するとウィジェットも非表示になります。 カードの表示は “Not shown (offer paused)” に変わり、スイッチも出なくなるため、停止中のオファーが動いているように見えることはありません。
• 表示スイッチは表示だけを制御します。 Show on storefront をオフにするとウィジェットは 非表示になりますが、ディスカウントは適用され続けます。ディスカウントを止めるには、オファーを 一時停止してください。
• Theme selectors はストア単位の設定で、プロモーションごとではありません。保存すると、ストア上の すべての Sale Badge と Price Drop の配置が変わります。

関連ページ

• カート目標バー — 次の購入金額ティアまでの進捗を表示する 4 つ目のブロック。
• Quantity Break — 表とピッカーのもとになるディスカウント。
• Spend More Save More — 購入金額の表のもとになる ディスカウント。
• Price List — ティアの表に情報を渡すもう 1 つのディスカウント。
• App embed — バッジと値下げ表示には必要ですが、これらのブロックには 不要です。