Customizing Font and Font size for product title/price in a collection

Solved
Ljkeos
Excursionist
26 0 10

Hi,

I am trying to edit the font and font size of product titles and product prices in a collection.

I am using the Debut theme.

Screen Shot 2021-06-15 at 12.50.22 PM.png

After a quick google, I found out how to change the product title font size in a collection by placing this segment in assets/theme.css :

#shopify-section-collection .product-card__title, #shopify-section-collection-template  .product-card__title {
    font-size: 16px !important;
}

Could someone help me with the proper code needed to edit font type and font size of both the product title and price on the collection page?

0 Likes
bdowling
Explorer
66 13 34

Hi, I have a solution. In the the "theme.scss.liquid" file in the assets folder go to line 6471 and find this chunk of code:

 

 

 

.product-card__title {
  border-bottom: 1px solid transparent;
  display: inline;
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header); }

 

 

 

To change font size:

add this line right before the line with "border-bottom" (you can change 16 to whatever is best for your site):

 

 

 

.product-card__title {
  font-size:16px;

 

 

 

so that chunk would look like this:

 

 

.product-card__title {
  font-size:  16px;
  border-bottom: 1px solid transparent;
  display: inline;
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header); }

 

 

To customize font type and weight:

Substitute any of the the "var(--font...-header)" for your choice of font family, font-style, or font weight.

I hope this helps. Good luck

 

Ljkeos
Excursionist
26 0 10

Thank you for this explanation; would you mind giving me an example of what you are talking about with the var(--font...-header) font style/family/weight?

Also, the code helps with changing the product title size; however, I would still like to change the font size and font of the price. Is there a fix for this?

Thanks again.

0 Likes
bdowling
Explorer
66 13 34

This is an accepted solution.

Hi, there's a lot of options font-wise. This link shows some ways to change the font using font weight/family/style. Use that info to replace "var..." with the font style/family/weight you want. 

As for price. Near line 5328 of the "theme.scss.liquid", find this chunk:

 

 

 

 

.price-item {
  color: var(--color-body-text);
  font-weight: var(--font-weight-body--bolder); }

.price-item--sale {
  color: var(--color-sale-text); }

 

 

 

 

Now, like you would with the product_title change the font-size and style/weight/family... whatever you want.

I hope this helps. Good luck 

 

EDIT: by "var..."

I'm talking about this line and the similar ones:

 

  font-weight: var(--font-weight-body--bolder); }

 

replace the "var..." here with "normal" (the link explains more) to make it non-bold like this:

 

  font-weight: normal; }

 

0 Likes
Ljkeos
Excursionist
26 0 10

Awesome! That website is really helpful--thanks for all the help!

0 Likes