How to customize the design of my offers?
In this guide, you'll learn how to edit Monk’s offer displays for both global use and individual offer customization. Whether you're creating a consistent brand experience across all offers or tailoring designs for specific campaigns, this step-by-step guide will help you get started. We'll walk you through applying global design settings, customizing offer-specific layouts, and ensuring your offers looks on-brand at every stage of the customer journey.
Let us have a look at each of the style options for offers one by one.
Contents
Global Styling Customization
These styling changes will apply to all new offers created using Monk.
Where can I find this feature?
Go to Monk app > Design and Styling
What does this feature include?
There are 4 sections under Global Editor -
Text styles
From this section, you can modify the color and font sizes for various on-page elements including headings, product descriptions, detail sections, progress bar labels, and bundled content to match your brand style. These settings help you maintain consistent text styles and color usage throughout the customer journey, as highlighted in the free gift selection widget in cart page below.
Buttons and carousel
In this section, you can fully customize the appearance of the widget's buttons by adjusting their color, font style, and corner radius to create the perfect look that matches your store's display. Additionally, you can personalize the carousel navigation arrows, including their color and style, ensuring a cohesive and polished design throughout the offers. As shown below, these are the highlighted areas within a widget where you can make the changes.
Background and border
Customize the background and border of your offer layout, and set the color of the progress bar to match your store's display. These settings allow you to control the overall visual structure of the widget.
Discount code widget
This setting is applicable for discount code widget that is displayed upon creating a free gift discount code offer. You can customize the appearance and layout of the discount code widget shown in the cart step and adjust its display settings, including font, colors, borders, and positioning, to ensure it aligns with your overall offer design and provides a seamless experience for customers applying promo codes.
Offer-specific Editor
You can use this setting to edit a specific offer/widget display.
Where can I find this feature ?
Go to Monk > Manage Offers > Go to the required offer > Actions > Edit > Step 2 of offer set up : Customize text & design
What does this feature include?
- Edit offer content : From this section, you can modify what the text will read on the widget, like the header and the product details. If you have a multi language set up on your store, you can also select the specific language and make changes to the text within that.
- Pick an offer layout : In this section, you can choose the layout of the offer's widget and how it will look like on your store.
Clicking on 'Edit Display and Design' will open the editing options of the widget including elements like font, colors (refer to this article for more information on how to customize your widget's colors) , spacing of the widget for both mobile and desktop view. You can also edit the exact offer offer body configurations like the text styles, currency, price and discount. After making the changes you can click on Save changes > Save and Activate to display the customized widget/offer on your store. To know more about how to edit the offer's font and text styles, please click here.
Frequently Asked Questions
1) I have made changes to the offer display, yet it is not showing up on the store, what could be the reason?
This could be due to cache issues. Cache issues usually occur when users see outdated content on a website, experience slow loading times despite a fast internet connection, or encounter errors when trying to access certain pages or features. This happens when a website is opened many times on a device. This issue will not occur with a customer as they will be opening it for the first time or fewer times as compared to you. Try running a test in a fresh incognito window, ensure all other incognito tabs are closed. Doing this shall allow you to visit your store as a 'test user', while preventing the browser from remembering your browser history & avoiding any browser caching issues.
2) Why is the font within the widget(s) not matching my store's font?
If you have added a new font to your store, and it is not visible under the 'Font' section, you can click on the 'sync now' option under 'Title' and it will automatically redirect you to the store and then add the font to the editor. This can be done from both the Global and the offer-specific editors. You can refer to this document for more information on the same.
If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com
Updated on: 14/11/2025