Skip to main content

Editing Popup Background

Customize the look and feel of your popup by changing the background color or adding an image—for both mobile and desktop views.

Rojen M Reji avatar
Written by Rojen M Reji
Updated over 4 months ago

Your popup design plays a big role in grabbing attention and driving conversions. In this guide, you'll learn how to edit the background of your popup on both mobile and desktop versions, using either solid colors or custom images.

Editing the Mobile Popup Background

Step 1: Select the Mobile Universal Container

  • Click on the mobile universal container in the popup editor.

Step 2: Locate the Background Settings

  • On the right-hand side panel, find the background settings for this container.

Step 3: Choose a Background Color or Image

  • You can:

    • Use one of your universal theme colors, or

    • Set a custom color, such as black or any hex code.

  • If you'd prefer an image background:

    • Switch the background type to Image.

    • Upload your chosen image.

    • Recommended settings:

      • Background size: Cover

      • Position: Center


Editing the Desktop Popup Background

Step 5: Switch to Desktop View

  • Click the desktop view tab to make desktop-specific design changes.

Step 6: Repeat the Same Background Changes

  • Just like in mobile:

    • Pick a color or upload an image.

    • Adjust image size and position as needed.

💡 Design changes made in mobile don’t carry over to desktop. Always edit both views separately for a consistent design.

Did this answer your question?