How to Create a Shopify Popup with Popupsmart?
Integrating Popupsmart with a Shopify store is a breeze, offering two straightforward methods to seamlessly incorporate its functionality. Firstly, you can effortlessly integrate Popupsmart with your Shopify store by utilizing Popupsmart's Shopify app, which streamlines the process with intuitive steps, ensuring a hassle-free setup.
Alternatively, for those preferring a direct approach, Popupsmart offers a simple embed code integration method, allowing you to embed the popup functionality directly into your Shopify store's theme. Whether opting for the app or code integration, Popupsmart ensures simplicity and efficiency in enhancing your Shopify store's engagement and conversion rates.
Let's see how you can create a Shopify popup in 2 ways:
Installing Popupsmart App to the Shopify Store
1. Navigate to the Shopify App Store and Install Popupsmart’s Shopify App
![Navigate shopify app store](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb601063b88db89da759_shopify-install-app.webp)
2. Clicking "Install" in the app store will redirect you to your store’s dashboard. Once there, click "Install App."
![Click install in the app store](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb6068d02d53e8090536_click-install-in-the-shopify-app-store.webp)
3. After installation, you'll be redirected to Popupsmart’s interface. You can either create a new Popupsmart account or add your Shopify Store to an existing account by clicking "Login to your Popupsmart account".
![Connect your shopify account](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb60cd44c52b367d9c7e_shopify-connect-your-account.webp)
4. Upon creating a new Popupsmart account, your credentials and store will automatically be authenticated. You will then see the following confirmation message.
![Your shopify account successfully connected](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb60b2683e1ba4781c29_your-shopify-account-successfully-connected.webp)
5. After confirmation, you'll be taken to the first step of creating your first popup campaign. Choose a template goal from the left-hand menu to begin.
![Creating your first popup campaign](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb606822f2a3a8e4c7bc_creating-your-first-popup-campaign.webp)
6. Let’s create a popup campaign in order to collect emails. Select "Grow Email List" from the left-hand menu as your filter. Then choose a template that you like.
![Select grow email list goal](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb60e34fd59209efa156_select-grow-email-list-goal.webp)
7. In the Customize Step tailor your popup according to your needs. You can also adjust its style in the Style Step and create personalized Segments & Targeting to display the popup to specific users.
![Campaign builder main popup preview](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb607008da0ad22a96ed_campaign-builder-main-popup-preview.webp)
8. In the "Publish Step", you have the option to enable:
- Autoresponder Email: Send automated emails to users who complete the email form in your popup.
- Self Email Notification: Receive an email each time a visitor fills out your popup.
- Integrations: Send form or website data to your CRM or messaging services.
- Google Analytics: Automatically send popup events to your GA account.
After configuring these settings, click the "Publish" button.
![Publish step shopify popup](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb6080bbc478f636a571_publish-step-shopify-popup.webp)
9. If Popupsmart is not enabled in your Shopify Theme editor, you will see a modal that says "Verify Popupsmart App". If this modal appears, click "Theme settings in Shopify" to be redirected to your theme in the Shopify theme editor.
![Verify popupsmart app](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb608fb138b4fe0c6489_verify-popupsmart-app.webp)
10. In your Shopify Theme editor, click “App embeds”, enable the Popupsmart Embed code and click "Save".
![Shopify theme editor active app embed](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb601bd4f40b837d9fe6_shopify-theme-editor-active-app-embed.webp)
11. After saving, return to Popupsmart and click "Refresh".
![Shopify verify popupsmart app click refresh button](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb60018a582d3e0a211a_shopify-verify-popupsmart-app-click-refresh-button.webp)
12. Once you've clicked "Refresh", a confirmation will appear in the modal. Click Okay when you see it.
![Shopify verify popupsmart app click refresh button after verified](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb609aac7a08c5aa5ef7_shopify-verify-popupsmart-app-click-refresh-button-after-verified.webp)
13. Voila! Your First Popup Campaign is Live! Your first popup campaign is now published in your store.
![Shopify popup publishing campaign](https://assets-global.website-files.com/659415b46df8ea43c3877776/65b8fb606325ee037740f392_shopify-popup-publishing-campaign.webp)
Embedding Popupsmart Code to the Shopify Store
1. After signing into your Popupsmart account, click on the “Embed Code” to get your unique embed code.
![embed code section in the popup builder](jpg/65d76396ba621abf6d50a620_embed-code.jpg)
2. A modal will open and give you your Popupsmart embed code. Copy your embed code to the clipboard.
![copying the embed code to clipboard](jpg/65d763adf5297d80badf9ba7_copy-to-clipboard.jpg)
3. Then, go to your Shopify store’s “Online Store” section from the “Sales Channels” part. Go to the “Themes” section. From your theme’s “Actions” part, select “Edit Code,” as shown below.
![edit code section in Shopify dashboard](png/65d7690e2b8c1ad9672ba111_create-a-shopify-popup-step-three.png)
4. Go to the “theme.liquid” section under the “Layout” part.
![theme.liquid file in the Shopify dashboard](png/65d769353dde251af3b457cc_create-a-shopify-popup-step-four.png)
5. Paste your Popupsmart embed code before the closing of your </body> tag and click on the “Save” button.
![pasting popupsmart embed code to the Shopify store](png/65d7696b079cca6487b057d3_create-a-shopify-popup-step-five.png)
Your code injection process is done, so you can go & create your popup campaigns.
7. Now go to your Popupsmart dashboard and the “Websites” part from your profile.
![websites section in the popup builder](jpg/65d76449a9b14dd06eb90352_websites-section.jpg)
8. Click on “New website” to add your Shopify store’s domain.
![add a new website button in the popup builder](jpg/65d76456e9da4707a107f3ea_new-website-button.jpg)
Enter your website’s URL to the “Add a new website” modal and click on the “Save” button.
9. And now, build your popup campaign and customize it as much as you like. Then, click on the “Save” and “Publish” buttons. Your Shopify store’s popup will be published, and you will see the modal below when your campaign is successful.
![campaign is published modal](jpg/65d764a40c70f7bfef047410_published-campaign.jpg)
Still have questions? Contact us, and we will gladly help you.
Do I need coding skills to add a Shopify popup via Popupsmart?
No, you don’t need any coding skills to add popups to your Shopify store. Adding popups to Shopify stores is practical with a popup builder like Popupsmart! All you have to do is add your embed code to your Shopify theme’s file editor.
That way, you can integrate Shopify with Popupsmart and start displaying conversion-ready popups that can boost your sales!
Can I create a Shopify lightbox popup with Popupsmart?
Sure! You can easily create a highly customizable Shopify lightbox popup with Popupsmart.
Also, we have different popup types, like full-screen and floating bar popups. Select one suitable for your Shopify store, and start customizing independently!
Can I create a Shopify mobile popup with Popupsmart?
Absolutely! Popups you create with Popupsmart are mobile-friendly, and you can customize them according to mobile devices. That way, by adding mobile-responsive popups, you can reach your target audience appropriately.
Can I create a Shopify popup contact form via Popupsmart?
Yes! You can create Shopify popup contact forms using Popupsmart with ease. In addition, you can interact with your visitors appropriately by adding email inputs and other elements with our drag-and-drop popup builder.
![30% off coupon discount promotional popup design](https://assets-global.website-files.com/659415b36df8ea43c38776dc/65a7851eb39daf6f3062ab22_integrations-popup2.webp)
![join premium account popup design](https://assets-global.website-files.com/659415b36df8ea43c38776dc/65a78524d152c1e8e97b0369_integrations-popup1.webp)
![get a second phone line phone call popup design](https://assets-global.website-files.com/659415b36df8ea43c38776dc/65a7852eeadc17b8b41c8c69_integrations-popup3.webp)