how to change font size under product card (Dawn Theme)

Shopify Discussion

Topic summary

Goal: change font size under product cards in the Dawn theme.

What was tried:

  • A collaborator requested the store URL/password to inspect.
  • One helper suggested adding custom code in theme.liquid (details not visible in the thread). The original poster later thanked them, implying partial success.
  • A concrete solution was shared: edit Online Store > Themes > Edit code > Assets (base.css/theme.css) and add CSS to adjust product card title and price sizes (e.g., selectors like .card .card-information h3.card-information__text and .price__regular/.price__sale/.price__unit). Screenshots were provided to illustrate issues.

New issues raised:

  • Works on desktop but not on mobile; guidance for mobile-specific adjustments (responsive CSS/breakpoints) was requested and not answered yet.
  • Separate request to change the product title font size on the product page (not the collection card) remains open.
  • A user on Dawn 15.2.0 reported the CSS change “did nothing,” asking about version compatibility/updated selectors.

Status:

  • Partially resolved for some users. Mobile responsiveness, product-page title styling, and Dawn 15.2.0 selector compatibility are still unanswered/ongoing.
Summarized with AI on December 13. AI used: gpt-5.
1

photo_2023-11-29_19-47-53.jpg
photo_2023-11-29_19-47-53.jpg1280×960 194 KB

1 Like
2

Hey @ayushsah

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @ayushsah ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

3 Likes
4

Thank you so much !!

5
  1. Go to your Shopify admin panel.
  2. Click on ‘Online Store’ and then on ‘Themes’.
  3. Find your Dawn theme, click on ‘Actions’, and then select ‘Edit code’.
  4. Open the base.css or theme.css file in the ‘Assets’ folder.
  5. Paste the code snippet at the end of this file.
  6. Click ‘Save’.
/* Change font size for product card titles */
.card .card-information h3.card-information__text {
    font-size: 16px; /* Adjust the size as needed */
}

/* Change font size for product card prices */
.price__regular, .price__sale, .price__unit {
    font-size: 14px; /* Adjust the size as needed */
}

/* Change font size of the product text  */
#MainContent .collection .card__information h3 {
    font-size: 18px; /* Sets the font size to 18 pixels */
}
6

This worked great on desktop but didn’t seem to change on mobile view. Could you advise how to change there?

7

Hi

how can i change the font size on the product title on the products page?

Screenshot 2024-10-08 at 10.09.50 PM.png
Screenshot 2024-10-08 at 10.09.50 PM.png2604×1544 232 KB

8

hi there,

does this work for version 15.2.0 of dawn theme. i tried but nothing happened. please help. i need to reduce the too big font size of product card headline or titles using dawn theme 15.2.0