Creating a new project is the first step toward building engaging customer interactions. Whether you prefer to start from a blank canvas or use one of our professionally designed templates, the process is streamlined to get you into the editor as quickly as possible.

Initiating a New Project

To begin, navigate to Creative Popup > Popups in your PrestaShop Back Office. Click the Add New Popup button located in the top-right corner.

Name your new popup
The "Add New Popup" dialog

A dialog box will appear asking you to name your project. While you can leave this field empty and rename it later, giving your popup a descriptive name (e.g., "Summer Sale 2024") will help you stay organized as your collection grows. Click Create Popup to proceed.


Choosing Your Design Method

After clicking create, you will be presented with two primary methods to start your design:

Choose a start template
Select between a blank project or the Template Store
Create an empty popup:
Best for experienced designers who want to build a custom layout from scratch.
Template Store:
Access a library of high-converting, ready-to-use templates. This is the recommended starting point for most users.

Using a Template

If you choose to use a template, you can Preview any design by clicking on its thumbnail. Once you find a design that fits your needs, click the Import button. The module will automatically load all necessary assets, layers, and animations into your new project.


Previewing Your Popup

Once the popup is created or imported, you will be redirected to the Layout Settings view. This is the main configuration area for your new project.

Popup settings view
The main Popup Settings dashboard

To see how your brand-new popup looks in action, hover your mouse over the monitor icon in the Appearance tab. A Live Preview button will appear; click it to launch a real-time simulation of the entrance animations and layout.


Saving Your Progress

As you configure your popup, ensure you save your changes frequently. You can click the Save Changes button at the bottom of the page, or use the following keyboard shortcuts for a faster workflow:

  • Windows/Linux: Ctrl + S
  • macOS: Cmd + S
Note: Always save your work before navigating away from the editor to ensure no design progress is lost.
© WebshopWorks - Professional PrestaShop Addons