Shopify Product Card Customization: How to Move Product Names Below Images (Dawn Theme Fix)

Hey there, fellow store owners! As someone who spends a lot of time digging through the Shopify community forums, I often come across those little design tweaks that seem simple on the surface but can turn into a real head-scratcher. One such gem recently popped up, and I wanted to share the insights with you because it's a common desire: getting your product names to consistently show up below the product image on your collection pages.

The Case of the Missing Product Title

Our community member, gladfulspirit, was trying to achieve just this on their store, Garden Treasures Nursery. They wanted to move the card__heading, which holds the product title, below the image area for all product cards – both those with actual product photos and those using a placeholder image. They'd been staring at the code for hours, particularly in card-product.liquid, and suspected it might be a CSS issue related to how different card styles ('standard' vs. 'card') were handled.

The Community Uncovers the Culprit: CSS 'display: none;'

After some diligent digging, gladfulspirit hit the jackpot! The solution wasn't about repositioning the HTML element itself, but rather about uncovering a hidden CSS rule. It turned out the product title was indeed being generated by the Liquid code in card-product.liquid, but it was being suppressed by a display: none; rule in either component-card.css or base.css. This is a classic example of how CSS can override HTML structure in unexpected ways.

Here's the snippet of CSS gladfulspirit found that was causing the trouble:

.card--standard.card--media .card__inner .card__information,
/* .card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder), */
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

Specifically, the commented-out line targeting .card--standard.card--text and .card__heading was a strong indicator. When this rule was active (or not properly overridden), it would hide the product title for cards that didn't have a featured image, leading to an inconsistent layout.

Understanding the Liquid Logic: card--media vs. card--text

This is where other community members, like tim_tairli and NKCreativeSoulutions, provided crucial context. They explained that Shopify's Dawn theme (and many others) uses a clever Liquid condition in card-product.liquid to assign different CSS classes to your product cards based on whether they have a featured image or not.

As tim_tairli detailed, if a product has media, it gets the card--media class. If it doesn't, it gets card--text. This dynamic class assignment is fundamental because your theme's CSS then uses these classes to apply specific styling and layouts.

This snippet from card-product.liquid clearly shows that key conditional. NKCreativeSoulutions even confirmed that by inspecting a product without an image and manually changing its class from card--text to card--media in the browser's developer tools, the product name instantly appeared below the image. This tells us the HTML structure was already there; it was just a CSS rule hiding it based on the assigned class.

Putting It All Together: Your Step-by-Step Solution

So, how do you fix this for your own store? Here's the general approach, keeping in mind that theme versions can vary slightly. Always back up your theme before making any code changes!

1. Access Your Theme Code:

   From your Shopify admin, go to Online Store > Themes. Find your current theme, click Actions > Edit code.

2. Locate card-product.liquid:

   This snippet is responsible for rendering individual product cards. You'll find it under the Snippets folder. This is where the card--media or card--text class is assigned, as seen in the code shared above.

3. Find the Relevant CSS File:

   Based on gladfulspirit's experience, the problematic CSS could be in assets/component-card.css or potentially assets/base.css (or another global CSS file, depending on your theme's structure). You're looking for a rule that applies display: none; to .card__heading or .card__information, especially when combined with .card--text.

4. Modify or Override the CSS:

   The goal is to ensure that the product title (.card__heading) is always visible. You have a few options:

   • Option A: Remove or Comment Out (Carefully): If you find a line like the one gladfulspirit shared that explicitly hides the heading for .card--text, you can try commenting it out or deleting it. For example, if you find something like .card--standard.card--text > .card__content .card__heading { display: none; }, you'd want to remove or comment out that specific rule.
   • Option B: Add an Override Rule: A safer approach might be to add a new CSS rule in your theme's custom CSS file (often assets/theme.css or a custom CSS section in the theme editor) that explicitly sets the display property to block or flex for the product heading, ensuring it's visible. For example:

     .card--standard.card--text .card__heading {
       display: block !important; /* Or 'flex' depending on your desired layout */
     }

     The !important flag can help ensure your rule takes precedence, but use it sparingly as it can make debugging harder later on.

5. Test Thoroughly:

   After making changes, always check your collection pages across different products (with and without images) and on various devices to ensure everything looks as expected.

Achieving a consistent look and feel across all your product cards, regardless of whether they have a featured image, is crucial for a professional and user-friendly online store. It improves navigation, ensures important information like product names are always visible, and contributes to a smoother shopping experience. This community discussion perfectly illustrates how understanding both the Liquid logic (how classes are assigned) and the CSS rules (how those classes are styled) is key to unlocking deeper theme customizations. Don't be afraid to dive into your theme code and use your browser's inspector – it's often the quickest way to uncover these kinds of hidden interactions. And remember, the Shopify community is always there to help you untangle those tricky bits!