Wrap anything in a card.
Group related blocks into one styled container — border, radius, padding, background.
Exactly what your shopper sees — at the moment they're ready to buy.
The Checkout Ninja tag only marks the block in this preview — it never appears in your live checkout.
"Fantastic app, highly recommended. We've been using it for years — a long list of checkout customisations suited to our store. A must-have for all your Shopify checkout needs."
How to add Card Block to Shopify checkout
Install Checkout Ninja from the Shopify App Store, open the checkout editor, and drag the Card Block block into the section where you want it. Then configure it in three steps. No theme code, no checkout.liquid, and it survives every Shopify update because it runs on Checkout Extensibility.
Add a Card Block
Drop it on the canvas. It starts empty — you'll add child blocks next.
Drag blocks into it
Trust badges, fields, upsells — anything composes inside a card. Reorder freely.
Style the container
Border, radius, background tint, padding — all live-previewed.
-
Can I nest cards inside cards?
Yes — up to two levels. Beyond that, the visual hierarchy stops being useful.
-
Does the card animate on hover?
No. Checkout pages should feel calm. We deliberately don't animate cards.
-
Can I control card spacing?
Yes. Card padding, gap-between-children, and outer margin are all configurable.
Build the rest of your checkout.
Collapsible Card
A bordered card with an optional logo, heading and expandable description.
See the block Layout & ContentInfo List
Icon · text · sub-text · tappable link. One to three columns, optional card.
See the block Layout & ContentNotice Banner
Info, success, warning or critical — with a heading, message and CTA buttons.
See the blockInstalled by these templates
All templates →Add the Card Block block today.
Every block + every feature, on a 3-day trial. No card. Live before your next order.