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:
Outcome:
Screenshots were shared showing both the problematic original layout and the improved result after applying the fix.
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?
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
You’re the real deal. Worked. Thank you so much, not perfect, but definitely better.
