COVID 19 Banner

In response to the COVID-19 global pandemic, we have created a floating banner, which can be displayed on your store to inform customers that you are open and fulfilling orders.

The popup has the option to include a More Info button which can be used if you have a dedicated page with further information for customers.

Please note that this banner may not be compatible with your store's customisations and/or third party widgets and may require custom web development work to adjust for existing customisations and/or widgets. If you are experienced with HTML and CSS, our developer docs provide details on the Maropost Commerce Cloud specific parts of web development. If you are not comfortable editing the code, we recommend submitting a request to a Maropost Commerce Cloud design partner.

Also note this tweak will not display on mobile by default, however if you would like to adjust this you can do so by removing some of the styling code (see step 3).

Coding Instructions

Step 1. Open the custom scripts

In your control panel, go to Settings & Tools > All Settings & Tools > Custom Scripts.

Step 2. Create a new custom script

Create a new custom scripted named "Covid 19 Banner".

Copy the below code and paste it within the "Page Footer" tab (don't click save until the next step):

<div id="covid-popup">
    <i id="covid-popup-close" class="fa fa-times" aria-hidden="true"></i>
    <h4><i class="fas fa fa-caret-right"></i> Open for business</h4>
      <p>We are open and fully operational during the COVID-19 crisis.</p>
    [%if [@REFERRAL_KEY1@]%]
        <a href="[@REFERRAL_KEY1@]" class="btn btn-primary btn-sm" role="button" aria-disabled="true">More Info</a>
    [%/if%]

</div>

[%cdn_asset html:'1' type:'js' library:'jquery_cookie'%]jquery.cookie.js[%/cdn_asset%]
<script type="text/javascript">
    $(document).ready(function(){
        if (!$.cookie('showCovidPopup')) {
            $("#covid-popup").show();
        }
        $("#covid-popup-close").click(function() {
            $("#covid-popup").hide();
            $.cookie('showCovidPopup', true, { path: "/" });
        });
    });
</script>
<style>
    #covid-popup {
        display: none;
        position: fixed;
        left: 0;
        bottom: 20px;
        width: 326px;
        padding: 15px;
        background: #fff;
        border-radius: 0 5px 5px 0;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.30);
        text-align: center;
        z-index: 16000002;
    }
    #covid-popup h4 {
        text-transform: uppercase;
        font-weight: bold;
    }
    #covid-popup p {
        margin-bottom: 0;
    }
    #covid-popup #covid-popup-close {
        cursor: pointer;
        position: absolute;
        right: 8px;
        top: 8px;
    }
    /* code to hide banner on mobile */
    @media (max-width: 1024px) {
        #covid-popup {
            display: none !important;
        }
    }
    /* end of code to hide banner on mobile */
</style>

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 covid-19 popup, and then set the cookie. If it does find the cookie, nothing will happen because the user has already seen the covid-19 popup.

Step 3. Customise your script

Before saving the custom script, you can enter a URL into the Key 1 referral field, this can either be a full URL e.g https://www.website.com.au/covid-19/ which could be used to link to any other website. Or a relative link e.g /covid-19/ which would be a content/information page created in cpanel.

If you do not wish to show the More Info button simply leave the Key 1 field blank.

If you wish for the banner to show on mobile devices as well simply remove the following code from the "Page Footer" tab.

/* code to hide banner on mobile */
@media (max-width: 1024px) {
    #covid-popup {
        display: none !important;
    }
}
/* end of code to hide banner on mobile */

Step 4. Save and verify the custom script

When complete, click the Save button.

Note: Changes to a custom script require you to authenticate your access. Click the "Send Token Now" button and an email will be sent to you with a security token. Copy the token and paste it into the verification field. Click the Verify Token button and your changes can be saved. The token will last two hours in case you need to change multiple scripts.

Final Result