How to set up the Announcement Bar

 

 

Step 1: In the backend of your site, navigate to the ‘My Site’ tab and select ‘Theme’ in the dropdown menu.

Step 2: On the menu, select the option for ‘Header’. You'll be taken to the ‘Header’ editor.

Step 3: In the ‘Header’ editor, scroll down to the option labeled ‘Show Announcement Bar’. By default the ‘Announcement Bar’ is turned off. Simply select ‘Show’, and a bar will appear at the top of your site.

Step 4: Four options appear: ‘Announcement Bar Text’, ‘Background Color’, ‘Text Color’, ‘Link Color’. Start by making color choices. Good design practice recommends contrasting colors for any text, but specifically in your ‘Announcement Bar’, you’ll want your text to really pop against the background.

Step 5: The real magic happens in the ‘Announcement Bar Text’. There are several ways to use this field. The ‘Announcement Bar Text’ accepts all different types of html tags which helps with customization.

  • Basic Text Line - Simply write the message you want into the field provided (i.e.: Shipping Webinar Now Available!)
  • HTML Link Tag - Look up the URL you want to use (Example: https://grazecart.com/#enroll) then use code to make a piece of text into a link. Example Code: <a href="https://grazecart.com/#enroll">Shipping Webinar Now Available</a> This will allow your customers to select the text and it will send them to the link you have inserted.
  • HTML Adjust Style - Making your text bigger can be helpful with a banner. To do this you will want to add a style modification on the code within the initial “a” tag. By changing the number beside “px” you will either shrink or increase the size of the font in your bar. Example Code: <a style="font-size:24px;" href="https://grazecart.com/#enroll">Shipping Webinar Now Available</a>
Was this article helpful?
0 out of 0 found this helpful