{"id":30621,"date":"2025-01-11T12:15:47","date_gmt":"2025-01-11T12:15:47","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=30621"},"modified":"2025-01-17T11:28:54","modified_gmt":"2025-01-17T11:28:54","slug":"shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/en\/knowledge-base\/shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup\/","title":{"rendered":"Shopify: Customizing the subscription popup with Probance Newsletter Form&amp;PopUp"},"content":{"rendered":"\n<p><em>This tutorial will show you how to use the Probance Newsletter Form&amp;PopUp app in the Shopify theme editor to customize your newsletter subscription popup.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre1\">1. Building the popup.<\/h2>\n\n\n\n<p>First, click&nbsp;<strong>Probance POP-UP<\/strong>&nbsp;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.<\/p>\n\n\n\n<p>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<\/p>\n\n\n\n<p>It must contain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>At least one Email profile field<\/li>\n\n\n\n<li>A button<\/li>\n\n\n\n<li>A block of labels and translations<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH211\">1.1. Adding an Email and other profile fields<\/h3>\n\n\n\n<p>In the Probance POP-UP element, click<strong>&nbsp;Ajouter un bloc (Add Block)<\/strong>&nbsp;and select<em>&nbsp;Contact Field.<\/em><\/p>\n\n\n\n<p>Click on the recently added&nbsp;<em>Contact Field<\/em>&nbsp;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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH212\">1.2. Add new button<\/h3>\n\n\n\n<p>In the Probance POP-UP element, click<strong>&nbsp;Ajouter un bloc (Add Block)&nbsp;<\/strong>&nbsp;and select&nbsp;<em>Button.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH213\">1.3. Add new labels<\/h3>\n\n\n\n<p>In the Probance POP-UP element, click&nbsp;<strong>Ajouter un bloc (Add Block)<\/strong>&nbsp;and select&nbsp;<em>Labels and translation.<\/em><\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Preview of the default popup after adding items<\/h6>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre2\">2. Configuration of labels<\/h2>\n\n\n\n<p>The&nbsp;<em>Labels and translation<\/em>&nbsp;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).<\/p>\n\n\n\n<p>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&nbsp;<a href=\"https:\/\/onlinehtmleditor.dev\/\">Online HTML Editor<\/a>&nbsp;is provided to allow you to easily generate HTML code for a specified formatting.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Example of HTML generation with Online HTML Editor<\/h6>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The&nbsp;<strong>Label<\/strong>&nbsp;section allows you to modify the labels of the profile fields and the button of your form.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-note is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note: <\/strong>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.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre3\">3. Customizing the popup<\/h2>\n\n\n\n<p>You can modify the appearance of each element of the popup to adjust it to the graphic charter of your site.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH234\">3.1. General appearance<\/h3>\n\n\n\n<p>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&nbsp;<strong>General<\/strong>&nbsp;section. It contains the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Background Color (1)<\/em>\u00a0allows you to change the background colour of the popup. Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Overlay Opacity (2)<\/em>\u00a0allows 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.<\/li>\n\n\n\n<li><em>Position (3)<\/em>\u00a0allows you to change the position of the popup on the page.<\/li>\n\n\n\n<li><em>Rounded (4)<\/em>\u00a0allows you to round the corners of the popup.<\/li>\n\n\n\n<li><em>Text position (4)<\/em>\u00a0allows you to change the alignment of the title, paragraph and validation message of the popup.<\/li>\n<\/ul>\n\n\n\n<p>You can change the colour of the close icon in the popup in the Icon close section, in the&nbsp;<strong>Color<\/strong>&nbsp;field.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH235\">3.2. Customising profile fields<\/h3>\n\n\n\n<p>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&nbsp;<strong>Inputs<\/strong>&nbsp;section. It contains the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S<em>ize (1)<\/em>\u00a0allows you to change the height of the form fields.<\/li>\n\n\n\n<li><em>Background Color (2)<\/em>\u00a0allows you to change the background colour of the form fields.\u00a0Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Color (3)<\/em>\u00a0allows you to change the colour of the text entered in the form fields. Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Borderless (4)<\/em>\u00a0allows you to hide the borders of the form fields (checked option) or show them (unchecked option).<\/li>\n\n\n\n<li><em>Border color (5)<\/em>\u00a0allows you to change the border colour of the form fields. Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Rounded (6)<\/em>\u00a0allows you to round the corners of the form fields (only visible if the Borderless option is unchecked).<\/li>\n\n\n\n<li><em>Placeholder only (7)<\/em>\u00a0allows you to display the labels in the form fields (checked) or above the form fields (unchecked).<\/li>\n\n\n\n<li><em>Text position (8)<\/em>\u00a0allows you to define the alignment of the labels and texts entered in the form fields.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH236\">3.3. Adding an image<\/h3>\n\n\n\n<p>To add an image in the popup, click on Probance POP-UP in the list of components of your theme and go to the<strong>&nbsp;Image<\/strong>&nbsp;section.<\/p>\n\n\n\n<p>In the Logo field, click on&nbsp;<strong>select an image<\/strong>. You can choose the image to be included in the popup in your library, or choose an image from your directory by clicking on&nbsp;<strong>Import<\/strong>. Click on the image you want to use and then on&nbsp;<strong>Select<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Position<\/em>\u00a0(1) allows you to change the position of the image in the popup.<\/li>\n\n\n\n<li>Size (2) allows you to adjust the size of the image.<\/li>\n\n\n\n<li><em>Margin (3)<\/em>\u00a0allows you to apply (checked option) or not a margin between the image and the border of the popup.<\/li>\n<\/ul>\n\n\n\n<p><em>Note: by default the Position field is set to None, which hides the image.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ancreH237\">3.4. Customizing the button<\/h3>\n\n\n\n<p>To change the appearance of the button, select the&nbsp;<strong>Button block<\/strong>&nbsp;from the list of popup items.<\/p>\n\n\n\n<p>The<strong>&nbsp;General<\/strong>&nbsp;section contains the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Font weight (1)<\/em>\u00a0allows you to set the font thickness of the label.<\/li>\n\n\n\n<li><em>Label color (2)<\/em>\u00a0allows you to change the font colour of the label. Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Background color (3)<\/em>\u00a0allows you to change the background colour of the button. Click on the circle to display the colour picker.<\/li>\n\n\n\n<li><em>Position (4)<\/em>\u00a0allows you to choose the width alignment of the button.<\/li>\n\n\n\n<li><em>Full width (5)<\/em>\u00a0allows you to display the button in full width (option checked).<\/li>\n\n\n\n<li><em>Size (6)<\/em>\u00a0allows you to choose the height of the button.<\/li>\n<\/ul>\n\n\n\n<p>The&nbsp;<strong>Border<\/strong>&nbsp;section contains the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Border color (1)<\/em>\u00a0allows you to change the border colour of the button<\/li>\n\n\n\n<li><em>Border weight (2)<\/em>\u00a0allows you to change the thickness of the button border<\/li>\n\n\n\n<li><em>Border radius (3)<\/em>\u00a0allows you to change the radius of the button\u2019s corners<\/li>\n<\/ul>\n\n\n\n<p>The&nbsp;<strong>Hover<\/strong>&nbsp;and&nbsp;<strong>Transition<\/strong>&nbsp;sections allow you to configure the animation of the button when the cursor hovers over it. They contain the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Label color (1)<\/em>\u00a0allows you to change the font colour of the label when the cursor hovers over it<\/li>\n\n\n\n<li><em>Background color (2)<\/em>\u00a0allows you to change the background colour of the button when the cursor hovers over it<\/li>\n\n\n\n<li><em>Border color (3)<\/em>\u00a0allows you to change the border colour of the button when the cursor hovers over it<\/li>\n\n\n\n<li><em>Border weight (4)<\/em>\u00a0allows you to change the thickness of the button\u2019s border when the cursor hovers over it<\/li>\n\n\n\n<li><em>Duration (5)\u00a0<\/em>allows you to adjust the length of the transition of the button when the cursor hovers over it<\/li>\n\n\n\n<li><em>Position (6)<\/em>\u00a0allows you to choose the type of animation when the cursor hovers over the button<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ancre4\">4. Setting up display conditions<\/h2>\n\n\n\n<p>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&nbsp;<strong>Display rule<\/strong>&nbsp;section.<\/p>\n\n\n\n<p>4 displays are proposed in the&nbsp;<em>Display Mode<\/em>&nbsp;field:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After scroll: the popup appears when the visitor scrolls down the page\n<ul class=\"wp-block-list\">\n<li>The Scroll offset field allows you to define the level at which the popup should be displayed<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>After delay: the popup appears after a defined delay\n<ul class=\"wp-block-list\">\n<li>The Displaying delay field allows you to define the delay after which the popup should be displayed<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Disabled: the popup is not displayed<\/li>\n\n\n\n<li>Test mode: the popup is displayed continuously \u2013 this display is for editing the popup<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Don\u2019t forget to save your work regularly by clicking on&nbsp;<strong>Save<\/strong>, and to select the right display mode before each save to avoid keeping your popup in Test Mode.<\/p>\n<div id=\"wpmem_restricted_msg\"><p>This content is restricted to site members.  If you are an existing user, please log in.  New users may register below.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"f834b2436e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/30621\" \/><fieldset><legend>Existing Users Log In<\/legend><label for=\"log\">Username or Email<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Password<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Remember Me<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Log In\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/en\/knowledge-base\/shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"6cc3867c56\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/tutoriels\/30621\" \/><fieldset><legend>New User Registration<\/legend><label for=\"username\" class=\"text\">Choose a Username<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">First Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Last Name<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Email<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/en\/knowledge-base\/shopify-customizing-the-subscription-popup-with-probance-newsletter-formpopup\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Register\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Required field<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to use the Probance Newsletter Form&amp;PopUp app in the Shopify theme editor to customize your newsletter subscription popup. 1. Building the popup. First, click&nbsp;Probance POP-UP&nbsp;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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[657],"class_list":["post-30621","tutoriels","type-tutoriels","status-publish","hentry","sujets-acquisition"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels\/30621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/media?parent=30621"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/en\/wp-json\/wp\/v2\/sujets?post=30621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}