Shopify themes, liquid, logos, and UX
Hi
My website is www.naturalcurlsme.com
I want to increase the size of the announcement bar and the font size as well
Solved! Go to the solution
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;
}
}
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:
Best Regards,
Dws_pvt_ltd
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
let me know if this solved your purpose.
Thanks
did not work
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;
}
}
Thank you!
Can you help with the same for Product font size too?
Sure, wait.
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;
}
}
The price is not increasing or becoming bold too the same way
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 -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025