Trying to identify a "Selector"

Solved

Trying to identify a "Selector"

MoreThanPokemon
Visitor
2 0 1

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.    -JimScreenshot 2025-05-29 132157.pngScreenshot 2025-05-29 131938.pngScreenshot 2025-05-29 124456.png

Accepted Solution (1)

Laza_Binaery
Shopify Partner
518 85 146

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://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.ht...

https://developer.chrome.com/docs/devtools/overview

Kind regards
Laza
www.binaery.com

View solution in original post

Replies 2 (2)

Laza_Binaery
Shopify Partner
518 85 146

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://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.ht...

https://developer.chrome.com/docs/devtools/overview

Kind regards
Laza
www.binaery.com
MoreThanPokemon
Visitor
2 0 1

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