The popup editor includes various tools and features to customize your popup to suit your store's styling. Adjust the style of your popup using the features outlined below.
Theme
Start by choosing a theme for your popup. There are six themes to choose from with Dallas being the default.
You can edit your popup's colors after selecting your theme.
Shape and size
Use the Shape dropdown menu to choose the shape of your popup. This will also determine where on the screen your popup shows. Adjust your popup's size to Small, Medium, or Large using the Size selector.
Fonts, colors, and images
Choose from the available Fonts, and then select colors for the background, text, and highlights of your popup. When selecting a color, use the color picker or enter a hex code.
Use hex codes to match the colors on your storefront. Click here for more information on using hex codes.
Use the Upload button to upload a custom image into your popup. The image will display differently depending upon the theme and popup type you choose.
Images must be a .jpg, .png, or .gif and have a size limit of 2 MB.
Making your popup dismissible
After adjusting fonts, colors, and images, choose whether or not to make your popup dismissible with a close button. In order to give your customers the best user experience, we recommend making your popup dismissible in most cases. However, this setting is there for when specific scenarios arise.
Making your popup Google mobile-friendly
By checking the Google mobile-friendly option, the app will ensure your popup is displayed as small as possible on mobile devices. This will avoid Google penalizing your page rank for obscuring your site's content with too large a popup.
Click here for more information on making your pages mobile-friendly.
Adding custom styles with CSS
If you're proficient with CSS, you can use it to override theme styles and apply your own adjustments. Click the Use custom CSS checkbox to add your code to the editing panel.