How to set up the newsletter popup for your website?

Newsletter popups are a powerful way for online stores to collect email addresses from website visitors and build their email marketing lists. The Concept theme supports newsletter popups and offers a variety of settings to help you optimize your news subscription process.

This article describes how to set up a newsletter popup quickly and easily for your website.

On this page

Configure the newsletter popup

  1. On your Shopify Admin dashboard, click Online Store > Themes.

  2. On the Themes page, choose Concept theme and click on the theme's button Customize.

  3. On the left-hand menu of the Home page, scroll down to the Overlay group > Newsletter popup section.

  4. In the Nesletter 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. Configure newsletter popup attributes in the Newsletter popup section settings.

    Newsletter popup section settings:

      • Display mode - To preview the newsletter popup, enable Test mode. Once you are satisfied with the look and feel, switch to Enable to make the popup live on your website.
      • Show on homepage 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 - Set the delay time for the home page newsletter popup to display after 2-60 seconds. (Note: The delay attribute is disabled in the theme editor, so you cannot see it applied when editing.)
      • Frequency - Set the newsletter popup frequency to control how often it appears to visitors. The minimum frequency is 1 day and the maximum is 30 days.

      • Text alignment - Choose from Left, Center or Right text alignment.

        Kindly review the table below for a comprehensive overview.

        Left
        Center
        Right
      • Content position - Choose one of the following popup positions:
        • Left - Bottom left of the browser.
        • Center - Center of the browser.
        • Right - Bottom right of the browser.

        Kindly review the table below for a comprehensive overview.

        Left
        Center
        Right

      • Image - This field is to insert the image for the popup.

        Note:

        • The minimum popup width must be 720px to show the popup image.
        • On mobile browser, the newsletter popup image will not appear on mobile in order to meet Google's interstitial guidelines for improved SEO.

      • Colors - You can choose colors for the newsletter popup's Text, Background, Highlight, Button text, Button background, and Button background gradient per your preference.

Set up the newsletter floating bar

Concept includes a sleek newsletter floating bar on the side of the web page. It remains in place as visitors scroll, so they can easily click to subscribe without leaving the page.

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

  1. In the Newsletter popup section, you will see the block Get 20% Off 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.

    Otherwise, add the Floating bar block from the Add Block list.

  2. Click on the Floating bar block. 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.
    • Content position - You can set the floating bar to be placed on the Left or Right of the browser.
    • Show social media icons - Tick on this option if you want to show your social media shortcuts in this floating bar. To display your social media accounts, link them in your theme settings.
    • Social media heading -
    • Mobile layout:
      • Disable on mobile - Disable the floating bar on a mobile browser.
      • Hide social media icons - If you enable the floating bar and hide all social icons, this block will display only the heading text (e.g., "Sale 20% Off").
    • Colors - You can set the floating bar's Text and Background color here.

  3. Finally, click Save to finish.

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

Back to Concept Support