Mastering Product Card Layouts: How to Move Your Shopify Product Titles Below Images

Hey fellow store owners! Ever stared at your collection pages, scratching your head, wishing you could just tweak that one little thing? You know, like moving the product title from above the image to below it? It sounds simple, right? But as many of us have found, sometimes those "simple" changes in Shopify themes can send you down a rabbit hole. Well, I recently stumbled upon a fantastic community discussion that tackled exactly this, and I just had to share the insights.

It all started with a post from gladfulspirit, who was trying to get their product names to appear below the image on their product cards, both for products with actual images and those using a placeholder. They’d been using the inspector in Chrome for hours, trying to pinpoint the exact CSS causing the issue. If you've been there, you know the feeling – it's like trying to find a needle in a haystack of code!

Here’s a look at what gladfulspirit was trying to achieve:

Garden Treasures Nursery Products

Understanding the Shopify Product Card Logic

Thanks to insights from tim_tairli, we learned how modern Shopify themes (like Dawn) dynamically assign classes to product cards. This is crucial because these classes dictate layout. The theme checks for a featured image and assigns a class:

• If a product has media (an image), the card gets the card--media class.
• If it doesn't, it gets the card--text class.

This class assignment happens right in your snippets/card-product.liquid file. Tim even pointed us to the exact Liquid code that handles this:

{% if card_product.featured_media %} card--media{% else %} card--text{% endif %}

This conditional class is a game-changer. Different CSS rules apply based on whether a card is "media-rich" or "text-only," and often the latter hides or repositions elements like the product title.

The "Aha!" Moment: Finding the Hidden CSS

After some back and forth, gladfulspirit had their breakthrough. The solution wasn't just about Liquid; it was uncovering a CSS rule actively suppressing the product title. The culprit? component-card.css, with a related rule in base.css.

The product title (a card__heading element) was generated by card-product.liquid, but hidden by a CSS rule (often with display: none;):

.card\u2013\u2013standard.card\u2013\u2013media .card__inner .card__information,
/* .card\u2013\u2013standard.card\u2013\u2013text:not(.card\u2013\u2013horizontal) > .card__content .card__heading:not(.card__heading\u2013\u2013placeholder), */
.card\u2013\u2013standard:not(.card\u2013\u2013horizontal) > .card__content .card__badge,
.card\u2013\u2013standard.card\u2013\u2013text.article-card > .card__content .card__information,
.card\u2013\u2013standard > .card__content .card__caption {
    display: none;
}

That commented-out line – /* .card–standard.card–text:not(.card–horizontal) > .card__content .card__heading:not(.card__heading–placeholder), */ – is the key! When a product card was card--text (no featured image), this rule set display: none;, hiding the title below the image area.

Your Step-by-Step Solution

Ready to adjust your product titles? Here’s how, based on community insights:

1. Always, Always, Always Back Up Your Theme!

Before any code changes, go to Online Store > Themes, find your current theme, click Actions > Duplicate. This creates a safe backup.

2. Locate the Relevant Files

In your Shopify admin, go to Online Store > Themes > Actions > Edit code for your duplicated theme. You’ll work with: snippets/card-product.liquid, assets/base.css, and possibly assets/component-card.css.

3. Inspect Your Live Site (Again!)

Open your collection page, right-click a product card (especially one without an image) and "Inspect." Look for the

.card\u2013\u2013standard.card\u2013\u2013media .card__inner .card__information,
.card\u2013\u2013standard.card\u2013\u2013text:not(.card\u2013\u2013horizontal) > .card__content .card__heading:not(.card__heading\u2013\u2013placeholder),
.card\u2013\u2013standard:not(.card\u2013\u2013horizontal) > .card__content .card__badge,
.card\u2013\u2013standard.card\u2013\u2013text.article-card > .card__content .card__information,
.card\u2013\u2013standard > .card__content .card__caption {
    display: none;
}

.card\u2013\u2013standard.card\u2013\u2013text .card__content .card__heading {
    display: block !important; /* Or flex, depending on your desired layout */
}