All Collections
Getting started
Design and customize a popup
Design and customize a popup

Understand your theme settings and customization options.

Updated over a week ago

Popups are fully customizable, from the size to the design. Use the below options to customize the popup to fit your brand.

Select a popup template

Creating a new popup will prompt you to select a popup template. Popup templates include starting layouts and action-oriented copy to save you time in the design process.

Search templates based on the popup type using the popup filter.

popup filter

Add sections

Sections make up the main content of the popup. Customize and add sections to enhance the popup 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.

  • Button to add a clear call-to-action and direct customers to the next step.

  • Close action to give your shoppers an additional option to dismiss the popup through a text link or button.

  • Countdown to create urgency or countdown to an event or offer deadline.

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. Click on the section to view the advanced settings.

Add or remove steps

Steps allow you to create multiple offers and messages in a single popup. Once the first step is completed by the customer, the next step will show. Popups may have up to three steps or as few as one step.

Use the Edit step dropdown to reorder, duplicate, or delete steps.

Popup theme settings

For further customization, select Theme settings. Your theme settings include customization options for the size, padding and position, background, typography, style, and overlay/close button.

Theme settings descriptions

  • Size, padding, and position

    • Adjust the width, height, and padding on the popup. Additionally, this is where you will select if the popup is left, centered, or right-aligned.

  • Background

    • 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.

  • Typography

    • Change the font style, size, and color.

  • Style

    • Style settings include the animation, which is the transition from one step to the next. Additionally, you can adjust the corner design and border thickness or style.

  • Overlay and close button

    • Hide or show the overlay from the theme settings. When set to show, the overlay will blur the browser background and highlight the popup.

    • Disable page scrolling will block the customer from having the ability to scroll, encouraging them to engage with the popup.

    • Closing the popup when clicked allows the customer to click anywhere on the overlay to close the pop.

    • The close button appears in the top right corner of the form, which allows customers to dismiss the popup. Adjust the style, position, or color to change the button design.

Did this answer your question?