Dawn Theme Font Size and Color Change product cart items

[alyhz]

https://imanethelabel.com/

how can I change the font size of the title and how can I change the price font size and color as well? on the collection page items as well as on the homepage section? see images below

[CafeDelMar]

Hi @alyhz.

I don't think Dawn has those settings built-in, so a workaround would be to overwrite the values with additional CSS rules. Do you already know what font size and color you'd like to change to?

[alyhz]

Hi! I can add the code, I want the color for the price to be grey and the font size around 7px, for the title it should be 9px

[CafeDelMar]

Here's how to do that:

• Navigate to Online Store > Three dots > Edit code
• Find the theme.liquid file
• Paste the code below right before the closing </body> tag
• Save and hard-refresh the storefront

<style>
	h3.card__heading.h5 {
	    font-size: 9px!important;
	}

	span.price-item.price-item--regular {
	    color: #737373!important;
	    font-size: 7px!important;
	}
</style>

The above code will work for both, collections and the homepage. However, you'd need to readjust the values as 9 and 7px fonts are incredibly small.

Here's how it looks:

 

[alyhz]

hi, thank you very much - this was helpful but this is also changing the font size of the price on the product page (which I do not want) can I somehow exclude that?

[CafeDelMar · Accepted solution]

@alyhz, let's try this one instead

<style>
	h3.card__heading.h5 {
	    font-size: 9px!important;
	}

	span.price-item.price-item--regular:not(.product *) {
	    color: #737373!important;
	    font-size: 7px!important;
	}
</style>

[alyhz]

thank you!!

[CafeDelMar]

Anytime! Glad I could help! 🙂