This tutorial will show you how to use the Probance Newsletter Form&PopUp app in the Shopify theme editor to customize your newsletter subscription popup.
1. Building the popup.
First, click Probance POP-UP in the component list of your Shopify theme editor, then select Test mode from the Display mode selection list. This will allow you to continuously display the popup in the editor during your changes.
The Probance popup is empty by default, you must define its content by adding blocks to the Probance POP-UP element in your Shopify theme editor
It must contain:
- At least one Email profile field
- A button
- A block of labels and translations
1.1. Adding an Email and other profile fields
In the Probance POP-UP element, click Ajouter un bloc (Add Block) and select Contact Field.
Click on the recently added Contact Field item in the block list to access its detail. By default, the profile field is Email type. Check the Required box to make it mandatory.
Two other types of profile fields are available: Last name and First name, which allow you to add Last name and First name fields to your form.
1.2. Add new button
In the Probance POP-UP element, click Ajouter un bloc (Add Block) and select Button.
1.3. Add new labels
In the Probance POP-UP element, click Ajouter un bloc (Add Block) and select Labels and translation.
Preview of the default popup after adding items
2. Configuration of labels
The Labels and translation block allows you to modify the texts and the labels of your popup as well as the confirmation message displayed after validation of the registration form, and decline them for each available language (French, English and Spanish).
The Heading (corresponding to the title of the popup), Paragraph (corresponding to the text) and Success message (corresponding to the confirmation message) fields allow you to enter HTML code to format your texts. A link to the WYSIWYG Online HTML Editor is provided to allow you to easily generate HTML code for a specified formatting.
Enter your text and then apply the desired style using the editor. Then click Edit HTML source code to generate the HTML code, which you can then copy into the input fields of the Probance POP-UP editor.
Example of HTML generation with Online HTML Editor
The Label section allows you to modify the labels of the profile fields and the button of your form.
Note: Is your site multilingual? When you set the labels for each version, the popup will display in the correct language without any additional settings. If your site is declined in a language that is not available in the translations, then the popup will not appear on the site version in that language.
3. Customizing the popup
You can modify the appearance of each element of the popup to adjust it to the graphic charter of your site.
3.1. General appearance
To change the general appearance of the popup, click on Probance POP-UP in the list of components of your theme and then go to the General section. It contains the following options:
- Background Color (1) allows you to change the background colour of the popup. Click on the circle to display the colour picker.
- Overlay Opacity (2) allows you to adjust the darkening of the page background when the popup is displayed. The higher the opacity, the darker the background. An opacity of 100% will display the popup on a black background.
- Position (3) allows you to change the position of the popup on the page.
- Rounded (4) allows you to round the corners of the popup.
- Text position (4) allows you to change the alignment of the title, paragraph and validation message of the popup.
You can change the colour of the close icon in the popup in the Icon close section, in the Color field.
3.2. Customising profile fields
To change the appearance of the popup form fields, click on Probance POP-UP in the list of components of your theme and then go to the Inputs section. It contains the following options:
- Size (1) allows you to change the height of the form fields.
- Background Color (2) allows you to change the background colour of the form fields. Click on the circle to display the colour picker.
- Color (3) allows you to change the colour of the text entered in the form fields. Click on the circle to display the colour picker.
- Borderless (4) allows you to hide the borders of the form fields (checked option) or show them (unchecked option).
- Border color (5) allows you to change the border colour of the form fields. Click on the circle to display the colour picker.
- Rounded (6) allows you to round the corners of the form fields (only visible if the Borderless option is unchecked).
- Placeholder only (7) allows you to display the labels in the form fields (checked) or above the form fields (unchecked).
- Text position (8) allows you to define the alignment of the labels and texts entered in the form fields.
3.3. Adding an image
To add an image in the popup, click on Probance POP-UP in the list of components of your theme and go to the Image section.
In the Logo field, click on select an image. You can choose the image to be included in the popup in your library, or choose an image from your directory by clicking on Import. Click on the image you want to use and then on Select.
- Position (1) allows you to change the position of the image in the popup.
- Size (2) allows you to adjust the size of the image.
- Margin (3) allows you to apply (checked option) or not a margin between the image and the border of the popup.
Note: by default the Position field is set to None, which hides the image.
3.4. Customizing the button
To change the appearance of the button, select the Button block from the list of popup items.
The General section contains the following options:
- Font weight (1) allows you to set the font thickness of the label.
- Label color (2) allows you to change the font colour of the label. Click on the circle to display the colour picker.
- Background color (3) allows you to change the background colour of the button. Click on the circle to display the colour picker.
- Position (4) allows you to choose the width alignment of the button.
- Full width (5) allows you to display the button in full width (option checked).
- Size (6) allows you to choose the height of the button.
The Border section contains the following options:
- Border color (1) allows you to change the border colour of the button
- Border weight (2) allows you to change the thickness of the button border
- Border radius (3) allows you to change the radius of the button’s corners
The Hover and Transition sections allow you to configure the animation of the button when the cursor hovers over it. They contain the following options:
- Label color (1) allows you to change the font colour of the label when the cursor hovers over it
- Background color (2) allows you to change the background colour of the button when the cursor hovers over it
- Border color (3) allows you to change the border colour of the button when the cursor hovers over it
- Border weight (4) allows you to change the thickness of the button’s border when the cursor hovers over it
- Duration (5) allows you to adjust the length of the transition of the button when the cursor hovers over it
- Position (6) allows you to choose the type of animation when the cursor hovers over the button
4. Setting up display conditions
Once your popup is built, you can setup its display mode. To do so, click on Probance POP-UP in the list of components of your theme, then access the Display rule section.
4 displays are proposed in the Display Mode field:
- After scroll: the popup appears when the visitor scrolls down the page
- The Scroll offset field allows you to define the level at which the popup should be displayed
- After delay: the popup appears after a defined delay
- The Displaying delay field allows you to define the delay after which the popup should be displayed
- Disabled: the popup is not displayed
- Test mode: the popup is displayed continuously – this display is for editing the popup
The Days between two display field allows you to set how often the popup is displayed to unregistered visitors. Setting this to 0 will display the popup every time the visitor accesses the page.
Don’t forget to save your work regularly by clicking on Save, and to select the right display mode before each save to avoid keeping your popup in Test Mode.