Compare List Empty
An empty compare page blueprint with three dashed product slots above skeleton spec rows, a headline, and a primary action to add products.
An empty compare page blueprint with three dashed product slots above skeleton spec rows, a headline, and a primary action to add products.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Compare List Empty draws the tool before anything fills it, three dashed slots labelled add a product sit above the exact spec rows the table will compare, price, weight, main material, laptop sleeve, water resistance, warranty, each rendered as a skeleton bar. The blueprint teaches the feature at a glance, pick up to three and every row lines up side by side. A single primary action starts the pick and the headline keeps it plain, nothing to compare yet.
Spec rows and slots are two arrays, the skeleton widths are decorative and swap for real values once products land. The footer note previews a real behaviour, rows where all three match can fold away so the differences carry the page.
Reach for this block as the empty state of the comparison tables page, before any product is added to the set. The spec rows should mirror the live comparison schema so the blueprint is honest.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the three slot blueprint. Other empty compares:
Tip: showing the spec rows as skeletons before anything is picked tells people exactly what the table compares, a blueprint sells the feature better than an empty box and a button.