Shopify's announcement bar is a familiar feature (section) in many themes, including Dawn and Craft. However, turning the announcement bar on or off can cause the following issues:
1. There is a gap between the main menu and the submenu.
*If there are elements positioned using position:sticky, absolute, or fixed, you will need to change the top value according to whether the announcement bar is displayed or hidden.
2. The next content is visible underneath the main image, which was displayed exactly on the screen.
*The display area of the main visual must be set according to whether the announcement bar is displayed or not. For example, height:calc(100vh - announcement bar height in px (if displayed) - header height in px)
In this article, we will introduce a trick to deal with the above-mentioned content misalignment by using JavaScript to determine whether Shopify's announcement bar is visible or hidden and adding a class to the <body> tag.
If the notification bar is displayed, add a class to the <body> tag.
Let's start with the conclusion.
Add the following JavaScript code just before the </body> tag in the layout/theme.liquid file.
<script>
if (document.querySelector('.announcement-bar-section') !== null) {
document.body.classList.add('announcement-bar-true');
}
</script> The <body> tag will have the class announcement-bar-true only when the announcement bar is displayed, making it possible to adjust styles using CSS.
* Operation was verified using Dawn and Craft version 8.0.1.
The CSS is specified as follows:
*The element part is optional.
element {
告知バー非表示時のスタイル
}
.announcement-bar-true element {
告知バー表示時のスタイル
}
Support for themes with different specifications
Depending on the theme and version, you may need to modify some of the JavaScript code.
In case the code introduced above doesn't work, we'll provide a quick explanation of how JavaScript works.
*The screen used for the explanation is from Dawn version 8.0.1.
1. Notification bar display settings
First, let's check whether the notification bar is displayed.
If the notification bar is currently hidden, make the following settings in the administration screen. (If the notification bar is already displayed, proceed to "2. Check the class name.")
Go to your Shopify admin page > Sales Channels > Online Store and click the "Customize" button at the bottom right of the screen.
1. Click the eye icon in the "Notification Bar" section on the left side of the screen.
2. Click the "Save" button in the upper right corner of the screen.
2. Check the class name
Make sure your browser displays the announcement bar on your store page.
Let's take a look at the source code for the notification bar using developer tools or similar.
There is an element with a class called "announcement-bar-section".
Make a note of the class name so you don't forget it.
3. Hide notification bar
Now let's check what happens when the notification bar is hidden.
1. On the same management screen as before, click the eye mark in the "Notification Bar" section on the left side of the screen,
2. Click the "Save" button in the upper right corner of the screen.
4. Rewriting parameters
Verify in your browser that the announcement bar on your store page is gone.
Let's look at the source code using developer tools.
The element with the class ``announcement-bar-section'' that existed in 2 has been removed.
Using this "class name of the element that appears only when the announcement bar is displayed", a JavaScript judgment is made using a conditional if statement.
<script>
if (document.querySelector('.xxxxx') !== null) {
document.body.classList.add('announcement-bar-true');
}
</script>By replacing the xxxxx part with the "class name of an element that appears only when the announcement bar is displayed", it is possible to support themes with different specifications.
In Dawn version 7.0.1, regardless of whether the announcement bar was displayed or not, there was an element with the id "shopify-section-announcement-bar", and as a child element of this, there was an element with the class "announcement-bar" that only appeared when the announcement bar was displayed.
Shopify Tips: How to Prevent Content Misalignment in the Announcement Bar
In this article, we will explain the issues that occur when switching on or off the Shopify announcement bar.
- There is a gap between the main menu and the sub menu.
- The next content is visible underneath the main image, which was displayed exactly on the screen.
We have introduced ways to solve these problems using JavaScript and CSS.
I hope this helps you in building your Shopify website.
*Information current as of April 2023. Due to theme updates or changes to Shopify specifications, it may not be possible to set it up exactly as described in the article.
