Split Preview
A category preview split between a featured image and a product list, pairing a strong visual with quick picks at the top of a collection page.
A category preview split between a featured image and a product list, pairing a strong visual with quick picks at the top of a collection page.
Search blocks by description or jump to a page.
Split Preview stacks a series of category cards, each dividing its row into two equal halves. The left half holds a full bleed photograph; the right half carries the category name, a short description, a star rating with review count, a price range, an item count, a row of brand badges, and a call to action button. Alternate cards flip the image to the right and the content to the left, giving the sequence a back and forth rhythm as the reader scrolls down.
Every card is independent. You can adjust the copy, swap the photograph, change the brand badge labels, and update the stats on each card without affecting its siblings. Adding or removing cards from the list reflows the sequence automatically, and the alternating layout updates itself to stay consistent.
Reach for this block when you need to introduce two or three flagship categories at the top of a storefront or portfolio landing page and want each one to feel considered rather than catalogued. A creative agency or studio selling distinct service lines, print collections, or curated product tiers will benefit most here: the paired image and detail panel gives each offering enough room to carry its own story. It outperforms a plain grid when the categories differ meaningfully and you want visitors to pause on each one rather than scan across all of them at once.
A natural flow around it on an Ecommerce page:
Before
After
Each card can carry the details that matter most for your category. A few ways to use the available fields:
Tip: keep the category list to two or three cards. More than that and the alternating layout loses its pacing benefit over a simple grid.