How to customize your Coupon X widget using CSS

In this guide we’ll show you how to customise your Coupon X widget using the built-in ”Custom CSS” option. Click to read more about how to use Coupon X for Shopify or Wix.

You can add custom CSS code to modify your widget appearance, for example you can add a border to the open widget or make the widget more rounded.

First, open the Coupon X app in your Shopify or Wix admin panel and click on the ”Edit” option next to your widget to open widget settings.

Now, depending on the goals you selected in the ‘Define a Goal’ tab, you will see the number of steps.

If you have selected “Yes” for the goal “Do you want to offer a coupon?”, proceed to the ‘Coupon Screen Design’ step or if you have selected “Yes” for “Do you want to collect email?” or both options, proceed to the ‘Email Screen Design’ step.

Once you are on the appropriate step based on your selected goals, scroll down and click the Advanced Settings button to spot the Custom CSS field where you can place a CSS code.

Following the example from above, to add a dotted border to your widget, apply this custom CSS code and don’t forget to click ”Publish”.

#tab-box-front-0 .tab-box-content.tab-box-couponcode-content{
border-style: dotted;
}

This is how it should look like in the end:

To change the widget radius and make it more rounded and with a border, you can use this CSS code:

#tab-box-front-0 .tab-box-content.tab-box-couponcode-content{
 border-radius: 25px;
  border: 2px solid #000000;
  padding: 20px;
}

And this is how it should look like in the end:

That’s it, easy as 1,2,3! ☺️ There are endless possibilities to personalise and further customize your widget to match your unique style.