Trouble making Search and Discovery Complementary Products look good

Topic summary

A Shopify store owner using the Mosaic theme encountered display issues with the Search and Discovery App’s complementary products feature. The products appeared with tiny images and excessive grey space, creating an unappealing layout.

Solution provided:

  • Custom CSS code was shared to fix the styling issues
  • The code adjusts image sizing, centering, padding, and spacing for complementary product displays
  • Implementation involves adding the CSS to the theme’s custom.css file

Outcome:

  • The CSS solution successfully improved the appearance
  • While not perfect, the layout is now significantly better than the original
  • The bonus question about adding complementary products to the cart drawer remains unaddressed

Screenshots were shared showing both the problematic original layout and the improved result after applying the fix.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Using Share and Discovery App on Shopify with Mosaic. When I add complementary Products to Product it just looks bad, tiny product picture huge grey space. Anyone know how to fix this?

https://pakmule.com/products/pakmule-pro

Bonus if you know how to get complementary products on cart drawer in mosaic?

1 Like

You can add this code to custom.css file of your theme.

.product-single__meta .product-recommendations-placeholder .grid-product__link { justify-content: center; }
.product-single__meta .product-recommendations-placeholder .grid-product__image-mask { width: 160px !important; padding-top: 30px;}
.product-single__meta .product-recommendations-placeholder .product-recommendations__slide { display: flex; gap: 20px; }

Here is the result

1 Like

You’re the real deal. Worked. Thank you so much, not perfect, but definitely better.