Hi,
Hi everyone,
I’m looking for an app (or a recommended approach) to display three product tiers in a clean, card-style selector—similar to the attached image.
My setup:
What I want:
-
Show the tiers as stacked cards with radio buttons (not a dropdown).
-
When a tier is selected, that card should expand like an accordion/dropdown to reveal extra details (sub-heading + bullet list).
-
The selected tier price must be the real variant price and update correctly (also in cart/checkout).
-
The Buy/Add to cart button should add the selected tier.
I’ve attached an image of the layout I’m aiming for.
Any recommendations for apps that can do this (or best practice for implementing it in Shopify)?
Thanks in advance!
There are definitely apps and pretty sure there are free ones that let you style the variants but I am not very aware of it. May be try searching variant options and then you can look through the app store to best fit your needs.
Speaking of apps which are code anyways this can be achieved with custom code. So the variants part is easy, you have a product with 3 variants of premium, standard and free and on selection of which the correct variant is added to cart with the correct price because that is all native Shopify functionality. With custom code it’s about creating that radio style layout and the extra details as accordion tabs. For that extra details to populate dynamically you can use variant metafields.
Best
I have been looking for the same display. Eventually tried Kaching Bundles Quantity Break Kaching Bundles Quantity Break - Boost AOV with volume discounts, free gifts, BOGO & upsells | Shopify App Store where I was able to achieve this (it’s a work in progress). Basically you can add different variants and the display/customisation level is impressive. Hope this helpsü
Many, many thanks. I’ll definitely try it out!
Hi @felixtjarnstrom,
For the frontend display (card-style radio buttons, accordion expand), that’s handled by your theme or a variant styling app - the suggestions above should help.
If your tiers are actually bundles with different components (e.g., Standard includes X, Premium includes X+Y+Z), StockHero Material Inventory handles the backend. Each variant links to its own set of components, and inventory is calculated automatically based on what’s in stock.
The variant picker stays native Shopify - style it however you want on the frontend. StockHero just manages what’s behind each variant.
Free plan available + free onboarding.
