Customize Your Announcement Bar: Quick Announcement Bar Shopify App Review and Tutorial

Customize Your Announcement Bar: Quick Announcement Bar Shopify App Review and Tutorial

  • Once the Quick Announcement Bar by Hexcom is installed on your Shopify store, you'll be automatically redirected to the app dashboard. The dashboard looks simple, plans and pricing in the top navigation, and also FAQ. In case you need assistance from the customer support, well, then you need to do that from their website. No live chat, or direct email, which is a shame for the app this popular. 

  • To create your first announcement bar, choose a discount that would be linked to your collection. 

  • Click on the blue button that says Create New Bar. Two new windows should appear basic templates and premium templates. Premium templates look o beautiful, but the basic ones will do the trick too. Basic templates are:
    • Bold and Clear
    • Shades of Grey
    • Bright and Elegant
    • 🚚 It's Easy 🚚
    • Harvest Gold
    • 🛍Good Mood 🛍
    • Trust Me
    • Fairy Tale and
    • Important Things

Choose one that works well on your theme, and the next step is to preview it.

  • Now on to Content Configuration. The first field is the Name of the campaign, choose one, and since it's only for internal use, you don't have to brainstorm it too much. 

  • The next step is to customize a message. A sample text like "Exclusive Weekend Sale! Get 20% Off Entire Order!" should work.

The Quick Announcement bar app allows you to add a link to your bar. For example, you can add a button that will lead to a page dedicated to the promotional campaign or particular product on sale. You can add a button that will take visitors to the URL or make the entire bar clickable. If you choose the button, remember to edit the button text with something like "Get it now!". Then add the URL to your catalogue page. 

In this step, you can also choose how the URL will be opened. Now you have a display position; you can choose from 

  •  Top bar pushes down the rest of the page
  •  Top bar pushes down the rest of the page (always visible while scrolling)
  •  Top bar overlaps the top of the page
  •  Top bar overlaps the top of the page (always visible while scrolling)
  •  Bottom bar overlaps the bottom of the page (always visible while scrolling)
  •  Manual Placement – Allows manual insertion of the bar's code into your theme.

Background Color is currently white, and you can choose a color that works for you. You can also change the text color and special text. If you decide to use a paid plan, you can add your background image or choose from these beautiful templates. Also, on a paid plan, you can add animation to your bar button.

There are plenty of fonts are available, so you can really customize this bar to fit your theme. In the next section, you can also set the rules for showing your announcement bar.

The last step is to set the Targeting Configuration and display it on all pages and all devices. If you decide to pay for this app, you can add custom CSS or javascript, then click on Save.

Once the bar is created, and you'll be back to the dashboard where you can edit, duplicate or pause our active campaigns. Now it is time to see if this app is working; return to your site and see the result. When you find it, click on the button, and it should be working as promised.

Back to blog