![\"\"](\"https:\/\/www.smashpops.com\/blog\/wp-content\/uploads\/2026\/06\/styling1.jpg\")
<\/p>\nUsually, styling your popup is done in the “Design” section (for both game and win screens).<\/p>\n
However, you also have the freedom to create more advanced styling using custom CSS in “Game screen > Design > General > Add custom CSS”. This CSS will be applied globally on the page the popup will be shown on, so it will be applied to any SmashPops element but also to any other element of your store, depending on the CSS selectors you choose. Let’s dive in to see the CSS selectors that we should use.<\/p>\n
<\/p>\n
<\/p>\n
When you check “Add custom CSS”, a text field appears, where you can enter CSS that will be applied globally. Here are some useful CSS selectors that you can use to apply styles to elements :<\/p>\n
.spps-ctn<\/strong> : This selects the main container (that contains the popup, the teaser and the use bar). .spps-game-screen<\/strong> : This selects the game screen. .spps-win-screen<\/strong> : This selects the win screen. Let’s see an example where I change the font color of the game screen title:<\/p>\n A few comments :<\/p>\n Unfortunately, you can’t directly upload a custom font. However, you can definitely apply a custom font if it’s hosted somewhere else (on your store or Google Fonts for instance).<\/p>\n If the font is already loaded on your website, you can just add the following to the custom CSS field of “Design > General” (this will override any other font family setting) :<\/p>\n As the font is only loaded on the website and not on the builder, the font will only render fine on your website<\/strong> (you’ll see another font on the builder).<\/p>\n And in case the font is not loaded on your website, you can load it using CSS before using it :<\/p>\n This time, the font should appear in the preview (but if it’s already loaded on your website, do not load it twice!).<\/p>\n The popup may be quite big on a desktop-sized browser. If you’d like to change its size, you can use the following CSS :<\/p>\n You can modify the “0.8” value above to any value between 0 and 1 to adjust the size on desktop.<\/p>\n","protected":false},"excerpt":{"rendered":" Usually, styling your popup is done in the “Design” section (for both game and win screens). However, you also have the freedom to create more advanced styling using custom CSS in “Game screen > Design > General > Add custom CSS”. This CSS will be applied globally on the page the popup will be shown […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"powered_cache_disable_cache":false,"footnotes":""},"class_list":["post-1066","page","type-page","status-publish","hentry"],"yoast_head":"\n
\n.spps-toast<\/strong> : This selects the teaser.
\n.spps-mc<\/strong> : This selects the popup.
\n.spps-mc .spps-cr<\/strong> : This selects the top right cross (to close the popup).
\n.spps-ubar<\/strong> : This selects the bar (that says “Your coupon is reserved for XX:XX”).<\/p>\n
\n.spps-game-screen .spps-title<\/strong> : This selects the title of the game screen.
\n.spps-game-screen .spps-subtitle<\/strong> : This selects the subtitle of the game screen.
\n.spps-form<\/strong> : This selects the form with the email\/phone\/name inputs and checkboxes.
\n.spps-game-screen .spps-disclaimer<\/strong> : This selects the bottom note of the game screen.
\n.spps-game-screen .spps-btn<\/strong> : This selects the play button of the game screen.
\n.spps-wheel<\/strong> : This selects the wheel (if there is one).<\/p>\n
\n.spps-win-screen .spps-title<\/strong> : This selects the title of the win screen.
\n.spps-win-screen .spps-label<\/strong> : This selects the subtitle of the win screen.
\n.spps-ticket-ctn<\/strong> : This selects the discount container of the win screen.
\n.spps-coupon-label<\/strong> : This selects the discount label of the win screen.
\n.spps-code<\/strong> : This selects the discount code of the win screen.
\n.spps-win-screen .spps-disclaimer<\/strong> : This selects the bottom note of the winscreen.
\n.spps-win-screen .spps-btn<\/strong> : This selects the continue button of the win screen.<\/p>\nGeneral example<\/h2>\n
.spps-game-screen .spps-title {\r\n color: green!important;\r\n}<\/pre>\n![\"\"](\"https:\/\/www.smashpops.com\/blog\/wp-content\/uploads\/2026\/06\/styling2.jpg\")
<\/p>\n\n
.spps-game-screen .spps-title {\r\n color: red!important<\/strong>;\r\n}<\/pre>\n<\/li>\n<\/ul>\nUsing a custom font<\/h2>\n
.spps-ctn * {\r\n font-family: \"<Name of the font><\/strong>\", inherit!important;\r\n}<\/pre>\n@font-face {\r\n font-family: \"<Name of the font><\/strong>\";\r\n src: url(\"<URL of the font><\/strong>\");\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n.spps-ctn * {\r\n font-family: \"<Name of the font><\/strong>\", inherit!important;\r\n}<\/pre>\nChanging the popup size on desktop<\/h2>\n
@media (min-width: 769px) {\r\n .spps-ol .spps-mc {\r\n transform: scale(0.8<\/strong>)!important;\r\n }\r\n}<\/pre>\n