Can’t turn your site traffic into sales?
Your customers abandoning their carts?
Make potential customers notice special offers.
Need to increase sales on Shopify?
Struggling to collect form submissions?
Let them call you directly via popups.
Having trouble growing your email list?
Choose your offer and let the game begin.
Make sure important news unmissed.
Keep visitors & customers on your site longer.
Can’t draw attention to your surveys?
Grow social media followers and likes!
Yes, you can. It is quite simple to further customize your popups using CSS with Popupsmart. Here is a guide on how to add your own custom CSS to your popup. But first, let’s cover the basics of CSS.
CSS entire structure is known as a ruleset or rule and includes two parts:
In this example, we target <.popupsmart .psButtons> elements to apply the style background-color:purple. Since there are times when codes conflict, we add "!important" at the end to make sure the code works.
In this code example (.popupsmart .psButtons), the leading dot indicates that .popupsmart .psButtons is a class.
To show you how to add your custom CSS to your popup let's add the CSS code above to its popup:
1 - Create a new campaign, Choose a popup and go to Popupsmart's popup builder's "Customize" step. Next, click on "Edit General Appearance" to design your popup in detail.
2 - Scroll down to "Custom CSS". Now you have to find the class name of the part you want to style. Since each popup has a different class name, you must search for its specific class name for your custom CSS. To find it just right-click the part you want to change and then click on inspect.
3 - For instance, in this code, we wanted to change the color of the “Subscribe” button from red to purple. Right-click on the subscribe button and find the class name and copy it to your clipboard. In this popup the class name was this: <button class="psButtons".
4 - All the class names start with .popupsmart. You can add (psButtons) after that with a dot in the beginning and write down your code on the left side. After adding it, you should immediately see the rule being applied on your button. Sometimes codes conflict so it’s important to add a "!important" tag at the end of your CSS code to make sure it works perfectly.
Make sure your CSS is correctly formatted. Once you complete all the settings, save and publish the popup. Do not forget to turn the status toggle on to make your popup visible on your website.
Do you have additional questions about how to add custom CSS to your popup? Contact Us!