How to change font specific places

Solved

How to change font specific places

rebelcopenhagen
Excursionist
24 0 3

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.

 

Udklip1.JPGUdklip2.JPG

Accepted Solution (1)

Betterave-Nina
Tourist
62 7 8

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:

Screenshot_6.png

Screenshot_7.png

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!

➡➡   Easy Embed Code   ⬅⬅ insert CSS/JS/HTML/Liquid code into any store page



Speed Booster App - Improve your store speed in 3 clicks
Need professional help with your Shopify store? DM me, let's talk!
Geeky notes

View solution in original post

Replies 4 (4)

Betterave-Nina
Tourist
62 7 8

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:

Screenshot_6.png

Screenshot_7.png

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!

➡➡   Easy Embed Code   ⬅⬅ insert CSS/JS/HTML/Liquid code into any store page



Speed Booster App - Improve your store speed in 3 clicks
Need professional help with your Shopify store? DM me, let's talk!
Geeky notes
rebelcopenhagen
Excursionist
24 0 3

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

Betterave-Nina
Tourist
62 7 8

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.

➡➡   Easy Embed Code   ⬅⬅ insert CSS/JS/HTML/Liquid code into any store page



Speed Booster App - Improve your store speed in 3 clicks
Need professional help with your Shopify store? DM me, let's talk!
Geeky notes

suyash1
Shopify Partner
11073 1364 1747

@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;}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com