DocsCreate and Add Pop-ups to Your Site

Create Your Custom Popup

Follow this guide to create engaging popups for your store

In this guide, you'll learn how to create engaging pop-ups using our visual editor, customize when and how they appear, and add them to your website. Our pop-ups help you collect emails, showcase promotions, and boost conversions with just a few lines of code.

Follow this step-by-step guide to create your first pop-up, or explore our templates for quick setup.

What you'll learn

Design Your Pop-up

Create a custom pop-up using our visual editor with drag-and-drop functionality.

Get Integration Code

Generate and copy the integration script for your pop-up.

Add to Your Site

Add the pop-up script to your e-commerce website.

Prerequisites

A Hustily account. If you haven't created one yet, sign up here
Access to your website's HTML code or theme files
Basic understanding of how to add scripts to your website

Step 1

Navigate to Popup Designer

Access our intuitive popup designer where you can create and customize your popup. The interface is split into two main sections:
• Left side: Design controls for complete customization
• Right side: Real-time preview of your popup

Step 2

Select Your Products

Easily integrate your store's products into the popup:
• Choose products from your store's inventory
• Add multiple products to create an engaging product showcase
• Preview how products will appear in your popup

Step 3

Customize Product Display

Make your product presentation unique:
• Design custom buttons and navigation elements
• Adjust colors, sizes, and layouts to match your brand
• Create a cohesive look that matches your store's theme

Step 4

Style Navigation Elements

Perfect every detail of your popup:
• Customize navigation dots for multi-product displays
• Style interaction buttons (like/dislike)
• Ensure smooth navigation between products

Step 5

Set Up Discount Incentives

Encourage customer engagement with rewards:
• Create special discount coupons for survey completion
• Customize the welcome screen with promotional messaging
• Design attractive incentives to boost participation

Step 6

Design the Completion Screen

Create an engaging completion experience:
• Display reward coupons after survey completion
• Customize the end screen to match your store's theme
• Add personalized thank you messages and calls-to-action

Step 7

Customize Trigger Button

Design the perfect entry point for your popup:
• Style the button that triggers your popup
• Customize colors, text, and animations
• Ensure it integrates seamlessly with your store's design

Adding Script to Shopify Store

Step 8

Copy Integration Script

Get your unique popup integration code:
• Find your popup's integration script
• Click the "Copy Code" button
• Keep this code ready for the next steps

Step 9

Access Shopify Theme Editor

Navigate to your Shopify theme settings:
• Go to your Shopify admin panel
• Find and click on "Themes" in the menu
• Click on the "Edit code" button for your active theme

Step 10

Insert the Script

Add the popup script to your theme:
• Locate and open 'theme.liquid' from the sidebar
• Find the line containing meta-tags render statement
• Paste your copied script directly below this line
• Save the changes to make your popup live

Ready to Create Your Popup?

Every element of your popup can be customized to match your store's theme and brand identity. Start creating engaging popups that resonate with your customers and drive results.