Solved

Announcement bar customization in Debut theme

GH_Harry_Nguyen
Tourist
5 0 4

Hi,

I wonder if we can make text in the announcement bar bold and underline. I have no knowledge in html or css but it would be great if there are specific instruction steps.

Thanks

GH_Harry_Nguyen_0-1624859725414.png

 

Accepted Solution (1)
Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI,
 
In your customize screen add the text like below in the text box of announcement bar.
 
COMBO TIẾT KIỆM <strong><u>SALE UP TO 35%</u><strong>
 
After adding this do one change in your header section file. Follow the below steps:
 
1. Go to shopify admin -> Click on Online Store -> click on actin button of theme -> Click on Edit code
2. Open the 'header.liquid' file
3. Search for the 'section.settings.message_text' this text
4. After search you can find the code looks like below:
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
Update this code to like below:
<p class="announcement-bar__message">{{ section.settings.message_text }}</p>
 
Hope this will help you.

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@GH_Harry_Nguyen 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GH_Harry_Nguyen
Tourist
5 0 4

This is my URL: https://gpurely.vn/

Akibhusen
Shopify Partner
715 121 147

This is an accepted solution.

HI,
 
In your customize screen add the text like below in the text box of announcement bar.
 
COMBO TIẾT KIỆM <strong><u>SALE UP TO 35%</u><strong>
 
After adding this do one change in your header section file. Follow the below steps:
 
1. Go to shopify admin -> Click on Online Store -> click on actin button of theme -> Click on Edit code
2. Open the 'header.liquid' file
3. Search for the 'section.settings.message_text' this text
4. After search you can find the code looks like below:
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
Update this code to like below:
<p class="announcement-bar__message">{{ section.settings.message_text }}</p>
 
Hope this will help you.
KetanKumar
Shopify Partner
36839 3635 11972

@GH_Harry_Nguyen 

can you please share check your theme setting rich text its allow bold view

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

SagarikaDas
Shopify Partner
246 24 93

Hello @GH_Harry_Nguyen,

Hope you are well.

You can apply the formatting on the Announcement bar text but isn't possible for partial text. It will apply to the entire message. eg, COMBO SAVE UP TO 35%

  1. Go to Online Store > Themes.
  2. Click on the "Actions" of your current theme and select "Edit Code".
  3. Open Assets > theme.css
  4. Search for ".announcement-bar__message"
  5. Paste the below code in .announcement-bar__message

 

text-decoration: underline;
font-weight: bold;

 

And save the changes.

SagarikaDas_0-1624862419309.png

This will be the output:

SagarikaDas_1-1624862487466.png

 

 

 

 

► If the answer solve your issue please ✔ Accept it and hit like

► Need help with theme customization, speed optimization, fixing bugs?


► Let's connect: Mail me Or Skype me: live:.cid.2667d78144ce77ad
Yasmin70
Excursionist
34 1 14

This worked a treat, thank you.