How to create and design popups 28 June 2024  |  lisa

Popups are a double-edged sword, balancing between enhancing visitor engagement and potentially driving visitors away. On one hand, popups can be effective tools in promoting special offers, informing visitors with important news, and driving visitors towards specific actions, such a signing up for a newsletter. They can also help to increase conversion rates by being presented at certain stages of the ordering process. For instance, a well-timed discount offer popup can encourage hesitant shoppers to purchase.

However, the effectiveness of popups depends on when, where and how they're displayed. Poorly designed or overly intrusive popups can disrupt the visitor's experience, leading to frustration and increased bounce rates. Frequent or irrelevant popups can make the site look spammy, which diminishes the brand's credibility and will often cause visitors to leave before purchasing. Therefore, they need to be carefully designed and strategically deployed for the best effectiveness.

We will go through how to create popups in Bluepark. Not just for displaying standard popups, but also how to create clickable popups, for information such as sizing information for products. The most commonly used popups for online shops are newsletter sign-ups, special offers, discounts, size charts, and shipping and returns info.

Create your popup

Popups are created using Content Blocks. If you are unsure of what content blocks are, please have a read of our Content Blocks information and How to change the content on your theme guide to find out more.

Custom Content Block

Simple popups are created using a Custom Content Block, which allows you to add any content you wish into a single space. To create a simple popup, follow the four steps below.

1. Create a new Content Block by clicking on the Green Plus icon, enter in a Block title and then set the Block type to Custom and save.
2. Click on the Content tab and add in any text, imagery, block variables you wish to display within the popup.
3. Finally, go into the Popup tab and tick the Popup option in the Display as a Popup section.
4. Assign the Content Block to Layout of the page you wish to have the popup display on, such as the Home Page.

The popup will then trigger on the page you've assigned it on. How it displays will depend on the settings within the Popup tab, which are explained in further detail below.

Responsive Columns Block (V2 only)

Our Responsive Columns block has now had the popup functionality added to it. This opens up more flexible design choices and better control on your popup design. We highly recommend reading of our Get acquainted with the new V2 Columns block guide, if you haven't used the Responsive Columns block before.

The steps to create a popup using this block are the same as above, you would simply set the Block type to Responsive Columns instead.

Popup content block settings and design

Within the Popup tab, there are a few setting sections that can change how the popup behaves.

Within Display Options, the Delay (seconds) adjusts the amount of time before the popup displays to the visitor and Once per session toggles how often a visitors sees the popup, either once only or every time they view that page.

Within Size Options, the dimensions of the popup window can be adjusted using the Width and Height options. The Padding option adjusts the space between the content within the popup and the edge of the popup window.

Within Colour Options, the Background colour and Text colour of the popup can be changed from the theme's default settings.

Within Other Options, you can choose if the popup should have a Close button or not. This is to allow visitors to close the popup. Therefore, turning this off will limit your customers from viewing your site, so should only be used in certain circumstances. The Background overlay opacity changes the transparency of the black (or white, depending on the theme) background which overlays the website, behind the popup.

For more advanced users, CSS can be used to target these popups for further styling. You can find the ID for the popup within the Inspect tool on your browser or you can add your own Class within the Tags tab.

Some effective popup examples

Here are some examples of popups you could create on Bluepark by utilising the popup feature.

Advanced users only

Clickable popups

A popup can also be created to display once a button, link or image is clicked on. To do this, create your popup as normal, just set the Delay (seconds) field to '99999999'. Strictly speaking, the popup is still set to appear after this amount of time but this adds up to well over a day and visitors would, obviously, have clicked away within this time.

Next, assign the block to the relevant Layout. Then, go to the page it appears on, right click and select View Page Source to see the page's HTML. Now, look for the line that's similar to this:

Copy the following section of the code:

Lastly, paste this code into an 'onclick' function that can be used on a button, link or image. The example below is using it on a button element:

Add the completed code to the page, or Custom HTML field, where you want the element to appear. If using the button code above, the styling will be the same as the add to basket buttons in the theme. If you prefer the styling of the standard buttons on the theme, change the b_basket class to b_standard instead. Alternatively, add your own class and style it within Additional CSS.

Pro users only

Unique product content clickable popups

An advanced version of clickable popups allows you to display different content in a single popup on a by-product basis. An example of this would be a Size Chart for clothing where the sizing information is different for each product. Utilising Custom Data Fields in the Product Editor is perfect for this and the steps below show how this is done.

1. First, add your content to a Custom Data field in the Channels tab on the product and make sure that same field is used for this popup on each product. For our example, we added an image of the product, and the product's specific sizing information into the field.
2. Create a new custom block and add your title, such as Size Chart. In the Block Content field, add some short placeholder text, such as 'Popup',  and turn on Display as a Popup. Then, assign the block to the Product Page layout.
3. After assigning the block, you'll need the HTML code of the surrounding div of the popup, including its ID, which can be found using the Inspect tool on your browser. Insert the Custom Data field's variable into this div, so it looks like the below. The variable will be %product_custom1, %product_custom2, %product_custom3, etc, depending on which Custom Data field your content has been added to.
   <div id="dialog_popup_100" class="" style="max-width: 1040px; max-height: 630px; background-color: rgb(240, 240, 240); padding: 40px;">%product_custom1</div>
4. Go to your theme and insert the HTML div at the bottom of the code within the Product Detail Page field in the Custom HTML tab.
5. Create your button / link code with an 'onclick' function, containing the popupDialog code, as outlined in the section above. Insert this within the HTML in the Product Detail Page field where you want it to appear on the product page.
6. An IF statement needs to be added around this code to tell browsers, if there is content in the custom data field, then display it, otherwise don't. For our example, this will look like:
   [IF product_custom1]<a href="#" onclick="popupDialog(100, 1040, 650, 40, '#F0F0F0', '', 1, 0.4);" style="margin-top: 20px;">SIZE CHART</a>[/IF]
7. The final HTML code within the Product Detail Page will look similar to this:
   
8. Once added, click on Accept Changes and save the theme. You can preview the change by clicking the Magnifying Glass icon at top right before fully committing by clicking the Green Tick icon.

Recommended reads