Announcement bar customization in Debut theme

Solved
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

 

KetanKumar
Shopify Partner
20594 2134 7799

@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
0 Likes
GH_Harry_Nguyen
Tourist
5 0 4
Akibhusen
Excursionist
199 37 68

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.
Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
SagarikaDas
Shopify Partner
118 11 38

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

 

 

 

 

Sagarika Das | iCart Team
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
KetanKumar
Shopify Partner
20594 2134 7799

@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
0 Likes