How to customize your Coupon X widget using CSS

Let’s dive in!

First, open the Coupon X app in your Shopify admin panel and click on the ”Edit” option next to your widget and click on ”Tab 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.
 

Still have questions? Ping us at our Facebook group, and we’d love to help out!