Decrease the font size of product title and price font size under collection

[clementjaw001]

I want to decrease the font size for my product title and price under collection for display on the home page. Can anyone have the experience to make these changes?

[ProtoMan44]

@clementjaw001 Hey, thanks for posting here.
 can you please share the link to inspect it, thanks.

[niraj_patel]

Hello @clementjaw001 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
   .so-homepage .section-template--18230638575866__featured_collection_YqTcxK .card--standard > .card__content .card__information .card__heading a {
       font-size: 15px !important; /*adjust according to you*/
    }
     .price .price-item {
        font-size: 14px !important; /*adjust according to you*/
     }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL]

Hi @clementjaw001, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection .card__heading a {
    font-size: 14px !important;
}

.collection .price .price__regular {
    font-size: 16px !important;
}

.collection .price .price__sale {
    font-size: 14px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Vinsinfo · Accepted solution]

@clementjaw001 

Please find the below steps to reduce font size of product title and price in dawm theme. Let me know whether it is helpful for you.

1. From admin, Go to "Online Store" -> "Themes"

2. Click "Customize" button in the current theme.

3. In "Home page", search for the respective "Featured collection" section like in the below attached screenshot and click to edit.

4. Search for the "Custom CSS" field at the bottom of the section and add the below code to the field like in the below attached screenshot.

slider-component .card__heading .full-unstyled-link, slider-component .card-wrapper .price-item {
    font-size: 15px;
    line-height: 19px;
}

FYI: If you want to still decrease the font-size, you can modify the font-size value as per your need.

The final result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[clementjaw001]

Hi Vinsinfo,

Thanks,  it work, that's awesome!

I wonder if you can also advise on how to make the product title just display 2 rows in desktop and mobile view? Just like the screenshot for this store below? (This store only allows product titles to display 1 row, but for me, I prefer 2 rows.),  I also want the discount price and original price displayed in the same row as this store under desktop view. The color of the original price can be changed to green. 

Under mobile view, the after discounted price on top of the original price, and the font size is slightly bigger than the original price font size.

Just like this store  mobile view.

https://trendingcustom.com/

[steve_michael2]

Hi @clementjaw001 , I hope you are doing well.

1. Go to Online Store -> Theme -> Edit code.
2. Find and open your theme.liquid file
3. In theme.liquid, paste the below code before </body> 

@media screen and (min-width: 750px) {
    .so-homepage .section-template--18230638575866__featured_collection_YqTcxK .card--standard > .card__content .card__information .card__heading a {
        font-size: 15px !important;
    }


.card-information>.price {
    font-size: 15px !important;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!