Shopify Product Card Customization: Moving Product Names 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.

As experts in Shopify migrations and development at Shopping Cart Mover, we often see merchants wanting to fine-tune their store's aesthetics. A common request is to adjust the layout of product cards on collection pages, particularly how product names are displayed relative to their images. This seemingly minor change can significantly impact the visual flow and user experience of your online store.

The Challenge: Why is Moving a Product Title So Tricky?

It all started with a post from a Shopify user, 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!

Modern Shopify themes, especially the popular Dawn theme, are built with a highly dynamic and modular architecture. This means that elements like product cards are not static. Their appearance and behavior are often controlled by a combination of Liquid logic (which determines what HTML is rendered) and CSS (which styles that HTML). This interconnectedness is powerful for flexibility but can make targeted customizations a bit more complex than expected.

Unpacking the Shopify Product Card Logic: card--media vs. card--text

Thanks to insights from community member tim_tairli, we learned a crucial piece of information about how modern Shopify themes (like Dawn) dynamically assign classes to product cards. This is fundamental to understanding and modifying their layout.

The core of the logic lies within the snippets/card-product.liquid file. This snippet is responsible for rendering each product card. A key conditional statement within this file determines whether a product card has a featured image or not:

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

This single line of Liquid code assigns either the card--media class (if the product has an image) or the card--text class (if it doesn't, implying a placeholder or text-only card). This dynamic class assignment is critical because it dictates how the entire product card is styled by your theme's CSS.

For instance, a product like "Abutilon megapotamicum" (with an image) might render with:

While "Abelia mosanensis" (without a featured image, using a placeholder) might render with:

The presence of card--media or card--text then triggers different CSS rules, controlling everything from image display to the placement of the product title.

The Breakthrough: Identifying the Suppressing CSS

gladfulspirit eventually found the solution by digging into the theme's CSS files, specifically component-card.css and base.css. They discovered that while the product title heading was indeed being generated by card-product.liquid, its visibility and position were being suppressed by a CSS rule in base.css. The culprit was a display: none; property targeting the product information within certain card types.

The specific CSS rule that was causing the product title to be hidden or misplaced was:

.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;
}

Notice the commented-out line in the original thread. This indicates that the theme developers might have considered different display options, but the active rules were hiding the desired elements. The key insight was that .card__information (which contains the product title) was being hidden when the card was of type card--standard.card--media.

Actionable Steps for Your Shopify Store

If you want to move your product names below the card picture placeholder, here's a step-by-step guide based on these insights:

Step 1: Backup Your Theme!

Before making any code changes, always duplicate your live theme. Go to Online Store > Themes, find your current theme, click Actions > Duplicate. This ensures you have a safe rollback point.

Step 2: Access Your Theme Code

From your Shopify admin, navigate to Online Store > Themes. On your duplicated theme, click Actions > Edit code.

Step 3: Locate snippets/card-product.liquid

In the theme code editor, find and open snippets/card-product.liquid. This is where the HTML structure for your product cards is defined. You'll want to ensure that the product title (usually within an

tag with a class like card__heading) is positioned where you want it relative to the image. In many Dawn-based themes, the title is already present in a logical place, but its visibility is controlled by CSS.

Step 4: Override the Suppressing CSS

The most robust way to achieve this is to override the display: none; rule. You generally want to avoid directly editing core theme CSS files like base.css or component-card.css, as your changes might be overwritten during theme updates. Instead, add your custom CSS to the very end of your main CSS file (often theme.css or base.css in the Assets folder) or create a new custom CSS file if your theme supports it.

To make the product name visible below the image, you need to target the .card__information class within the relevant card types and set its display property. Based on gladfulspirit's findings, the following CSS would help:

/* Override to make product name visible below image */
.card--standard.card--media .card__inner .card__information {
  display: block !important; /* Or flex, depending on desired layout */
}

/* Ensure the heading itself is also visible if it was specifically hidden */
.card--standard.card--media .card__content .card__heading {
  display: block !important;
}

The !important flag is often needed to override existing theme styles. You might need to experiment with display: block; or display: flex; depending on how you want the elements to stack or align. If you also want to ensure placeholder cards (card--text) show the title below, you'd apply similar overrides.

Step 5: Test Thoroughly

Preview your duplicated theme. Check collection pages, search results, and any other areas where product cards are displayed. Ensure the titles appear correctly on both products with images and those without. Also, check responsiveness across different devices.

Best Practices and Considerations

• Theme Updates: Customizations made directly to theme files can be lost during theme updates. Consider using a child theme (if your theme supports it) or carefully documenting your changes.
• Performance: Keep your CSS concise. Excessive overrides can sometimes lead to larger file sizes or minor rendering delays.
• User Experience: Always consider the overall UX. Does moving the title improve readability and navigation for your customers?
• Professional Help: If you find yourself spending too much time debugging or are unsure about making complex code changes, don't hesitate to reach out to Shopify development experts like Shopping Cart Mover. We specialize in custom theme development and ensuring smooth e-commerce operations.

Conclusion

Customizing your Shopify store's layout, even for seemingly small details like product title placement, can significantly enhance your brand's presentation and user experience. By understanding the underlying Liquid logic and CSS structure of your theme, you gain the power to fine-tune your store to perfection. The community's collaborative spirit, as seen in gladfulspirit's journey, truly highlights the power of shared knowledge in the Shopify ecosystem. Happy customizing!