Solved

Can I relocate and modify the announcement bar in Shopify?

Ivnvu
Excursionist
21 0 3

Hello,

 

I'm trying to figure out how to move the announcement bar bellow my header, is there a way to do this? And, would it be possible to make the announcement bar thicker and increase the font size?

 

All help is appreciated, thanks!  

Accepted Solution (1)
James_FoxEcom
Shopify Partner
75 14 18

This is an accepted solution.

Hi @Ivnvu 

I don't have this theme code so I cannot show you exactly, but I think they do the same as any theme. To move the announcement bar to below the header, please follow the following steps:

- Edit theme code -> Open file layout/theme.liquid

Fine the line where insert the section header and announcement like this: https://take.ms/Coy9s

- Swap the order of these sections like my screenshot: https://take.ms/zg4qA

If your code are different and difficult to find them, please give me a screenshot.

 

Thank you

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.

View solution in original post

Replies 8 (8)

Ivnvu
Excursionist
21 0 3

This is my store: gryningens

Hollaz1099
Visitor
2 0 0

@Ivnvu wrote:

This is my store: gryningens


it nice meeting you , you have a beautiful store but you need more professional settings on it and I have a professional who can help on that but what about your sales also ??

James_FoxEcom
Shopify Partner
75 14 18

Hi @Ivnvu 

It's James from FoxEcom team, could you let me know which theme you are using?

To increase the text size and make it bolder, please use the CSS below

 

 

.announcement-bar .announcement-bar__content .announcement {
  font-size: 18px;
  font-weight: bold;
}

 

James_FoxEcom_0-1669696285194.png

 

 

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
Ivnvu
Excursionist
21 0 3

Hi James, I'm using the Local theme from the theme store 🙂

GemPages
Shopify Partner
5588 1261 1203

Hello @Ivnvu ,

 

It's GemPages support team and glad to support you today.

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1669704199611.png

 

2. Open your theme.liquid theme file


3. Paste the below code before </head>

<style>
#shopify-section-announcement-bar announcement-bar {
  padding: 8px 0;
}
.announcement-bar .announcement-bar__content .announcement {
  font-size: 22px !important;
}
.announcement-bar__localization-form .localization-form .localization-form__item {
  font-size: 16px !important;
}
</style>

 

For example,

GemPages_1-1669704513312.png

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
James_FoxEcom
Shopify Partner
75 14 18

This is an accepted solution.

Hi @Ivnvu 

I don't have this theme code so I cannot show you exactly, but I think they do the same as any theme. To move the announcement bar to below the header, please follow the following steps:

- Edit theme code -> Open file layout/theme.liquid

Fine the line where insert the section header and announcement like this: https://take.ms/Coy9s

- Swap the order of these sections like my screenshot: https://take.ms/zg4qA

If your code are different and difficult to find them, please give me a screenshot.

 

Thank you

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.
Ivnvu
Excursionist
21 0 3

Thank you James, that did the trick!! 😄

James_FoxEcom
Shopify Partner
75 14 18

you are welcome 😄

Find my answer helpful? Give it a like 🙂
Try Foxify now - #1 Conversion-focused page builder.
Proudly made by FoxEcom.com - Smart & hyperefficient front-end solutions for SMBs. Impact sales, costs, and revenue all at once.