Solved

Announcement bar font weight not changing

Airri
Excursionist
23 0 4

Want to change only the announcement bar font and weight. 

 

Font: source sans pro

Weight: regular

 

This is what I've added but the weight is still bold, it wont change to regular.

 

p.announcement-bar__message.h5 {
font-family: "Source Sans Pro", sans-serif;
font-weight: normal; /* regular */
}

 

airrishop.myshopify.com

Accepted Solution (1)
techlyser_web
Shopify Partner
1683 307 324

This is an accepted solution.

yes you can.

p.announcement-bar__message.h5 span {
     font-weight: 400 !important;
     font-family: sans-serif !important;
 }
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 8 (8)

techlyser_web
Shopify Partner
1683 307 324

Hello @Airri 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  p.announcement-bar__message.h5 span {
     font-weight: 400 !important;
     font-family: sans-serif !important;
 }
</style>

techlyser_web_0-1716622394047.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Airri
Excursionist
23 0 4

This works but is there anyway to have this code added in the Custom CSS area of the section instead of the theme.liquid file. Would like to keep it here if possible as to not forget if I ever need to adjust it. 

Screenshot 2024-05-25 024316.png

techlyser_web
Shopify Partner
1683 307 324

This is an accepted solution.

yes you can.

p.announcement-bar__message.h5 span {
     font-weight: 400 !important;
     font-family: sans-serif !important;
 }
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Airri
Excursionist
23 0 4

Awesome! thanks!

devcoders
Shopify Partner
190 31 48

Hi @Airri 

Go to Online Store, then Theme, and click on Edit code.
Locate the file assets/base, and paste the code provided below at the end of the file.

 

.announcement-bar__message.h5 {
font-family: "Source Sans Pro", sans-serif;
font-weight: normal; /* regular */
font-size: 12px;
}

devcoders_0-1716622983808.png

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Airri
Excursionist
23 0 4

Didn't work still bold.

devcoders
Shopify Partner
190 31 48

Go to Online Store, then Theme, and click on Edit code.
Locate the file assets/plain-jane.css, and paste the code provided above at the top of the file.

 

.announcement-bar__message.h5 {
font-family: "Source Sans Pro", sans-serif;
font-weight: normal!important; /* regular */
font-size: 12px!important;
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

BSSCommerce-HDL
Shopify Expert
733 244 255

Hi @Airri

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

BSSTechVenture_0-1716623711761.png

 

 

 

.announcement-bar p.announcement-bar__message.h5 {
    font-weight: 400 !important;
}

 

 

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency