How can I customize the announcement bar in Debut theme?

Hello Team,

I would like to make some changes to my announcement bar. I’m using debut theme with custom coded announcement bar. I need to add two sentences with a gap. Currently its like this:

FREE SHIPPING 10% DISCOUNT FOR ALL ORDERS ABOVE 1499.

I WANT TO MAKE IT AS:

FREE SHIPPING <…space…> 10% DISCOUNT FOR ALL ORDERS ABOVE 1499.

Please help me if anybody have a solution for this.

Thank you.

Hey @cygniz .

Thanks for reaching out.

I appreciate the context that you have shared as that is helpful! Looking into the options for the Debut theme, it looks like by default our code for the announcement bar will display only a single space between the words used. In this case, it would require a change of coding in order to allow additional space to be added. With that being said, since the Debut theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the changes on your behalf.

If you are interested in using your design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on your online store with a Support Advisor.

Alternatively, we can look to use a third-party application that can assist with the customization of the announcement bar. I went ahead and added a couple of recommendations below, feel free to check them out:

Let me know if you have any additional questions.

@cygniz You can try adding the ASCII character code for a Non-breaking space-- * *

FREE SHIPPING__*    *__ 10% DISCOUNT FOR ALL ORDERS ABOVE 1499.

should add 4 spaces between FREE SHIPPING and 10%

Not the best solution but I think it works.

@Alan15

Hey,

thanks for your reply.

Its not working.

You’re right. I think you also need to remove the escape filter from the code. In the header.liquid file in the Sections folder, look for the the code for the announcement bar:

{{ section.settings.message_text | escape }}

remove | escape

{{ section.settings.message_text }}

Maybe your code is already customized, so it might look a bit different.

its not working.

I’m not sure then. That works for me on a sample Debut theme. Maybe someone else out there has a solution.

@cygniz
Use the Given App or it need coding knowledge to make the Announcement bar.
As you Showed We can help you kindly Share your Store url. So that i will Help you.

Thank you.