How to Adjust Product Name and Price Font Sizes on Collection Pages (Craft Theme)

Store Design

Topic summary

A user working with Shopify’s Craft theme wants to adjust font sizes on collection pages: increasing product name size for better visibility and decreasing price size for design balance. Screenshots were provided showing the current layout.

Solution Provided:
One respondent offered custom CSS code targeting .product-card__title and .product-card__price classes, with instructions to add the code to the theme’s CSS file via the theme editor (Online Store > Themes > Edit Code > theme.css/styles.css).

Additional Requests:
Two other users asked for the store URL to provide more tailored solutions after reviewing the actual site.

Status: The discussion remains open, awaiting the original poster’s response regarding whether the CSS solution worked or if they’ll share their store URL for further assistance.

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

Hi everyone,

I’m using the Craft theme for my Shopify store and would like to make a couple of adjustments to the collection pages:

  1. Increase the font size of product names to make them more visible.
  2. Reduce the font size of prices to balance the design.

I’ve attached screenshots to give a clearer idea of what I mean.

Does anyone know how to achieve this with custom CSS or settings in the theme editor?

Thank you for your help!

Capture d’écran 2025-01-04 091137.png
Capture d’écran 2025-01-04 091137.png1410×690 167 KB

Capture d’écran 2025-01-04 091156.png
Capture d’écran 2025-01-04 091156.png1488×861 259 KB

2 Likes
2

Hey @FLAMARDA ,

Thanks for sharing the details and screenshots. I understand the changes you’re looking to make, and I can definitely help with that!

To increase the font size of the product names and reduce the font size of the prices on your collection pages, we can add some custom CSS to your theme. Here’s a solution that should give you the desired effect:

  1. Increase Product Name Font Size:

This CSS will make the product names larger:

/* Increase product name font size */
.collection .product-card__title {
    font-size: 20px; /* Adjust the value to suit your design */
}
  1. Reduce Product Price Font Size:

This CSS will reduce the price font size:

/* Reduce product price font size */
.collection .product-card__price {
    font-size: 14px; /* Adjust the value as needed */
}

How to Add Custom CSS to Your Craft Theme:

  1. Online Store

  2. Themes

  3. Edit Code

  4. In the left sidebar, under Assets, find and click on theme.css (or styles.css if that’s what your theme uses).

  5. Scroll to the bottom of the file and paste the custom CSS code I’ve provided above.

This will apply the changes to your collection pages, making the product names larger and the prices smaller, as per your request.

Feel free to adjust the pixel values to suit your design preferences. If you need any further adjustments or have any questions, don’t hesitate to reach out via email. I’m here to assist you![ rajat.shopify@gmail.com ]

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best regards,

Rajat

3

Hi @FLAMARDA ,

Could you please share your store URL so that we can review it and provide you with the best solution?

4

Hello @FLAMARDA

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?