Product page behavior

Place the widget, hide your theme's quantity and variant pickers, show the tier price in your theme, set add to cart and Buy it now, languages, currencies.

This page explains what the widget does on your product page and how it works with your theme. Most settings are in the Product page section of Design.

Placement#

You can show the widget with the Auto placement app embed or with the Quantity breaks app block. Get started shows how to turn on each one.

Auto placement (app embed)#

Auto placement shows the widget on product pages without editing your templates.

• Above the add to cart button puts the widget above your theme's buttons, at the full width of the product form.
• Below the price puts the widget under the product price. If Breakly can't find the price, it puts the widget above the add to cart button.
• Auto placement works only on product pages. It needs your theme's add to cart button.
• If the page also has the Quantity breaks block, auto placement does nothing on that page.

Quantity breaks (app block)#

The block shows the widget exactly where you place it. You can add it to the product page or to any other page with a product section, such as a featured product section on your home page or a page builder section.

In the theme editor, a block without a product shows "Choose a product in the block settings to show its quantity breaks." Shoppers don't see this message.

The widget uses the add to cart button of its own product. When a page shows several products, each widget only changes the form of its own product.

Which heading and layout show#

When the widget shows#

The widget shows on a product when all of these are true:

• An active offer covers the product, or a store-wide offer covers it and doesn't exclude it.
• The offer is inside its schedule, if it has one.
• The shopper's country is in the offer's countries, if it has a list.

Hide the theme's quantity selector#

Hide the theme's quantity selector is on by default. The tiers set the quantity, so a second selector only confuses shoppers.

• With it on, Breakly hides your theme's quantity field and sets the quantity from the chosen tier.
• With it off, your theme's quantity field stays visible. Choosing a tier writes its quantity into the field.
• In both cases, add to cart uses the chosen tier's quantity. A number the shopper typed in your theme's field is replaced by the tier's quantity.
• If your theme has no quantity field, Breakly adds a hidden one.

Shoppers can still change quantities in the cart. Checkout applies the tier that matches the cart.

Per-item variant pickers#

With Let shoppers pick a variant for each item on in Design, a tier of 2 or more shows one row per item. Design the widget lists when the rows show.

• Each row starts with the variant selected in your theme, or the first available variant when that one is sold out.
• If the shopper changes the variant in your theme's picker, all rows switch to it.
• Only available variants can be picked.

When the shopper adds to cart with different variants, Breakly sends them in one add through your theme's own add to cart. Your cart drawer and add-to-cart notification work as usual. Each variant becomes its own cart line. Line item properties and the selected subscription plan apply to every item.

Hide the theme's variant picker#

Hide the theme's variant picker when shoppers pick per item shows when the per-item pickers are on. It's off by default.

With it on, the item pickers replace your theme's variant picker while a tier of 2 or more is chosen. Your theme's picker comes back for 1 item. Breakly looks for common variant picker elements in the product section. If your theme uses another one, a developer can mark it. See Theme hooks.

Update the theme's price#

Update the theme's price shows the chosen tier's price in your theme's product price.

• Breakly changes only a visible price in the product's section. It leaves struck-through compare-at prices alone.
• When your theme redraws its price, for example after a variant change, Breakly shows the tier price again.
• If your theme's price isn't found, it stays as it is. A developer can mark the price element. See Theme hooks.

Note: Prices outside the product section, such as a sticky add to cart bar, don't change.

After add to cart#

After add to cart sets where shoppers go after they add.

Going to the cart or checkout skips your theme's cart drawer and add-to-cart notification.

Buy it now#

Highlight Buy it now#

Highlight Buy it now fills your theme's Buy it now button with the accent color and turns Add to cart into an outline, so the fastest way to buy stands out. Shop Pay and other branded buttons keep their own look. It's off by default.

How Buy it now uses the tiers#

Buy it now and the other express checkout buttons under your add to cart button use the chosen tier's quantity.

When a shopper picks items one by one with different variants, Buy it now can't buy them all in one step. Breakly adds every chosen item to the cart and opens checkout instead. Because the items go through the cart, checkout also includes anything the shopper already had in the cart.

When all items are the same variant, Buy it now works as usual, with the tier's quantity.

Storefront languages#

The widget's own texts ship in 11 languages:

These texts include the heading, the default tier titles, the savings labels, "each", "Item 1", "Sold out", the counting hints and the table columns. In other languages, the widget shows English.

Your own texts come from each offer's Texts and translations section, in the same languages. The checkout messages are translated into the same 11 languages. See Texts and translations.

The settings of the Quantity breaks block and Auto placement in the theme editor show in English and Spanish.

Other currencies and markets#

The widget shows prices in the shopper's currency, and checkout charges the same.

• You set amounts, prices and totals in your store currency.
• In other currencies, these tiers show faded for a moment while the widget converts them.
• Price endings like .99 apply in currencies with cents. Whole amounts work in every currency.
• Markets with their own product prices use those prices. Price check shows the tier prices in each of your markets' currencies. See Price check.

To run an offer only in some countries, see Countries and markets.