Newsletter Popup

The first time a customer visits your website, display a newsletter subscription popup.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the footer template

Navigate to the folder /httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html.

Step 2: Add the code into the template

Paste the following code below [%load_template file:'footers/includes/scripts.template.html'/%].

<div id="popup_newsletter" class="modal fade" aria-labelledby="Newsletter Subscription" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                [%content_zone id:'newsletter_popup'/%]
                <form method="post" action="[%URL type:'page' id:'subscribe' https:'1'%][%END URL%]" aria-label="Newsletter subscribe form">
                    <input type="hidden" name="list_id" value="1">
                    <input type="hidden" name="opt_in" value="y">
                    <input type="hidden" name="inp-submit" value="y" />
                    <input type="hidden" name="inp-opt_in" value="y" />
                    <div class="input-group">
                        <input name="inp-email" class="form-control" type="email" value="[%nohtml%][@inp-email@][%/nohtml%]" placeholder="Email Address" required aria-label="Email Address"/>
                        <div class="input-group mt-2"><input class="btn btn-primary" type="submit" value="Subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/></div>
                    </div>
                    <div class="checkbox mt-2">
                        <label class="small">
                            <input type="checkbox" value="y" class="terms_box" required/>
                            I have read and agree to
                            <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> &
                            <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        var newsletterViewed = localStorage.getItem('newsletter_viewed');
        if(newsletterViewed != 'true') {
            $('#popup_newsletter').modal('show'); localStorage.setItem('newsletter_viewed', 'true');
        }
    });
</script>

Note: In order to only show the popup once person user, we have to create a cookie. When a user visits the page for the first time, the script tests to see whether the cookie exists. If it doesn't, it'll show the newsletter popup, and then set the cookie. If it does find the cookie, nothing will happen because the user has already seen the newsletter popup.

Step 3: Setup the popup content

Setup a Content Zone named newsletter_popup, and paste the following code into the "Content" field:

<h3>Get the latest deals!</h3>
<p>Sign up to our newsletter to receive our latest news and offers.</p>

Final Result