Is your Shopify product title too large, too small, or overflowing on your collection page? Getting the right font size is crucial for a professional look and a great user experience. The good news is that learning how to resize product title Shopify elements is a simple process.

This ultimate guide will show you exactly how to change your product title font size, whether you use a modern Online Store 2.0 theme like Dawn or an older version.

Method 1: Use Built-in Settings to Resize Product Title (No Code)

The easiest way to change product title size Shopify is by using the built-in settings of your Online Store 2.0 theme. This method requires no coding.

1. From your Shopify admin, go to Online Store > Themes.
2. Click Customize for your active theme.
3. Navigate to a Collection page from the dropdown or via your navigation menu.
4. In the product grid, click directly on any product card. A settings panel titled “Product card” or “Card” will appear on the right.
5. Look for an option labeled Text settings, Typography, or specifically Title font size.
6. Use the slider or input field to adjust your product title size. You can often change the font and weight here too.
7. Click Save in the top-right corner.

Note: If your theme’s customizer doesn’t have these options, you will need to use custom CSS, as shown in the next method.

Method 2: Adjust Title Size with Custom CSS for Any Theme

If your theme lacks built-in controls, adding Custom CSS is the most reliable way to adjust your product title font. This method works for every theme.

1. In your Shopify admin, navigate to Online Store > Themes.
2. Click Customize for your theme.
3. Inside the editor, open the bottom menu, click on Theme settings (or the ... menu), and find the Custom CSS option.
4. Paste one of the CSS code snippets below into the box.

Finding the Right CSS Selector for Your Theme

The right CSS code depends on your theme. Here are the most effective selectors to fix the font size:

Option A: Universal Selector (Best First Attempt)
This code targets the product title heading in themes like Dawn, Debut, and Brooklyn.

cssCopyDownload

.product-card__title {
  font-size: 16px !important; /* Change this value to resize your product title */
}

Option B: Specific Selector for the Dawn Theme
Use this code to specifically resize product title elements in the free Dawn theme.

cssCopyDownload

.card-information__text {
  font-size: 16px !important;
}

Option C: Powerful Advanced Selector
If the options above fail, this specific selector usually works.

cssCopyDownload

a[href*="/products/"] h3 {
  font-size: 16px !important;
}

How to Use the Code:

• Change the 16px value to your desired font size (e.g., 14px, 1.2rem).
• The !important rule helps override existing theme styles.
• Click Save in the Custom CSS box, and then click the main Save button.

Pro Tips and Advanced Troubleshooting

• Use Relative Units for Responsiveness: For a responsive design, use rem or em units (e.g., 1.1rem) instead of px to resize your product title.
• Set Different Sizes for Mobile: You can set a unique size for mobile to resize product title elements for smaller screens.cssCopyDownload/* Desktop size */ @media screen and (min-width: 750px) { .product-card__title { font-size: 16px; } } /* Mobile size */ @media screen and (max-width: 749px) { .product-card__title { font-size: 14px; } }
• What to Do If It Doesn’t Work: If your code isn’t working, the selector might be wrong. Use your browser’s Inspect Tool (right-click > Inspect) on a product title to find the exact CSS class your theme uses.

Conclusion: Your Shopify Product Title Size is Fixed

You now know how to easily resize product title Shopify elements on your product cards. Always start with Method 1 to use your theme’s built-in settings. If that doesn’t work, Method 2 with Custom CSS will always get the job done, giving you full control to edit the title on product cards perfectly.

By following these steps, you can ensure your Shopify product title looks clean, professional, and perfectly on-brand on every device.New chat

Watch the video

  .card__information .card__heading .full-unstyled-link {
      font-size: 24px;
      font-weight: bold;
  }