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

Store Design
1

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
Screen Shot 2021-06-15 at 12.50.22 PM.png972Ă—619 54.5 KB

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?

2

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

1 Like
3

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.

4

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

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