Shopify Development

An announcement banner is a great way to alert your customers to sales or exciting promotional offers. Today I’m going to show you how to create your own with a simple animation to improve the visibility and style. From here you can add images, countdowns to deal expiration or any other custom behavior you would like.

Github code: https://github.com/ndrishinski/blogs/blob/master/custom-announcement-banner/custom-announcement-banner.liquid

Prefer Video?

Enjoy, otherwise read on!

Creating the Custom Announcement Banner section

First we need to create a file in our sections directory. I’ll call it custom-announcement-banner.liquid. And paste this code:

<div class="unique-container">
  <p>{{ section.settings.headline }}</p>
  <p class="addition-info">{{ section.settings.sub_heading }}{% if section.settings.linked_text %}<span>{{ section.settings.linked_text }}</span>{% endif %}</p>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.unique-container').onclick = function() {
      window.location.href = "{{ section.settings.custom_url}}"
    }
  })
</script>

{% schema %}
  {
    "name": "Custom Announcement Bar",
    "settings": [
      {
        "type": "text",
        "id": "headline",
        "label": "Headline Text"
      },
      {
        "type": "text",
        "id": "sub_heading",
        "label": "Sub headline Text"
      },
      {
        "type": "text",
        "id": "linked_text",
        "label": "Linked Text"
      },
      {
        "type": "text",
        "id": "custom_url",
        "label": "URL to Navigate On Click"
      }
    ],
      "presets": [
    {
      "name": "Custom Announcement bar"
    }
  ]
  }
{% endschema %}

All we are doing is defining our schema with a couple of inputs for the heading, subheading and URL to navigate to on a click. The JavaScript code simply adds an event listener for the click to navigate. Simple enough! Let’s add some CSS now to make our banner look much better and include an animation to make our subheading show underneath our heading.

Creating our section CSS

You can add the following styles to a separate stylesheet if you’d like, but I am going to paste this above our HTML in a <style> tag like so:

<style>
  /* Add a unique identifier to encapsulate the CSS */
  .unique-container {
      height: 30px;
      background: linear-gradient(to right,#d9c8eb, #7e45b6, #d9c8eb);
      width: 100%;
      transition: height .7s;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
      color: #fff;
    }
    
    .addition-info {
      display: none;
      opacity: 0;
      font-size: 14px;
    }
    
    span {
      text-decoration: underline;
    }
    
    p {
      margin: 1px;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
  
    50% {
      opacity: .5;
    }
  
    100% {
      opacity: 1;
    }
  }
  .unique-container:hover {
    height: 70px;
    cursor: pointer;
    .addition-info {
      animation: fadeIn 1s;
      display: block;
      animation-fill-mode: both;
    }
  }
</style>

Here we are defining our basic styles as well as creating an animation to enlarge the height and show our subheading along with the link underlined text.

Add data in the Theme Customizer

Now with our code in place, we can add our new section in the theme customizer. Simply look for the name ‘Custom Announcement Bar’ like so:

And then add the data in the text fields.

Conclusion

Now with everything saved, we should see an animated, custom Announcement Banner with only a few lines of code! I hope you enjoyed and stay tuned for more Shopify related content.