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 and click on ”Icon Design” in the page that will open.

To apply any custom CSS code, scroll down and look for the ”Custom CSS” field.

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.