Shopify themes, liquid, logos, and UX
Hi.
I feel like I am loosing my mind.
I have had Shopify in so many years and done so many changes but all of the sudden I can't figure out a simple thing as changing the font size/weight.
I want to change to size and weight of the font highlighted with yellow. I have tried every body or heading size/weight in the theme but nothing changes these places. I am 99% sure that I have not changed anything in the code.
The url is https://www.rebelcopenhagen.dk/collections/nyheder
Thank you!
Image 1 is the product page, variant picker and add to cart.
Image 2 is the collection page.
Solved! Go to the solution
This is an accepted solution.
Hi @rebelcopenhagen.
Here's how to change the font sizes.
1: Go to Online Store -> Theme -> Edit code
2: Search file base.css
3: Add the following code to the bottom of the file -> Save
.template-collection .t4s-section-title {
font-size: 42px!important;
}
.template-collection .t4s-product-title,
.template-collection .t4s-product-price {
font-size: 18px!important;
}
.template-product .t4s-swatch__title {
font-size: 18px!important;
.template-product .t4s-product-form__submit {
font-size: 18px!important;
}
.template-product .t4s-btn-icon {
width: 22px!important;
height: 22px!important;
}
If done correctly, the result should be:
The first two blocks correspond to collection page, and the last three adjust the product page titles/cart icon. Feel free to re-adjust the values to your liking.
If you need to change the font itself, you can do so by adding the font: property.
I hope this helps!
This is an accepted solution.
Hi @rebelcopenhagen.
Here's how to change the font sizes.
1: Go to Online Store -> Theme -> Edit code
2: Search file base.css
3: Add the following code to the bottom of the file -> Save
.template-collection .t4s-section-title {
font-size: 42px!important;
}
.template-collection .t4s-product-title,
.template-collection .t4s-product-price {
font-size: 18px!important;
}
.template-product .t4s-swatch__title {
font-size: 18px!important;
.template-product .t4s-product-form__submit {
font-size: 18px!important;
}
.template-product .t4s-btn-icon {
width: 22px!important;
height: 22px!important;
}
If done correctly, the result should be:
The first two blocks correspond to collection page, and the last three adjust the product page titles/cart icon. Feel free to re-adjust the values to your liking.
If you need to change the font itself, you can do so by adding the font: property.
I hope this helps!
Thank you so much, it worked.
But what should I write to change the text weigh on the "Add to Cart" button? The "Form submit" does nothing anywhere as far as I can see
Glad that it worked! The form_submit rule works, I just added it after I took the screenshot. Sorry for the confusion. Once you add it, you'll see that it changes the "Add to cart" font sizing.
@rebelcopenhagen - please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css
.t4s-product-title{font-size: 18px;}
.t4s-product-price{font-size: 18px;}
.t4s-swatch__title{font-size: 18px;}
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