What is the best way to increase the size of a subtitle underneath a product title?

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme wants to increase the font size of a custom subtitle displayed below product titles.

Initial Solution Provided:

  • Add CSS code to base.css or component-product.css
  • Target the .product__subtitle class with custom font-size values
  • Alternative: use inline CSS directly in the Liquid template file

Follow-up Issue:
The original poster reports that adjusting font-size numbers isn’t producing visible changes.

Troubleshooting Steps Suggested:

  • Use more specific CSS selectors (e.g., .product__info-container .product__subtitle)
  • Inspect element using browser developer tools to identify conflicting CSS rules
  • Add !important declarations to force style application
  • Clear browser cache with hard refresh
  • As a last resort, apply inline styles directly in the Liquid file to bypass CSS conflicts

Status: The discussion remains open with troubleshooting in progress. The issue likely involves CSS specificity conflicts preventing the custom styles from taking effect.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

What is the best way to increase the size of a subtitle underneath a product title? I’ve created and inserted the code in the product main page. I would just like it to be a little larger, if possible. Using the Dawn theme.

Thanks so much.

1 Like
2

Hello @woodwardcandle

Steps to Increase Subtitle Size in Dawn Theme:
1.Go to Shopify Admin → Online Store → Themes → Click “Edit Code.”
2.Open base.css or component-product.css (whichever is used in your theme).
3.Scroll to the bottom and add this CSS:

.product__subtitle {
    font-size: 18px !important;  /* Adjust size as needed */
    font-weight: 500;  /* Optional: Makes it a bit bolder */
    color: #333;  /* Optional: Adjust color */
    margin-top: 5px;  /* Optional: Adds spacing from title */
}

If Your Subtitle Has a Different Class
. Use Inspect Element (F12 in Chrome) to check what class your subtitle has.
. Replace .product__subtitle in the CSS with the correct class name.

Alternative: Inline CSS (Quick Fix)
If you added the subtitle directly in the Liquid file, you can style it inline:


   Your Subtitle Here

Thank you :blush:

3

Thank you for your help.

4

Actually doesn’t look like it’s changing the size when I adjust the font numbers. Any suggestions?

5
  1. Use a More Specific Selector
    Instead of just .product__subtitle, try adding a more specific selector:
.product__info-container .product__subtitle {
    font-size: 22px !important; /* Adjust size as needed */
    font-weight: 600; /* Makes it bolder */
    color: #333; /* Adjust color */
}

. This targets the subtitle inside the product info container, making it more specific and harder to be overridden.

  1. Check for Other CSS Overriding It
    . Right-click the subtitle on the product page.
    . Select Inspect (Chrome) or Inspect Element (Firefox).
    . Look for any CSS rules applying to the element.
    . If another CSS rule is setting font-size, it might be overriding yours.

  2. Try Adding !important in Multiple Properties
    If it’s still not working, force the change using:

.product__subtitle {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

  1. Clear Cache and Test
    . Hard refresh the page (Ctrl + Shift + R or Cmd + Shift + R on Mac).
    . If you have a Shopify app that minifies CSS, clear the cache or disable it temporarily.

  2. Inline CSS Override (Last Resort)
    If nothing else works, apply it directly in the Liquid file:


   Your Subtitle Here

This ensures no other CSS rule overrides it.

Thank you :blush: