Design your Popup

Design your popup

You may create unlimited popup designs for a variety of designs and purposes. Sort through the available templates to jumpstart your layout with suggested content.

Name your popup for internal tracking and reporting purposes. The popup name will not be visible to visitors.

Continue on to customize your popup's design. Start by customizing and adding sections to enhance your popup's design. Sections stack vertically on the canvas in a single column.

Available sections include:

• Image to feature your logo or a supporting image stacked vertically in your popup design
  • Use Shopify's free image tool Burst or Seguno's Canva integration. Learn more about supported image types.
• Rich text to share more information about why a contact would benefit from signing up or conveying your announcement. All popups should have the primary message content included in a rich text section for maximum accessibility.
• Form to collect signup information such as email address, phone number, first name, and last name.
  • All form information is submitted to the created customer record in Shopify. Learn more about how Popups integrates with your Shopify Customers.
• Close action to give your shoppers an additional option to dismiss the popup through a text link or button

Each section also has advanced settings to allow you to set the section's background color or image and control the padding (or spacing) around that section.

Once you've configured the first step of the popup, select Step 2 to control the confirmation or follow-up page.

Continue to customize your popup's content and design. Popups may have up to three steps or as few as one step. Use the Edit step action to reorder, clone, or remove steps.

Once you've configured the primary content of the popup through the sections, move on to your theme settings for more style control on the overall popup (instead of the specific sections.)

Adding a background image is a great way to make your popup more visually appealing. Background images can run behind the entire popup or be placed in a separate column to the left or right of the popup sections. Side-aligned images will move above the popup on a mobile device or can be hidden on mobile for a more focused message.

Additional image position settings allow you to center your image if it is larger than the available popup window and control the width ratio of the side-aligned images compared to the popup sections.

Control the popup launch animation and screen position for both desktop and mobile devices. Use the preview options to test the experience on both desktop and mobile screens to be sure your popup is not too intrusive and blends nicely with your intended site experience.

Complete your theme customizations and save your design. Return to the Popup detail page to set your popup's trigger requirements and activate the new popup on your site.