Skip to main content
How to Customize Offer (New UI)

This article Guides you on how to customize your offer within our app.

Lasandra Miller avatar
Written by Lasandra Miller
Updated over 9 months ago

In Cart Upsell provides you with the flexibility to fine-tune your offers to appear as if they are part of the same theme as the rest of your website. This approach, when done correctly, enhances the appeal of your offers to shoppers, making them more likely to accept them. Additionally, it also grants you greater credibility, helping to establish your brand identity. Watch the video or follow the steps below to make it a success:

Go to the “Appearance” tab. This tab has 3 sections that you can use to customize the offer.

  • Offer Box

  • Color

  • Offer Text


In the Offer Box section, you can select the layout of the offer, add margin to the offer widget and also add borders.

To select the offer layout, click the dropdown arrow under Layout, this will open the option list where you can make your layout selection. Select the option that you feel best suits your store. (Please note that with custom CSS you can achieve different layouts. Don’t know anything about CSS, contact support for help!)

It’s always good to add a little space below and above the offer widget, just to ensure that it’s not too close to any existing element on your site. For this article, we will use 10 pixels (px), you can always increase or decrease the space, but 10px provides adequate spacing. You can type the number in the text boxes provided or use the arrows to increase or decrease the number.

For this article we will not be using any border; however, if you want to add a border to your offer there are several styles available you can click the dropdown arrow under “Border Style” to access the styles. Border width refers to how thick or thin the border appears. The Corner Radius refers to how square or round the border is.

Now to the more exciting part! Adjusting the colors to match your brand. Scroll down to the Color section and click the “Manually Edit Color” button. This will expand the section.

You can start making your color selection. There are two ways of doing so, you can either type the color code in the text box provided (the rectangle box) or you can click the square to open the color picker. Use the option that you are most comfortable with.

NB. The word Card refers to the background color of the offer widget.

Once you have selected the colors, you can move on to selecting the font you want to use for the offer text and button text. Click the dropdown arrow to select the font family from the options selector. If you do not see the font that you are using listed there, then please contact support for assistance. We can apply the correct font for you in a few minutes!

After applying the changes, you can save what you have done as either a draft or publish.

With the styling templates available in the app and a little CSS I was able to customize the offer widget to look exactly the way I wanted it.

Before

After

If you go on your store and the changes are not reflected; that is just your cache reflecting old data. Cache is per device so no need to worry about your customers not seeing the changes, they will see the changes. Go ahead and do a cache refresh and you will see your changes immediately.

Feel free to reach out to support and make your customization request. We are here to help!

Did this answer your question?