How to Customize the Widget Appearance for Discounts
This guide explains how to change the appearance of your discount and free gift widgets, including their layout, spacing, and colors, to match your store's branding.
Customizing a Goal-Based Progress Bar
- Access Customization Settings
- While creating or editing a goal-based progress bar, click the Customize button.
- You can then choose to customize the widget's appearance separately for the Product page and the Cart page.
- Adjust Spacing and Layout
- Bottom spacing: Increase this value to add more vertical space below the widget.
- Side padding: Increase this value to add more horizontal space to the left and right of the widget's content.
- Adjust Sizes and Colors
- Modify the Heading size, Icon size, and Goal base size using the available sliders or input fields.
- Use the color picker to change the widget's colors to match your brand's style.
- Save your changes when you are done.
Customizing a "Free Gift with Purchase" Widget
- Access Styling Settings
- When setting up a "Free Gift with Purchase" offer, click on the Edit and Style Widget block to open the customization options.
- Adjust Fonts and Text
- Modify the text in the Widget title bar.
- Change the Font size and Font weight (e.g., normal, bold).
- Adjust Colors and Other Options
- Use the color picker to choose new colors for the widget's elements.
- Explore the other available settings to fully customize the widget's appearance.
- Save your changes to apply the new style.
Updated on: 11/08/2025
Thank you!