Simple Grid
A clean grid of related products with image, title, and price per card. Drops below the cart or product page to suggest items shoppers may want.
A clean grid of related products with image, title, and price per card. Drops below the cart or product page to suggest items shoppers may want.
Search blocks by description or jump to a page.
Simple Grid opens with a centered "You May Also Like" heading, then renders a responsive grid of product cards below it. Each card holds a square product image that scales up slightly on hover, a linked product name, a short description, a bold price, and an outlined "Add to Cart" button. The grid flows from one column on small screens up to four columns on wide viewports.
Every part of the layout is independent. You can swap the heading text, add or remove cards from the product list, rewrite the name and description on each card, and update the prices without touching the grid structure. The hover scale on the image and the shadow lift on the card are the only interactive behaviors.
Reach for this block when you want a clean, distraction-free way to surface related items at the bottom of a product or checkout page. It works well for a product analytics or SaaS tools shop where the catalog is focused and the buyer just needs a fast visual scan to decide whether to add another item. Compared to the With Ratings variant, it keeps the card surface minimal so nothing competes with the item name and price.
A natural flow around it on an Ecommerce page:
Before
After
The grid suits any catalog where a quick image, name, and price tell the full story. A few ways to use it:
Tip: four cards fills the widest grid column evenly. If you add a fifth, consider the stacked list variant so the layout does not break into an uneven final row.