Announcement Bar Installation

 

These are instructions are made with the Debut default template. The following directions will include the snippets you need to set up your announcement bar. 

  1. Go into sections and add a new section. Name this section announcement-bar.liquid 

  2. Create the schema that will represent the settings for the announcement bar. The following can be copy/pasted:

    {% schema %}
    {
    "name": "Announcement bar",
    "settings": [
    {
    "type": "header",
    "content": "General"
    },
    {
    "type": "checkbox",
    "id": "message",
    "label": "Show announcement",
    "default": false
    },
    {
    "type": "header",
    "content": "Content"
    },
    {
    "type": "text",
    "id": "message_text",
    "label": "Text",
    "default": "Announce something here"
    },
    {
    "type": "header",
    "content": "Fonts and colors"
    },
    {
    "type": "color",
    "id": "color_bg",
    "label": "Background color",
    "default": "#333333"
    },
    {
    "type": "color",
    "id": "color_text",
    "label": "Text color",
    "default": "#ffffff"
    },
    {
    "type": "color",
    "id": "color_text_hover",
    "label": "Link hover color",
    "default": "#eeeeee"
    },
    {
    "type": "range",
    "id": "font_size",
    "min": 8,
    "max": 36,
    "step": 1,
    "unit": "px",
    "label": "Font size",
    "default": 14
    }
    ]
    }
    {% endschema %}
  3. The next lines of code will help configure the announcement bar and even style the announcement bar. Add this above your schema.

{% if section.settings.message %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
<style>
.announcement-bar {
    background-color: {{ section.settings.color_bg }};
    text-align:center;
    {% if section.settings.header_padding > 0 %}
        position:absolute;
        top: -{{ section.settings.header_padding }}px !important;
        left:0;
       width:100%;
       z-index:9;
    {% endif %}
}
.announcement-bar p {
    padding:10px 0;
    font-size: {{ section.settings.font_size }}px;
    margin:0 !important;
}
.announcement-bar__message,
.announcement-bar--link {
    color: {{ section.settings.color_text }};
}
.announcement-bar--link:hover,
.announcement-bar--link:hover .announcement-bar__message {
    color: {{ section.settings.color_text_hover }} !important;
}
body {
    position:relative;
    top: {{ section.settings.header_padding }}px !important;
}
</style>
{% if section.settings.message_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
{% endif %}
{% assign announcement_message = section.settings.message_text %}
<p class="announcement-bar__message">{{ announcement_message }}</p>
{% if section.settings.message_link == blank %}
</div>
{% else %}
</a>
{% endif %}
{% endif %}
{% endif %}
<style>
</style>
4. Create the close button div. Copy/paste the following div and place it under the announcement message. 

<p class="announcement-bar__message">{{ announcement_message }}</p>

<div class=“promo_banner x"> </div>

5. Go into theme.liquid and add the section 'announcement bar' just above 'header'.

{%section 'announcement-bar'%}

{%section 'header'%}

6. Create a new asset. Name it styles.scss.liquid 

7. Add styles.scss.liquid into the theme.liquid file's head 

{{ 'styles.scss.css' | asset_url | stylesheet_tag }}

8. Go back into styles.scss.liquid file. Copy/paste the following code to create an X button:

.x {
display: block;
position: absolute;
right: 0;
top: 0;
width: 32px;
height: 32px;
transition: transform .25s ease-in-out;
}
.x:hover {
transform: rotate(180deg);
}
.x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(45deg);
transform-origin: center;
}
.x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(-45deg);
transform-origin: center;

9. Next we will create the javascript to close the announcement bar. You will first need to add the jquery library script into your theme.liquid head. 

<script src=“//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

10. Add the following script before the end of the closing body tag. You can delete the code the is commented. 

<script>
$( document ).ready(function() {

if ($('.announcement-bar').length){
//var banner = Cookies.get('banner');

//if (banner == 'dismiss') {
//$('body').addClass('promo_banner-show');
//}

$( '.x' ).click(function() {
        $(".announcement-bar").remove();
        $("body").addClass("no-announcement-bar");
//Cookies.set('banner', 'dismiss', { expires: 30 });
});
}
});
</script>

11. Ensure your close button div in your announcement-bar.liquid file has the following classes along with the"x" class:

<div class="promo_banner promo_banner-close x"> </div>

12. Add the following css into your styles.scss.liquid file:

.promo_banner-close {
position: absolute;
top: 0px;
right: 0;
display: block;
overflow: visible;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
border: 0;
outline: 0;
background: transparent;
z-index: 1000
}

.promo_banner .promo_banner-close:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 20px;
line-height: 30px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 35px;
content: "\00d7";
text-align: center;
}

@media screen and (max-width: 798px) {
.header-position {
position: fixed;
width: 100%;
z-index: 9;
top: 0;
}

body.no-announcement-bar, body.promo_banner-show {
padding-top: 0;
}


#header.mobile_nav-fixed--true {
position: relative!important;
top: 0;
}
}

All done! Ensure that your close button is working. 


Subscribe