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

Store Design
, ,

Topic summary

Goal: Decrease font sizes for product titles and prices in the home page’s collection grid (Shopify, Dawn theme).

Solutions offered:

  • Add custom CSS in theme.liquid (Theme > Edit code), either before or above , targeting product card selectors (e.g., .card__heading a, .price .price-item, .card-information>.price) and using a media query for desktop (min-width: 750px) to set smaller font-size values.
  • Use the “Customize” editor: open the Featured Collection section and add CSS in the section’s Custom CSS field (e.g., targeting slider-component .card__heading and .price-item) to adjust font-size and line-height.

Technical notes:

  • theme.liquid: the main layout file of the Shopify theme.
  • CSS media query (min-width: 750px): applies styles on desktop/tablet widths.
  • Selectors target product card title and price elements in Dawn.
  • Screenshots show before/after results and section locations; they help visualize outcomes.

Outcome and follow-up:

  • The solution from the section-level Custom CSS approach worked for the requester.
  • New requests: limit product titles to 2 lines (desktop/mobile), place discount and original price on the same row (desktop) with original price in green, and on mobile stack prices (discount above original) with bigger discount font.
  • No responses yet to the new styling requests; discussion remains open.
Summarized with AI on December 21. AI used: gpt-5.
7

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/

IMPROVE FEATURE COLLECTION DISPLAY.png
IMPROVE FEATURE COLLECTION DISPLAY.png1839×881 563 KB