Alongside the powerful features that Nosto offers to its customers, one of them is the behavioural popup which provides the customers juicy offers, timed discounts or tracks the intention of leaving asking whether or not to send the potential abandoned cart to the inbox.

Once you will create a popup, it will come to you dressed in a standard template which can be customized and stylized via the editor tools: by means of that you can change colors, fonts and other visual aspects of the popup but sometimes one wants to go the extra mile and get a tailor-made appearance.

At this stage you are requested to brace yourself and put your hands on the code: but please no panic, with this step-by-step guide we have collected the F.A.Qs. from our community and we are going to teach you how to make the Nosto popup your popup.

And to not miss a beat!

Note that you should not remove the explicit pop-up close-button in top right corner, even though this is possible by editing the template.

The dimension of the popup is given by two different elements: firstly,#NostoPopUpWrapper gives the modal window a max-width

By editing it, the popup will change its maximum width: moreover, max-width will let the popup adapt to the screen so that, if the display will be narrower than 559px the modal window will adapt consequently. Should you will to make the popup either higher or shorter you will have to play with the padding of the element #NostoPopUpContent

By CSS, for the property padding: W X Y Z; W means padding from the top, X from the right, Y from the bottom and Z from the left. So, in my case, if I want a higher popup I would edit the paddings from top and bottom so that I will replace what highlighted in the red rectangle above with padding: 50px 59px 90px 59px (just random size, you will have to see what fits better for you); as you can see, I have edited the paddings from top and bottom but the ones from right and left stay the same.

If you are more into photographic feelings rather than a flat color background, you may add an image to style the popup as you like. In the “Visual settings” tab you can find this form

where you can drag&drop (or type in the url of) your image. If you have an eagle eye for details, you may spot that the background image is oriented and placed at its top left respectively to the popup. In case you want to set the background at its center, just reach this row:

and replace top left with center center.

Sometimes branding has strict rules regarding typography and, using the same font that is used all over your online shop may be necessary. Either you are loading your font from an external source (e.g. Google Font) or you have typefaced your font in the CSS, you can apply it to the typographic elements present on the popup. The first you have to do is to decide on which element you are going to apply that font you like: for our example we will use the title and change its font

Something you have to know is that most of the popup typos are chained, by means of some code, to the font dropdown selections among the popup properties: this is something we have done for those users who can’t really code and are happy to use the font families we have added there – which, for the record, are not just a few. So first thing I am going to search for the respective CSS of the title: for doing this, if you don’t want to read row by row the code of the popup, you can use a debug tool provided by your browser.

Spotted!

In the green rectangle you can find highlighted the condition which applies the font, and says “if the font selected in the dropdown menu is not null then use it, otherwise fall back on Arial”. But, in my case, I want to use e.g. Open Sans, cause I use it in my shop and I have already preloaded it in my CSSs, so I will just replace the content of the green rectangle with:

This procedure works with Google Fonts and also with fonts loaded from external/internal resources, such as e.g. you have converted some OTF/TTF fonts in webfonts and uploaded them in your server, because the popup’s CSS has its own stylesheet but, since that it is loaded on your page, can also read classes and IDs from your own CSSs.

The border radius can be a fancy and trendy feature to apply on visual elements and, as a matter of facts, the elements of our popup come all rounded by default. But if your website doesn’t have rounded elements at all, the presence of them can result as a graphical incongruency or anyway something that doesn’t match with the look&feel of the whole online shop. Speaking CSS, the property which rounds the border of the element is border-radius and, with all its browsers’ fallbacks, looks like:

Everything you have to do to get rid of the rounded borders of whichever elements is to first of all scope it (by means of e.g. your browser’s debug tool), jump to the HTML template line where the related CSS is placed and delete the border-radius properties block (or, alternatively, set it to 0px).

In order to not create a dead end for all the users which will close (intentionally, or by error) the popup, Nosto will display – by default on the right bottom part of the screen – a ribbon, which will restore the popup on screen again. As for any other element, also the ribbon has its own CSS style which we can amend in order to make it looks exactly as we like. From our support community we have picked the most frequently asked questions and answered them publicly, in order to provide you all the tools to tailor your popup.

As you have probably noticed at your first Nosto popup, the ribbon expands itself for the total width of the screen when the popup is on a mobile device. This is clearly a user-experience trick because, if the ribbon will have the same dimension it has on the screen, will be too small to be easy clicked with your finger. In some cases, most of the online shops show on the bottom part of the screen the button for the support chat and, in this case, the ribbon will impeach this button to be smoothly clicked. First thing you have to know is that – if you haven’t added or deleted code rows in the popup – you can find this media query starting from here:

This contains all the style for the popup when it comes to mobile. Scroll down and look for the related CSS for the ribbon:

As you can see the red arrow is pointing to the width: 100%; property, which will be applied on the ribbon once it is displayed on mobile. Set the ribbon’s CSS under the media query to make it looks as you like the most on mobile. Following you can find some examples to check how the ribbon will look with different settings:

The CTA button of the popup usually takes the full width of the inner container but, for this or that styling reason, you may want to redimension it.

Then everything you have to do is to change the width of the class .NostoInputButton to whatever you prefer or which suits your design criteria, and that’s it! Bear into account that the class .NostoInputButton involves all the CTAs and buttons of the popup so, in case you wish to apply a specific width only to a certain button you will have to create a separate class for the button or to inline the style for the button.

Alright, you seem to be a stylish person, you want your colors and your visual feeling because, well, these things are very important when it comes to be coherent to your brand. Let’s start from the easiest thing, changing color for the CTA button: for this, you simply have to click on “Visual settings” from the upper tab and edit the property “Buttons background color”:

The popup is usually made up of more than one button – for CTAs and other actions – so in case you want to apply different colors to different buttons the solution would be to inline the CSS style to the button you will want to amend. Same goes for the buttons’ colors, just change the ASCII colors (or use the specific colors’ palette) to pick up your favorite hue. Of course, as it goes for the background colors, same applies to the text: if you wish to have different colors for different typos you will have to inline the CSS styles:

Look what I have just created with these two properties:

Finally, if popups have any redirect-functionality, please keep in mind that the popup is not closed automatically, and you can end up in a situation with popup triggering endlessly on every page load. In this case, you need close popup programatically with a click-event listener script at the end of your template.

So there you go, with these answered F.A.Qs. you will be able to stem the common issues with our popup – nonetheless I seize the opportunity to remind to you that all Nosto employees are human beings, so am I, therefore I may have missed some other important questions regarding the popup.

However, all the popups code’s screenshots above are referring to the standard default one as you receive it: in case you have edited it – by adding or deleting rows of code – we cannot guarantee that the lines numbers will match with yours.

At the end of this document, you can find 4 popup designs à la carte which you can copy/paste as-is in your popup code and amend them consequently with your look&feel needs.

In case you have questions or you bump into issues with your popup, please drop us a couple of lines at support@nosto.com, and a computer will dispatch your message to a human being at Nosto, and we will get in touch with you in a fingersnap.

You don’t believe this? Test us! ;)

Monochromatic borders and white cut-out background (snippet on Github)

Fashionable popup with minimal yet graphically rich design (snippet on Github)

Popup with countdown to a given date (snippet on Github)

Popup with GIF image (snippet on Github)