Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Popup
The Flex theme includes a handy Popup feature that can be used to encourage your shop's visitors to subscribe to your newsletter, to let visitors learn about new products, campaigns or promote sales and discounts!
When enabled, your popup will appear on top of your store page content with an optional overlay behind it, if you'd like more contrast between the popup and your shop content! You can select the popup frequency as well as choose to enable/disable it on mobile.
The Popup includes options to add an image, text, and signup form. For further flexibility, you can select a load in animation for the popup and add custom CSS within the theme editor section settings.
In order to enable the Popup, head into Customize (your Theme Editor) > Theme Settings > Layout > Show Popup.
Popup Settings
Once the popup is enabled, a 'Popup' section will appear under Sections in your Theme Editor (customize) at the very bottom:
Show close icon
The close icon for the popup is optional! You can enable/disable the close icon by checking off the 'show close icon' setting.
Show popup on mobile
You can choose whether or not you'd like the popup to display on mobile. If you choose to enable the popup on mobile, it will display fixed at the bottom of the screen on your mobile phone instead of a full screen takeover.
Show border/Border width
If you'd like to add a border around the popup, you can enable the 'show border' setting. You can then select a border color with the color picker field and select a 'border width' on the slider below.
Heading/Subheading
To add text to your popup, you can fill in the 'heading' and 'subheading' fields.
Text alignment
Here you can choose the alignment of your text. Choose from left, center, or right.
Text/Background Colors
You can choose specific colors for the text and the background of the popup with these color pickers.
Show signup form
To have the signup form display in the popup, simply enable the 'show signup form' setting.
Show first name/Show last name
If you want the signup form to include fields for the first and last name, you can enable these settings.
Image
The popup includes an option to add an image! An image size of 600 x 875px is recommended
Image cropping
If you've uploaded an image, you can crop it to same height as your text content with the 'image cropping' setting. You'll most likely want to make use of this setting if you've uploaded an image size that is different than the recommended size! The cropping options are left, center, right, and none.
Image position
If you've uploaded an image, choose either left or right for the 'image position' setting.
Overlay/Overlay opacity
The popup includes an overlay on desktop. The overlay is the background between the popup and your shop page! You can select a color for the overlay and adjust the opacity from 0% (to remove the overlay) to 100% (to make the overlay fully opaque, which hides your shop in the background).
Popup delay
The popup delay setting lets you decide how quickly your popup will appear after a visitor has arrived at your site! Choose from 0 seconds - 120 seconds.
Days until popup is displayed again
You can decide on the frequency of your popup by selecting an option in the 'Days until popup is displayed again' setting. Choose between 2, 7, 14, 30, 90, and 365 days.
Animation
The 'animation' setting will determine how the popup 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom in.'
CSS Class/Custom CSS
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
Theme Wide Form Settings
Additionally, there are some settings for the signup form that will apply to all forms theme-wide. The ability to show placeholder text for the fields within all forms and select the button style for the submit button.
These settings can be found by going into Customize (your Theme Editor) > Theme Settings > Elements > Forms:
Use placeholders
If you want the labels for the form fields to display within the field, you can enable the 'use placeholders' setting. This will move the text from above the field, to inside it.
Button style
With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).
Examples
Example 1 - Wink demo shop
Example 2 - Moda demo shop
Mobile Layout
The popup is optional on mobile. If you choose to enable the popup on mobile, it will display fixed at the bottom of the screen on your mobile phone instead of a full screen takeover. If you've added an image, it will become hidden on mobile in order to reduce the amount of space that the popup takes up!
