Creating a popup modal on your web store is a great way to let your customers know about something important, such as a sales event or new product arrivals. In this tutorial, we’ll show you how to create one.

Create Your Popup

To get started, go to your commercebuild web store dashboard, click System > Modules > Popups. Once there, click Add Popup. You can also navigate to https://yourwebstore.com/admin/mmodules/popup/create/. You can then begin filling out the popup contents:

Note: The CSS Class and CSS Modal ID allow you to manipulate these elements either with CSS or JavaScript. This can be done by going to System > Modules and clicking Custom CSS and Custom Tags, respectively.

When you’re finished, click Apply.

Add Your Popup to a Page

The next step is to add your popup to a page. For the purposes of this tutorial, we’d like to add this popup to our web store homepage, which is a Default Page, and only for B2C customers.

Note: If you want your popup to appear for both B2B and B2C customers, you must add it to the default homepage for each.

Navigate to Content Management > Default Pages, or go to https://yourwebstore.com/admin/mcontents/defaultpages. Choose the settings for B2C (Public), and then click Edit for Home.

Next, click Add Container and a new container will be added at the bottom of the page. Scroll down and click Edit Container for the container in question and set the container content type to Popup.

You will be asked to confirm whether you wish to change the content module type and remove existing data. Assuming this is a new content module, there should not be any issue with proceeding, so click Apply.

Finally, select the desired options from the menu. For this tutorial, we want “My First Popup” to load after 2 seconds for every B2C user who opens the homepage.

Once the popup settings are configured, click Apply and visit the site as a B2C user to see the popup.