Design the widget

Pick a widget template and layout, use your theme's accent color and corners, set colors, text, shape and content, and add custom CSS scoped to the widget.

The Design page sets how the widget looks on every product page. Every offer uses these settings. An offer can change only its Layout and Show savings as, in its Widget section.

The widget always uses your theme's font.

Save your design#

When you change a setting, the save bar appears. Select Save, or Discard to undo your changes. Breakly shows "Design saved". Store pages can take a few minutes to show the new design.

The Preview on the right shows the widget with sample tiers and a product from your store. Select Desktop or Mobile to change its width. In the preview, an automatic accent shows as a neutral dark color, because the admin has no theme to take it from.

Templates#

A template is a starting point. Picking one sets the values in the table. Your colors and content settings stay as you left them. You can change every value afterward.

New stores start with Theme. With Mono and an automatic accent, the widget uses your theme's text color as its accent.

Layouts#

The layout you pick here is the default for all offers. Each offer can use its own layout, and the Quantity breaks block can set one too.

• Compact hides subtitles, prices per item and compare-at prices.
• Table shows the columns Quantity, Price each, Total and You save. It hides subtitles and compare-at prices. Free item and fixed total tiers show a dash under Price each.

Colors#

Accent#

Use my theme's button color as accent is on by default. The accent marks the chosen tier, the badge and the savings.

With it on, the widget takes the color of your theme's add to cart button. If that button blends into the page, such as an outlined button, it uses the button's text color, or else your theme's text color. Text on the accent turns black or white so it stays readable.

Turn it off to pick an Accent color yourself.

Element colors#

Under Element colors, you can set eight colors. Leave a color empty to keep the template's.

• Card background
• Selected card background
• Card border
• Text
• Price
• Badge background
• Badge text
• Savings chip

If you set Badge background and leave Badge text empty, the badge text turns black or white to stay readable. Select Use template colors to clear all element colors.

Text#

A hidden heading is still read by screen readers.

Shape#

Match the theme's corners is on by default. Turning it off sets the radius to 10 px, which you can change.

Content#

Savings and prices#

• Savings compare the tier's price with the regular price. The percentage is rounded to a whole number.
• When a product has a compare-at price, the widget shows the compare-at total struck through.
• Free item and fixed total tiers don't show a price per item, because their items have no single price.

Per-item variant pickers#

Let shoppers pick a variant for each item is on by default. On a tier of 2 or more, the widget shows one row per item, such as "Item 1" and "Item 2", so a shopper can choose size M for the first shirt and L for the second.

The rows show when all of these are true:

• The product has more than one variant.
• The chosen tier has 2 or more items.
• The offer doesn't count Per variant (each size or color on its own).

Sold-out values can't be picked and show "(Sold out)".

With the pickers on, you get more settings. Swatch size and Swatch shape show when swatches are on.

Breakly shows an option as swatches when your products have Shopify swatches for it, or when the option's name means "color", such as Color, Colour, Farbe, Couleur, Kleur, Colore, Cor, Färg, Farve, Kolor or カラー. Values without a known color show as text buttons.

Product page behavior explains how these items are added to the cart.

Product page#

The Product page section controls how the widget works with your theme: Hide the theme's quantity selector, Hide the theme's variant picker when shoppers pick per item, Update the theme's price, After add to cart and Highlight Buy it now. Product page behavior covers each one.

Custom CSS#

CSS for the widget takes your own CSS rules for the widget.

• Every rule applies only inside the widget. Breakly scopes each selector to .breakly, so it can't change the rest of your theme. .breakly__title { … } becomes .breakly .breakly__title { … }.
• Selectors that already start with .breakly, such as .breakly.breakly--p-soft .breakly__tier, are kept as written.
• You can write up to 4,096 characters.
• You can use @media, @supports and @container blocks.

Breakly removes these from your CSS before it reaches the store:

• Comments, and the characters < and \.
• Other at-rules, such as @import, @font-face and @keyframes. Because of this, you can't load fonts or define animations.
• Declarations with expression(), javascript:, vbscript:, -moz-binding, behavior or image-set().
• URLs that are not https:// or a data: image (PNG, JPEG, GIF, WebP or SVG). Such a url() becomes none.
• Rules nested inside other rules, and selectors that start with + or ~.
• An unfinished rule at the end, such as a missing }.

For example:

.breakly__title { letter-spacing: .02em; }
.breakly__badge { font-size: .75em; }
@media (max-width: 480px) {
  .breakly__sub { display: none; }
}

Tip: The colors, sizes and corners you set in Design are applied directly on the widget, so they win over the same values in custom CSS. Change them in Design. Developer reference lists the widget's classes and custom properties.