How to add custom CSS to your Discounty widgets?
Add your own CSS to any Discounty widget from its Custom CSS card, with a live preview, to match the widget to your store.
Custom CSS lets you restyle a Discounty widget beyond the colour and text settings, so it matches your store's theme exactly. You add your CSS in the Custom CSS card on the widget's page and see it in the preview as you type.
Where to find the Custom CSS card
Open Customization, choose a widget, and scroll to the Custom CSS card, the last card in the settings column. The card is on the page of every widget:
How to set up and customize the Quantity/Value table widget in Discounty?
How do I show total savings in the cart with the Saving on cart widget?
How do I customize the Buy X get Y pop-up and floating button?
Buy X Get Y offer widget: show the deal on product pages and product cards
How do I use the Shipping progress bar widget to offer free shipping?
How to add custom CSS to a widget
Open the widget's page under Customization.
In the Custom CSS card, type or paste your CSS into the box.
Check the preview. It updates as you type.
Click Save in the save bar to make the change live on your store.
One box per widget
Each widget has its own box, and your CSS applies to that widget only. The Quantity/Value table page has two boxes, one for the table and one for the badge. The Starts in and Ends in countdown timers share some classes, so a rule for one can affect the other.
On your store, your CSS loads after Discounty's own styling, so your rules win. Custom CSS can also override the colours you set in the panel.
Limits and rejected code
Each box accepts up to 10 KB of CSS. Code that is larger than that, or that contains </ or <!--, is rejected and an error appears on the field. Fix the CSS and save again.
Get CSS suggestions from Lumos
Lumos can propose CSS for a widget that fits your store's theme. The proposal appears in the box for you to review, edit if you like, and save. Nothing goes live until you click Save.
Who can save custom CSS
Saving custom CSS depends on your plan. If your plan doesn't include it, the card shows your saved CSS read-only behind an upgrade lock. All your other widget settings save as usual.
Need more customization?
If CSS isn't enough, use Need more customization? at the bottom of the Custom CSS card and click Request customization. Describe what you'd like to change, and our support team will reply over Intercom.
Need a hand? Contact our support team through the app — we're happy to help.