Impulse Theme - Announcement Bar Size

Topic summary

A user seeks to increase both the size and font of the announcement bar on their Shopify store using the Impulse theme.

Solutions Provided:

Multiple developers offered CSS code snippets to be added to theme files (base.css, theme.scss.liquid, or theme.liquid):

  • Initial solutions targeted desktop views using @media only screen and (min-width: 769px)
  • One approach increases font size for .announcement-bar span.announcement-link-text
  • Another solution wraps CSS in <style> tags within theme.liquid before the </body> tag
  • Screenshots confirm successful implementation

Extended Requests:

The original poster then requested:

  1. Similar font size increases for product titles (solution provided targeting .product-section .product-single__title)
  2. Making product prices larger and bold (remains unresolved)
  3. Another user asked how to apply the announcement bar changes to mobile devices (unanswered)

Status: Partially resolved—announcement bar sizing works on desktop, but mobile implementation and product price styling remain open questions.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.

Hi

My website is www.naturalcurlsme.com

I want to increase the size of the announcement bar and the font size as well

Hello @naturalcurlsme

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save

OR

  1. Go to Online Store

  2. Edit Code

  3. Find your section announcement.liquid

  4. Add the following css in the bottom of the file add css

@media only screen and (min-width: 769px) {
    .announcement-bar span.announcement-link-text {
        font-size: 16px;
    }
}

If the Font size increases then the automatic height increases. You cannot add any static height.

Output:

Best Regards,
Dws_pvt_ltd

Hello @naturalcurlsme
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.CSS----> line number 10827

@media only screen and (min-width: 769px) {
  .announcement-bar {
    font-size: 20px;
	height: 27px;
  }
}

and the result will be

let me know if this solved your purpose.
Thanks

did not work

Hello @naturalcurlsme

Please follow these steps and check it.

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 769px) {
    .announcement-bar span.announcement-link-text {
        font-size: 20px;
    }
}

Hello @naturalcurlsme ,

I understand you are looking to increase the size of the announcement bar and font-size.

Please add the below mentioned code at the bottom of the theme.liquid file before tag and save.


Output -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

Thank you!

Can you help with the same for Product font size too?

Sure, wait.

Hello @naturalcurlsme

Please follow these steps and check it.

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 769px) {
    .product-section .product-single__title {
      font-size: 32px;
    }
}

The price is not increasing or becoming bold too the same way

Hello ! That worked perfectly for me on the Impulse theme. Is there anyway to have the same thing happen on mobile ?