Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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.