Impulse Theme - Announcement Bar Size

Solved

Impulse Theme - Announcement Bar Size

naturalcurlsme
Tourist
30 0 1

Hi 

My website is www.naturalcurlsme.com

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

Accepted Solution (1)
dws_pvt_ltd
Shopify Partner
25 7 7

This is an accepted solution.

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;
    }
}

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Replies 9 (9)

dws_pvt_ltd
Shopify Partner
25 7 7

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:

dws_pvt_ltd_0-1718704356219.png

 

Best Regards,
Dws_pvt_ltd

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

GTLOfficial
Shopify Partner
260 49 50

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
bv.png

 

let me know if this solved your purpose.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
naturalcurlsme
Tourist
30 0 1

Screenshot 2024-06-18 at 3.16.10 PM.png

 

did not work

dws_pvt_ltd
Shopify Partner
25 7 7

This is an accepted solution.

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;
    }
}

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
naturalcurlsme
Tourist
30 0 1

Thank you!

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

dws_pvt_ltd
Shopify Partner
25 7 7

Sure, wait.

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
dws_pvt_ltd
Shopify Partner
25 7 7

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;
    }
}

dws_pvt_ltd_0-1718710839673.png

 

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
naturalcurlsme
Tourist
30 0 1

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

Anshul_arora
Navigator
450 128 93

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 </body> tag and save.

<style>
.announcement-bar {
padding: 15px !important;
font-size: 15px !important;
}
</style>

Output -:

Anshul_arora_0-1718710421712.png

 


I hope the code helps you.

Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here