Solved

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

Ljkeos
Excursionist
31 0 13

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?

Accepted Solution (1)
bdowling
Pathfinder
80 13 45

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; }

 

View solution in original post

Replies 4 (4)

bdowling
Pathfinder
80 13 45

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
31 0 13

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.

bdowling
Pathfinder
80 13 45

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; }

 

Ljkeos
Excursionist
31 0 13

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