Set up the newsletter popup for your website

A newsletter popup is an effective tool for online stores to collect emails from website visitors and to get more right contacts for email marketing campaigns. This feature is supported by Be Yours theme with multiple settings to optimize your news subscription process.

In this article, we will show you how to set up the newsletter popup in a quick and easy manner.

On this page

• Configure the newsletter popup
• Set up the newsletter floating bar

Configure the newsletter popup

1. On your Shopify Admin dashboard, click Online Store > Themes.
2. On the Themes page, choose Be Yours theme and click on the theme's button Customize.

   

3. On the left-hand menu of the Home page, scroll down to the Popup section at the bottom.

   

4. In the Popup section, you can add different blocks such as text, buttons, and edit/format content for these blocks if you want to show them to customers.

   

5. Click on the Popup section to configure different attributes, including:
   • Display mode: There are three options which are Enable, Disable, and Test mode. If you choose "Test mode", the popup always displays for your review. When you feel satisfied with the look, you switch to 'Enable'.
   • Show on home page only: Tick on this option if you want to show this popup on the homepage only.
   • Show only for visitors: Tick on this option if you want to show this popup for visitors only. The users who log into their accounts on your website will not see the popup.
   • Delay: You can set the delay time to display the banner after loading the home page. The minimum delay time is 2 seconds, and the maximum is 60 seconds. Please note that the delay attribute is disabled in the theme editor, so you cannot see it applied when editing.
   • Frequency: Here, you can set how frequently the popup appears to a visitor. For example, if '3day' is set, the newsletter popup will be shown up to a visitor every 3 days when they visit the website. The minimum frequency that can be set is 1 day, and the maximum is 30 days.

   

   • Popup width: You set the popup width within a range from 300 - 1000px.
   • Content padding: You set the content padding within a range from 20 - 80px.
   • Content alignment: The popup content can be aligned horizontally on the Left, Center, or Right.
   • Content position: You can place the popup content at the Center, Bottom left, or Bottom right.

   

   • Image: This field is to insert the image for the popup. The image can be placed on the Top, Left, Right, or Bottom in the popup when displaying on the desktop. You set it up by selecting option in the field Desktop position.

     

     Notes: There are some restrictions related to the popup image's visibility, including:

     • Content position must be 'Center' to show the popup image.
     • The minimum popup width must be 720px to show the popup image.
     • On mobile devices, the popup image is not displayed due to SEO requirements of Google's interstitial guidelines.

      

   • Colors: You can choose colors for the popup's text, borders, background, and shadow per your preference.

   

Set up the newsletter floating bar

Be Yours theme also supports a newsletter floating bar on the side of the web page. By remaining its position when web visitors scroll down or up any page, they can click instantly to access information without navigating elsewhere.

You can change the settings of this newsletter floating bar on the left-hand menu of the Home page as follows:

1. In the Popup section, you will see the block Newsletter and this is where you can adjust the floating bar. This block is visible on default. In case you want to hide the element, click on the eye icon, Newsletter block (floating bar) will be grayed out and hidden on the website.

1. Click on the block Newsletter. In the open editing window, you can make the changes for:
   • Heading: The text displayed for the block so you can navigate it quickly in the Popup section.
   • Show social media icons: Tick on this option if you want to show your social media shortcuts in this floating bar. To ensure the visibility of these icons, remember to input your social media links first in Theme settings > Social media.
   • Content position: You can set the floating bar to be placed on the Left or Right of the screen.
   • Color: You can set the floating bar's color here.
   • Disable on mobile: Tick on this option if you do not want the floating bar to appear when visitors use mobile devices.

   

2. Finally, click Save.

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp