How to increase title of product of the grid for the Craft theme?

Shopify Discussion

Topic summary

A user seeks to increase the font size of product titles in the grid layout for Shopify’s Craft theme.

Two solutions provided:

  1. CSS modification approach: Add custom code to the component-card.css file by targeting the .card__heading class and setting font-size: 2rem;

  2. Theme editor approach (no custom code): Navigate to the theme’s code editor, locate the card-product.liquid file, search for the card__heading class, and change the heading tag from h6 to h2 in approximately 2 locations to increase title size.

Resolution: The original poster confirmed one of the solutions worked successfully.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

thanks a lot in advance guys!!

Screenshot 2024-02-22 at 12.02.59 AM.png
Screenshot 2024-02-22 at 12.02.59 AM.png2928×1332 502 KB

2

Do you mean this by making the text bigger?

3

Hi @nella1810
You can try following the steps to achieve your result
Go to online store → Edit code-> component-card.css file
And add these bellow code

.card__heading {
    font-size: 2rem;
}

Result :

BrainStation23_0-1708585899269.png
BrainStation23_0-1708585899269.png1587×645 161 KB

4

Hello @nella1810 ,

I understand you are looking to increase the size of the title in the Collection/ Product Listing page.

Please follow the below mentioned steps to implement this change. [In this you don’t need to add any custom code]

  1. Go to Online Store → Themes → Click Three dots → Click Edit Code https://prnt.sc/DC53_dEPIyzL

  2. Next search for " card-product.liquid " file and open it https://prnt.sc/gsQ8YTppcrtL

  3. Now, press Ctrl+F and search for " card__heading " class https://prnt.sc/D70nyIJy3fAz

There are several sections in which this class will appear.

  1. Next you have to change the " h6 " with " h2 " to increase the size of the product title and save. https://prnt.sc/vqXMDZa_tdXs , https://prnt.sc/wzFK3uXNuT5n

There will be probably 2 places where you have to implement " h2 "

Output -:

Anshul_arora_0-1708589794747.png
Anshul_arora_0-1708589794747.png1491×637 80.3 KB

I hope this helps.

Please let me know if you have any query.

Thank you.

5

It helped! thank you for taking the time!!