Shopify themes, liquid, logos, and UX
Hello. I am trying to do something that I think should be pretty simple, but Shopify support is unable to help.
The first screenshot attached shows the details that can be adjusted in my Announcement Bar. Please note the "sample" code in the "Custom CSS" section toward the bottom of the screenshot, which specifies "h2" as a "selector".
When I try to enter the same text using h2 as my selector, I get the message as shown in the second screenshot -- i.e., it is not a valid selector for this section.
I have looked at developer tools for my page, and all that is identified in that code is "section" information, which is not a valid identifier (see screenshot 3).
Question: How do I identify the selector for this section of my page, so that I can enter it in the Custom CSS space of the page?
Thank you for any help that anyone can provide. -Jim
Solved! Go to the solution
This is an accepted solution.
Hi Jim
Welcome to the community.
Note that h2 is just a placeholder example of what you can use but it is not actually used on that section. IF you type . you will see all available classes and # available id's. But to identify what to add I suggest open your homepage but not in admin. So on homepage right click on More that pokemon text and choose Inspect ( element). You will see the code on the screenshot and from there you can try to add following code in Custom CSS:
.announcement-bar__message {
font size: 100px;
}
or this it would also work just depends what you want to target
.h5 {
font size: 100px;
}
So .h5 as a class not a element.
You can check some basics on dev tools here
https://developer.chrome.com/docs/devtools/overview
This is an accepted solution.
Hi Jim
Welcome to the community.
Note that h2 is just a placeholder example of what you can use but it is not actually used on that section. IF you type . you will see all available classes and # available id's. But to identify what to add I suggest open your homepage but not in admin. So on homepage right click on More that pokemon text and choose Inspect ( element). You will see the code on the screenshot and from there you can try to add following code in Custom CSS:
.announcement-bar__message {
font size: 100px;
}
or this it would also work just depends what you want to target
.h5 {
font size: 100px;
}
So .h5 as a class not a element.
You can check some basics on dev tools here
https://developer.chrome.com/docs/devtools/overview
Thank you so very much! This is what worked for me!
.h5 {
font-size: 40px;
}
My syntax errors included:
- Not putting a period before "h5";
- Capitalizing "PX" instead of entering it in lower case; and
- Not putting a dash between "font" and "size".
Thanks again for pointing me in the right direction! 😃 -Jim
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025