#1
Quick view modal
- Balm
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
Top 16 Product Card and Quick View Sections for Shopify (Updated Oct 2026)
Blocko has 16 free product card and quick view sections for Shopify Online Store 2.0, from 15 themes across beauty. 14 ship as Shopify Liquid with merchant settings; 1 need no JavaScript at all. Each one has a live demo and a one-line prompt for your coding agent.
The list is ranked with Shopify-ready items first, then by the least JavaScript. Open any item to see its sections, settings and prompt, or use all sections by type to compare other kinds. Not affiliated with Shopify.
Compare at a glance
| # | Name | Theme | Industry | Shopify | JavaScript | Settings |
|---|---|---|---|---|---|---|
| 1 | Quick view modal | Balm | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 2 | Quick view modal | Bare | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 3 | Quick view modal | Blush | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 4 | Quick view modal | Clip | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 5 | Quick view modal | Dew | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 6 | Quick view modal | Isle | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 7 | Quick view modal | Lather | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 8 | Quick view modal | Prism | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 9 | Quick view modal | Shelf | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 10 | Quick view modal | Stubble | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 11 | Quick view modal | Tide | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 12 | Quick view modal | Tint | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 13 | quick shop modal | Twist | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 14 | Quick view modal | Veil | Beauty | Liquid + HTML | 9.2 KB | 4 |
| 15 | Haircare product card | Tress | Beauty | HTML only | 0 KB | n/a |
| 16 | Quick view dialog | Tress | Beauty | HTML only | 4.4 KB | n/a |
Product Card and Quick View sections
#2
Quick view modal
- Bare
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#3
Quick view modal
- Blush
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#4
Quick view modal
- Clip
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#5
Quick view modal
- Dew
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#6
Quick view modal
- Isle
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#7
Quick view modal
- Lather
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#8
Quick view modal
- Prism
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#9
Quick view modal
- Shelf
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#10
Quick view modal
- Stubble
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#11
Quick view modal
- Tide
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#12
Quick view modal
- Tint
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#13
quick shop modal
- Twist
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#14
Quick view modal
- Veil
- Beauty
- Shopify-ready
Accessible product preview modal opened from a catalog card.
9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 4 Theme Editor settings · category product
#15
Haircare product card
- Tress
- Beauty
- Liquid pending
Product card with status badges, rating, compare-at price, and outline purchase action.
0 KB JavaScript · HTML demo, Liquid pending · category product
#16
Quick view dialog
- Tress
- Beauty
- Liquid pending
Accessible product preview dialog for collection and arrival cards.
4.4 KB JavaScript (vanilla Custom Element) · HTML demo, Liquid pending · category product
Frequently asked questions
What are the best product card and quick view sections for Shopify?
Blocko lists 16 free, MIT-licensed product card and quick view sections from 15 themes. 14 of them ship as Shopify Liquid today and the rest are complete HTML demos. The list is ranked with Liquid-ready items first, then by the least JavaScript, so Quick view modal from Balm comes first.
Are these product card and quick view sections free to use?
Yes. Every item is MIT licensed, free to copy and edit, and needs no app or subscription. Blocko is not affiliated with Shopify.
How do I add one of these product card and quick view sections to my Shopify store?
Open an item, copy its one-line prompt into your coding agent, or connect the Blocko MCP server at https://blocko.ai/mcp. The agent asks where the section should go before it changes any code.
Which industries do these product card and quick view sections cover?
Beauty. Every industry with at least three matching items has its own list.
How much JavaScript do these product card and quick view sections ship?
1 of 16 ship 0 KB of JavaScript. The heaviest is Quick view modal in Balm at 9.2 KB, registered as an idempotent Custom Element.
Related lists
Filter by industry
Filter by page type
Where these product card and quick view sections are used.
Other sections
- Customer Account Sections (165)
- About Sections (92)
- Utility Pages Sections (90)
- Contact Sections (73)
- Product Page Sections (58)
- Image With Text Sections (48)
- Landing Page Content Sections (46)
- Quizzes and Finders Sections (46)
- Cart Sections (45)
- FAQ Sections (44)
- Blog Sections (43)
- Multicolumn Sections (43)
Markdown version for agents · Browse the full library · Connect your agent