How to customize a quantity breaks widget (updated)

Overview

Customizing a quantity breaks widget can be a great way to tailor the shopping experience for your customers. You can design your widget with your styling and this can make your interactions more efficient and enjoyable.

User Guide

To customize a quantity breaks widget follow these detailed steps:

1. Go to Appearance step

• Open/Create the offer and click on Appearance step.

2. Customize the content

• Show compare price: Enable to show compare price that set in product information.
• Show extra quantity input ( Setting in offer ): Enable to show extra quantity when you allow users to buy extra items with discount option.

• Let customers choose different variants for each item: Enable to show variants for each item.

• Show image per variant: Enable to show image per variant.

• Combined Option in a dropdown: Enable to combine option instead of selecting each option.

• Show variant option name: Enable to show variant option name.

• Hide theme price: Enable to hide theme price on storefront.
• Hide theme variant: Enable to hide theme variant on storefront.

3. Customize the Appearance

• Badge style: Select style of tag and check it is shown on preview.

• Tier photo size: Enter tier photo size as you want.

• Variant photo size: Enter variant photo size as you want.

• Space percentage: Allow you can set space percentage as you want.
• Radius corner: Allow you can set radius corner as you want.

4. Customize the Colors

• Offer color: Customize Background, Selected background, Unselected background, Selected border, Unselected border.

• Tier color: Customize Tier title, Subtitle color, Discount label, Discount label background, Radio button color.

• Price color: Customize Price, Compare price.

• Variant color: Variant background, Variant border, Variant text.

• Badge color: Badge background, Badge title.

• Extra input: Extra input text, Extra input background, Extra input border.

5. Text size

• Title size: Enter size of title.
• Tier text size: Enter size of Tier title, Price, Compare price, Discount label, Variant text, Extra.
• Badge size: Enter size of badge title.

6. Save your changes

Once your design is complete, please click Save to finalize your changes.
Visit your store’s product page or the page where you added the widget to ensure everything appears as expected.