Search bar product preview ratio help

Store Design
, , , ,

Topic summary

A user’s product images display as square throughout their Shopify store, but the search bar preview shows them in portrait orientation instead.

Issue identified:

  • The theme (Horizon) has a hard-coded 4/5 aspect ratio for predictive search results
  • This overrides the global square ratio setting

Solution provided:
Add custom CSS to Theme settings > Custom CSS:

.predictive-search .resource-card__media {
  --resource-card-aspect-ratio: 1 /1 !important;
}

This CSS override forces search preview images to display as square (1:1 ratio), matching the rest of the store’s product image format.

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

Hi All, my product ratio is set to square throughout, however on the search bar preview images are portrait, how can this be changed? Thanks

Screenshot 2025-09-25 at 13.18.27
Screenshot 2025-09-25 at 13.18.27756Ă—1408 128 KB

1 Like
2

Yes, it’s hard-coded in theme code to 4/5

So you can add this into “Custom CSS” under “Theme settings”:

.predictive-search .resource-card__media {
  --resource-card-aspect-ratio: 1 /1 !important;
}
2 Likes