Shopify Recommended Products Not Showing? Fix Missing Images & Sections

Hey store owners! Ever logged into your Shopify admin, checked out your product pages, and noticed something… off? Maybe your 'Recommended Products' section is there, but the images? Poof! Gone. Or worse, the section itself just says 'no recommendations' even when you know you've got plenty of great products to suggest. It's a frustrating head-scratcher, isn't it? As experts in Shopify migrations and optimization at Shopping Cart Mover, we often see merchants grapple with these kinds of display issues. They can be subtle, yet drastically impact your store's user experience and conversion rates.

We recently stumbled upon a Shopify Community discussion that perfectly captured this very dilemma, and the brilliant minds there really dug into the nitty-gritty to find some solid answers. Let's dive into what we learned from LiquorAssets' experience with their Horizon theme, and how the community rallied to help, providing insights that are invaluable for any Shopify merchant.

The Problem Unpacked: Missing Product Images and Recommendations

Our fellow merchant, LiquorAssets, kicked off the thread with a classic problem: their 'Products You May Also Like' section was showing empty product cards – no images whatsoever. They confirmed images were uploaded and product pages were set up, so it wasn't a simple 'forgot to add an image' scenario. To add to the mystery, when they tried to add a new 'Recommended Products' section, it flat-out said 'no recommendations.' This all happened on their liquorassets.net store, running the popular Horizon theme. It’s a common scenario: something that used to work suddenly doesn't, and you're left wondering what changed, especially after a theme update or app installation.

Initial Diagnosis: The Usual Suspects

Before jumping straight into complex code, it's always good to cover the basics. DANIELOZ, another helpful community member, laid out some excellent initial troubleshooting points that are worth checking for any Shopify theme, not just Horizon. These are your first stops if you're facing a similar issue:

• Missing Featured Images: Double-check that all your recommended products actually have featured images assigned to them. Sometimes, a product might have gallery images, but the 'featured image' field, which is often what themes reference by default for product cards, might be empty. Navigate to Shopify Admin > Products > [Your Product] and ensure an image is set as the main product image.
• Liquid Code Referencing Issues: The Liquid code responsible for rendering recommended products might be incorrectly referencing the image object. For instance, if you've customized your theme, you might accidentally be using product.featured_image outside the recommendation loop, or referencing a non-existent object within it. Ensure that inside your recommended products loop (e.g., {% for recommendation_product in recommendations.products %}), you are correctly calling recommendation_product.featured_image or recommendation_product.first_image.
• CSS or Lazy-Loading Scripts Hiding Images: This is a very common culprit for elements that are technically present in the HTML but aren't visible. Cascading Style Sheets (CSS) can inadvertently hide elements, or lazy-loading scripts (designed to improve page speed by loading images only when they're in view) can sometimes malfunction, preventing images from ever appearing.

The Breakthrough: Unmasking CSS Conflicts

In LiquorAssets' specific case, the community quickly honed in on CSS conflicts as the primary cause. This is a powerful lesson: seemingly innocuous CSS rules can have far-reaching, unintended consequences across your theme.

Solution 1: Overriding Conflicting align-items

Tim_tairli identified a specific rule in the assets/base.css file of the Horizon theme:

/* Horizon collection carousel heading alignment */
.resource-list .layout-panel-flex--column {
  align-items: flex-start !important;
}

While intended for carousel heading alignment, this rule had the side effect of preventing product card media content from showing due to its broad application. The fix involved adding an override rule to specifically target the product cards:

.product-card .product-card__content.product-grid__card {
  align-items: unset !important;
}

To implement this, you would typically navigate to Online Store > Themes > Actions > Edit Code. You can add this CSS snippet to your assets/base.css (at the very bottom to ensure it overrides previous rules) or, even better, create a new custom CSS file (e.g., assets/custom.css) and link it in your theme.liquid for better organization. For aesthetic consistency, tim_tairli also suggested:

.product-card .quick-add  button {
  margin-top: 0.5rem;
  width: 100%;
}

Solution 2: Addressing container-type on Card Gallery

Moeed provided another crucial CSS override, specifically targeting the .card-gallery class. This fix is often effective when product cards appear but are misaligned or still missing elements:

Moeed's instructions were to add this code directly into your theme.liquid file, specifically at the bottom, just above the closing tag. This ensures the styles are applied globally and can override other conflicting rules.

Empowering You: How to Debug CSS Issues Yourself

While these specific fixes worked for LiquorAssets, the underlying lesson is invaluable: learn to use your browser's developer tools! Right-click on any element on your page (like a missing product image or an empty space where one should be) and select 'Inspect' (or 'Inspect Element').

• Elements Tab: This shows you the HTML structure. Look for the image tag () within your product card. If it's not there, the issue is likely Liquid code. If it is there, move to CSS.
• Styles Tab: This pane shows all the CSS rules applied to the selected element. Look for properties like display: none;, visibility: hidden;, opacity: 0;, height: 0;, or width: 0;. These are common culprits for hiding elements. You can temporarily uncheck these rules to see if the element reappears, helping you pinpoint the problematic CSS.
• Computed Tab: This shows the final, computed style of an element after all CSS rules have been applied.

Preventative Measures & Best Practices

To minimize such headaches, consider these best practices:

• Regular Theme Updates: Keep your Shopify theme updated. Developers often release fixes for known bugs and conflicts.
• Test in a Development Theme: Before making any significant code changes or installing new apps, always duplicate your live theme and test everything on the duplicate.
• Audit Third-Party Apps: New apps can inject their own CSS and JavaScript, potentially conflicting with your theme's existing styles. Review app documentation or test thoroughly.
• Document Customizations: Keep a record of any custom CSS or Liquid changes you make. This helps in debugging later.

Need Expert Help?

Product recommendations are vital for cross-selling, upselling, and improving customer engagement. When they're not functioning correctly, it's not just an aesthetic problem; it's a missed revenue opportunity. If you're struggling with complex Shopify theme issues, custom development, or even considering a full platform migration, don't hesitate to reach out to the experts at Shopping Cart Mover. We specialize in ensuring your e-commerce store runs smoothly, efficiently, and looks exactly how you envision it.

Don't let hidden CSS rules or Liquid code quirks hold your business back. A well-optimized Shopify store is a powerful sales tool, and we're here to help you unlock its full potential!