Customizing the Opt-in Popup
Grow your customer list with Tydal's fully customizable opt-in popup. You can fine-tune and tailor everything on the popup. Choose colors, texts, images and logos to suit your brand and give your popup a native look and tone. Keep reading to to find out more about customizing the popup.
Video Walkthrough
Enabling the Opt-in Popup
Use the opt-in popup form to collect customer's email addresses and add them to your subscriber list in Shopify.
To enable the opt-in popup on your store follow these steps
From the dashboard click Opt-in Popup
Under the Texts tab scroll down to the Form heading
Check the Email Address fields to enable email collection.
After you've finished Customizing the Modal you can turn on the popup by toggling the Widget Status on the Modal tab.
Customize the Modal
Widget Status & Name
You can toggle the widget on or off by clicking the green switch. When the widget is toggled ON, the popup will display on your website according to the trigger and display frequency that you've configured. We'll go through these settings below.
The name you choose for your widget will only be visible to you. Your customers will never see this name, so feel free to get creative.
The dismissible option is an "X" close button that displays in the upper right corner of the popup. Checking this box means you're allowing potential subscribers to close the popup if they don't wish to subscribe.
Coupon Code
Under the coupon code settings you can choose between a few variations of coupons.
Selecting No Coupon means customers will only successfully subscribe to your marketing emails, without receiving a coupon. We recommend using coupons as a way to incentivize customers to return and make a purchase.
Selecting the Discount Coupon setting means you can select a Fixed Amount β for example $10 off. Or you can select a percentage off, for example 10% off. These are one-time coupons and are generated uniquely for each customer that subscribes through the popup. These automatic codes will begin with a prefix of BOOST-
followed by a string of random letters and numbers. You can add an expiration to your discount codes by selecting Set expiration on discounts and entering a number of days the discount is valid for, after which it expires.
For more customization, you can add your own discount code by selecting Enter code manually. You can create a custom coupon code in your Shopify admin, under Discounts.
Sticky Coupon Bar
Once a user has successfully subscribed, you can choose to display their discount code on a sticky bar at the top of the page. Under Sticky Coupon Bar, select Show and enter in the text you would like displayed on the bar. The sticky bar will be displayed until the customer copies the code to their clipboard or dismisses it by clicking the 'X' close button.
Closed State
The closed state is the action of the popup when it's closed by an unsubscribed customer. For example, if a customer is browsing on your website, and chooses to decline the offer on the popup, this setting determines what the popup will do.
To close the popup completely select the Close Widget option. To Show a Sticky Bar/Button on your website after a potential subscriber closes the popup, choose Show Sticky Bar.
You can also customize the text, font size, offset and display position of the Sticky Bar on your store.
Trigger & Display Frequency
The Trigger determines when the popup will appear for your store's visitors. The Display Frequency is how many times the widget will show on a browser for a non-subscribed customer in a predefined period of time.
For example, let's say you had the trigger Show on a timer set at 15 seconds, and the Display frequency set at 2 times per day. This means that if a potential subscriber came to your website from the same web browser twice in one day, the popup would show 2 times for them, after 15 seconds. However the popup wouldn't show to that same potential subscriber again, if they visited your website a third time in the same 24 hours. The Limit number is distributed evenly across the timeframe chosen, e.g. if you have set the limit to 2 times per day, the second popup will display after 12 hours.
Show on a timer
This trigger sets the popup to display after a certain amount of time. **Immediately** means that as soon as your customers land on your website, the Opt-in Popup will appear. You can set the delay to 0, 3, 5, 10, 15, 30 or 60 seconds. We recommend setting the popup delay to be between 15 and 60 seconds for the best browsing experience.
Show on exiting the page
This trigger sets the popup to display when a visitor intends to navigate away from your site. Once their mouse cursor moves to the upper bounds of the browser, where they may close and change tabs, the popup will then appear. This is a great way to retain customers who may otherwise leave your store. This trigger works on desktop only and can not be used in conjunction with the timer trigger.
Display Frequency
The display frequency decides the number of times the Opt-in Popup will show for a non-subscribed customer. Here you can adjust the number of times the popup shows per minute, hour, day, week, month and year for a customer that's not subscribed.
π‘ Pop Tip: Try to set the popup to display after hours or days, as a popup showing multiple times for the same customer in one shopping session after they've already dismissed it can lead to a less-than-optimal browsing experience on your store.
Page Display Rules
Choose whether your popup appears on any page in your store or only on certain pages using using display rules.
Show on any page
Selecting this means that the popup will appear on any of your store's pages.
Show on specific page
By selecting this you can set certain rules that determine on which page(s) the popup will appear or not appear.
Page is equal to
Add the base path for URLs you want the popup to appear on. E.g. to show the popup on your collections pages, enter _collections_ here.
Page is not equal to
Add the base path for URLs you do not want the popup to appear on. E.g. to exclude the popup from your product pages, enter _products_ here.
Page contains
Enter a path or path segment value to show the popup on URLs that contain that value. E.g. to show only on a `/collections/blue` page enter _blue_ here.
Page not contains
Enter a path or path segment value to exclude the popup on URLs that contain that value. E.g. to exclude the popup only from your `/pages/contact` page enter _contact_ here.
Page is homepage
Use this rule if you want the popup to appear specifically on the homepage only.
Page is not homepage
Use this rule if you want the popup to appear on any page _except_ for the homepage.
Add your own text
Add your style and voice to the popup
Initial State
The Initial State is the first screen a non-subscribed customer will see when the popup appears for them. Here you can customize the text and copy on the widget according to the discount and offer that you'd like to promote.
Success State
The Success State is the screen a subscribed user will see after they enter their information in the popup. You can customize the Title, Body, Button text and the Action you'd like the button to do when a website subscriber clicks it.
Error Message
If a potential subscriber enters incorrect information, such as an invalid email address, this is the error message that will show.
Add your brand style
Here's the fun part β in the Styles tab, make it yours and match your own website colors and brand style.
Display
Under Display you'll notice options to choose from a selection of Fonts. As well as Modal Size (Width) and content alignment of the popup (Left, Center, Right). Play with these to see which looks the best.
Colors
In Colors, you can customize just about every element of the Opt-in Popup. Pick a hex code or choose from predefined colors in the color picker. Simple is key! Try to match the colors that your website and brand already use to the popup.
Under colors, you can also choose the styles of the Show Sticky Bar setting mentioned above.
Logo
If you have a logo or an icon, upload it here. The uploader accepts files that are 60px by 60px.
Background image & Layout
Here you can upload an image and choose how it displays on the widget. Use your own product photography, or if you'd like something more general, take a walk over to unsplash.com and burst.shopify.com for image inspo!
Common questions
Will the Opt-in Popup show on mobile devices?
Yes! You can preview what the modal looks like on mobile devices by toggling the mobile preview on the right side of the screen.
Can I open the Opt-in Popup from a link, button or page?
Not yet! But this is on our roadmap as a future feature. Create and vote on your favorite features at feedback.rivo.io/rivo-email-popups.