Back to all posts

How to Add Custom Popup in Shopify

How to Add Custom Popup in Shopify
How to Add Custom Popup in Shopify

Table of Contents

  1. Introduction
  2. Why Add Custom Popups to Shopify?
  3. How to Add a Custom Popup in Shopify
  4. Examples of Effective Popups
  5. Customizing the Popup for Specific Pages
  6. Conclusion
  7. FAQ

Introduction

Imagine landing on an online store and immediately being greeted with a popup offering a 20% discount on your first order. Intrigued, you enter your email to redeem the offer. This small interaction influences your purchasing decision and contributes to the store’s ability to engage and convert visitors into loyal customers. This is the power of custom popups.

Adding custom popups to your Shopify store can significantly improve customer engagement, increase your email subscriber list, and drive sales. In this blog post, we’ll walk you through the process of adding custom popups to Shopify. Whether you're looking to collect emails, offer discounts, or guide visitors to specific products, customized popups are essential for enhancing user experience and boosting conversions.

By the end of this post, you’ll have a comprehensive understanding of how to add and customize popups on your Shopify store. Ready to make your Shopify store more interactive? Let’s dive in!

Why Add Custom Popups to Shopify?

Custom popups come in various forms and serve multiple purposes, such as email collection, special promotions, and user engagement. Here are a few key benefits:

  • Increase Conversions: Popups can convert up to 10% of traffic by dynamically engaging visitors.
  • Promote Sales and Discounts: Guide visitors to ongoing sales or share unique discount codes to boost sales.
  • Build Email Lists: Collect visitor emails seamlessly for future marketing campaigns.
  • Enhance User Experience: Well-timed and designed popups can significantly improve the user experience by offering valuable information or incentives.

Next, let’s go step-by-step on how to integrate and customize these popups.

How to Add a Custom Popup in Shopify

Step 1: Choosing a Popup App

Choosing the right app is crucial for creating and managing your Shopify popups. Here are some popular choices:

  • Wisepops: Known for its user-friendly interface and robust customization options.
  • Convertica: Offers a free plan with essentials like unlimited campaigns and templates.
  • Elfsight Popup: High customization capabilities allowing non-coders to create stunning popups.

For this guide, we’ll use Wisepops to illustrate the process.

Step 2: Installing the Wisepops App

  1. Add Wisepops to Your Shopify Store:

    • Go to the Shopify App Store and search for Wisepops.
    • Click Add app and follow the prompts to install it on your store.
  2. Create an Account:

    • Register either with your Google account or email.
    • After registration, integrate your Shopify store by navigating to Settings > Install Wisepops.

Step 3: Creating Your First Campaign

  1. Launch Wisepops Dashboard:

    • Click Create Campaign.
    • Choose Popups tab and then Campaign Assistant.
  2. Select Campaign Goal:

    • For instance, choose Grow your audience and then select Coupon.
  3. Select a Template:

    • Choose from a variety of pre-designed templates.

Step 4: Customize the Popup Design

  1. Edit Design Elements:

    • Hover over an element to view editing options.
    • Customize text, images, colors to match your brand.
  2. Example Customization Tips:

    • Use your brand colors for consistency.
    • Make the CTA button stand out with a contrasting color.
    • Add relevant links to the CTA text to direct visitors towards intended actions.

Step 5: Configure Display Scenarios

  1. Set Popup Triggers:

    • Choose display triggers such as On Landing, On Exit Intent, After Delay (e.g., 10 seconds).
  2. Fine-Tune Timing:

    • Opt to show the popup after a visitor has spent some time on the page to avoid being too intrusive.

Step 6: Activate Your Popup

  1. Publish the Campaign:
    • Once everything is set, click Done Editing.
    • Navigate back to the Wisepops dashboard and click Publish.

Examples of Effective Popups

Exclusive Black Friday Deals

Create a bold popup with a vibrant design to capture attention and collect emails for future promotions.

Cyber Monday Offers

A subtle popup window in the lower right corner reminding customers of last-minute deals, along with an irresistible discount code.

Festive Christmas Sale

A Yuletide-themed popup facilitating seamless redemption of discount codes with a specific call-to-action button leading to the sale page.

Customizing the Popup for Specific Pages

To add popups to specific pages on your Shopify store, follow these instructions:

  1. Integrate Popup Code:

    • Go to the relevant page’s theme file in Shopify admin.
    • Edit the theme.liquid file.
    • Insert the Wisepops script just before the closing </body> tag.
  2. Apply Conditions for Specific Pages:

    • Use display rules within Wisepops to target URLs or customer behaviors.
    • For instance, trigger the popup only on product pages or the checkout page.

Conclusion

Integrating custom popups within your Shopify store can enhance your online presence by increasing customer engagement and driving more conversions. From collecting emails to showcasing special offers, the right popup strategy can provide significant business benefits.

By following the steps outlined in this guide, you can effortlessly set up and customize popups on your Shopify store. This will not only help you deliver a better shopping experience but will also contribute to achieving your business goals.

FAQ

How do I create a popup for only specific products?

To show a popup for specific products, use the app’s targeting settings to define specific URLs. Customize the display scenario to trigger only on selected product pages.

Can I customize the design of my popup without coding skills?

Yes, most popup apps like Wisepops and Convertica come with user-friendly editors that allow you to customize popups without any coding knowledge.

What should I include in my popup to make it effective?

A clear and compelling message, strong call-to-action (CTA), and a valuable offer (like a discount or freebie) are key elements for an effective popup.

Are there any free popup apps for Shopify?

Yes, apps like Convertica: Popups offer a free plan which is sufficient for basic popup needs.

By embedding custom popups tailored to your audience and brand, you optimize interactions and conversions, ultimately driving greater success for your Shopify store. Give it a try and transform how you engage with your online visitors!