COPY-READY BLOCKS
Store
Three responsive store wireframes built from real Dowe components, repeated data, and neutral media placeholders.
01 · PRODUCT CATALOG
Responsive filters and a repeated product grid
Open full page
page ProductCatalogStorePage
const filters:
value:[
{ id:"type" label:"Product type" },
{ id:"price" label:"Price" },
{ id:"color" label:"Color" },
{ id:"promotion" label:"Promotion" },
]
const products:
value:[
{ id:"product-01" name:"Everyday object" description:"A neutral product description." price:"$99.99" },
{ id:"product-02" name:"Useful object" description:"A neutral product description." price:"$99.99" },
{ id:"product-03" name:"Simple object" description:"A neutral product description." price:"$99.99" },
{ id:"product-04" name:"Modern object" description:"A neutral product description." price:"$99.99" },
{ id:"product-05" name:"Everyday object" description:"A neutral product description." price:"$99.99" },
{ id:"product-06" name:"Useful object" description:"A neutral product description." price:"$99.99" },
{ id:"product-07" name:"Simple object" description:"A neutral product description." price:"$99.99" },
{ id:"product-08" name:"Modern object" description:"A neutral product description." price:"$99.99" },
{ id:"product-09" name:"Everyday object" description:"A neutral product description." price:"$99.99" },
{ id:"product-10" name:"Useful object" description:"A neutral product description." price:"$99.99" },
{ id:"product-11" name:"Simple object" description:"A neutral product description." price:"$99.99" },
{ id:"product-12" name:"Modern object" description:"A neutral product description." price:"$99.99" },
]
Section id:"store-product-catalog" bg:"background" color:"backgroundText" boxed:true py:{ xs:6 md:10 } minH:"vh-0"
Grid columns:1 gap:{ xs:6 md:8 }
Flex wrap:true gap:2
each in:filters as:filter key:filter.id
Button variant:"outlined" scheme:"muted" size:"sm" iconEnd:"alt-arrow-down"
"{filter.label}"
Title size:{ xs:"2xl" md:"4xl" } weight:"black"
"Products you may like"
Grid columns:{ xs:2 md:4 } gap:{ xs:4 md:6 }
each in:products as:product key:product.id
Grid columns:1 gap:3
Card variant:"soft" scheme:"muted" rounded:"xl" p:3 minH:{ xs:40 md:56 }
Flex direction:"column" justify:"between" minH:{ xs:32 md:48 }
Flex justify:"end"
IconButton icon:"heart" label:"Save product" scheme:"muted" size:"xs" rounded:"full"
Flex align:"center" justify:"center"
Icon name:"gallery-bold-duotone" fill:"muted" w:{ xs:10 md:14 } h:{ xs:10 md:14 }
Grid columns:1 gap:2
Flex justify:"between" align:"start" gap:2
Text size:"sm" weight:"bold"
"{product.name}"
Text size:"sm" weight:"black"
"{product.price}"
Text size:"xs" color:"muted"
"{product.description}"
Flex align:"center" gap:1
Icon name:"star-bold" fill:"backgroundText" w:4 h:4
Icon name:"star-bold" fill:"backgroundText" w:4 h:4
Icon name:"star-bold" fill:"backgroundText" w:4 h:4
Icon name:"star-bold" fill:"backgroundText" w:4 h:4
Icon name:"star-bold" fill:"backgroundText" w:4 h:4
Text size:"xs" color:"muted"
"(261)"
Button variant:"outlined" size:"sm" rounded:"full"
"Add to basket"02 · PRODUCT DETAIL
Product gallery, description, quantity, and purchase actions
Open full page
page ProductDetailStorePage
const product:
value:{
name:"Lorem ipsum"
price:"$99.99"
description:"A focused description introduces the product, its purpose, and the most useful details for a confident decision."
delivery:"Ships directly from our studio with tracked delivery."
}
const thumbnails value:[{ id:"view-1" } { id:"view-2" } { id:"view-3" }]
const stars value:[{ id:"star-1" } { id:"star-2" } { id:"star-3" } { id:"star-4" } { id:"star-5" }]
Section id:"store-product-detail" bg:"background" color:"backgroundText" boxed:true py:{ xs:6 md:10 } minH:"vh-0"
Grid columns:{ xs:1 md:2 } gap:{ xs:8 md:12 } align:"start"
Grid columns:1 gap:4
Card variant:"soft" scheme:"muted" rounded:"xl" p:{ xs:6 md:10 } minH:{ xs:64 md:96 }
Flex align:"center" justify:"center" minH:{ xs:52 md:80 }
Icon name:"gallery-bold-duotone" fill:"muted" w:{ xs:16 md:24 } h:{ xs:16 md:24 }
Grid columns:3 gap:4
each in:thumbnails as:thumbnail key:thumbnail.id
Card variant:"soft" scheme:"muted" rounded:"xl" p:4 minH:{ xs:28 md:40 }
Flex align:"center" justify:"center" minH:{ xs:20 md:32 }
Icon name:"gallery-bold-duotone" fill:"muted" w:8 h:8
Grid columns:1 gap:5
Text size:"sm" color:"muted" spacing:"wide"
"HOME / PRODUCT"
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"{product.name}"
Title size:"3xl" weight:"black"
"{product.price}"
Text size:"lg" color:"muted"
"{product.description}"
Text color:"muted"
"Designed for everyday use with considered materials, balanced proportions, and a clear visual language."
Text color:"muted"
"The neutral presentation keeps attention on the product while the supporting content remains easy to scan."
Flex align:"center" gap:1
each in:stars as:star key:star.id
Icon name:"star-bold" fill:"backgroundText" w:5 h:5
Text size:"xs" color:"muted"
"(261)"
Divider
Flex wrap:true align:"center" gap:3
Box bg:"softMuted" rounded:"full" p:1
Flex align:"center" gap:2
Button variant:"ghost" scheme:"muted" size:"sm" rounded:"full"
"−"
Text weight:"bold"
"1"
Button variant:"ghost" scheme:"muted" size:"sm" rounded:"full"
"+"
Button variant:"outlined" scheme:"muted" size:"sm"
"IN STOCK"
Divider
Text color:"muted"
"{product.delivery}"
Divider
Grid columns:{ xs:1 sm:2 } gap:3
Button scheme:"warning" size:"lg" rounded:"full" w:"full"
"Buy Now"
Button size:"lg" rounded:"full" w:"full"
"Add to Cart"03 · SHOPPING CART
Repeated cart rows with responsive totals and checkout summary
Open full page
page ShoppingCartStorePage
signal giftOrder value:false
const items:
value:[
{ id:"item-1" name:"Lorem ipsum" option:"Lorem ipsum | 128G" quantity:"1" price:"$99.99" },
{ id:"item-2" name:"Lorem ipsum" option:"Lorem ipsum | 128G" quantity:"1" price:"$99.99" },
]
Section id:"store-shopping-cart" bg:"background" color:"backgroundText" boxed:true py:{ xs:6 md:10 } minH:"vh-0"
Grid columns:{ xs:1 md:2 } gap:{ xs:6 md:10 } align:"start"
Card show:{ xs:true md:false } variant:"ghost" p:0
Grid columns:1 gap:4
Title size:"2xl" weight:"black"
"Subtotal (2 items): $239.89"
Checkbox bind:giftOrder label:"This order contains a gift" scheme:"muted"
Button scheme:"warning" size:"lg" rounded:"full" w:"full"
"Proceed to checkout"
Divider
Grid columns:1 gap:5
each in:items as:item key:item.id
Grid columns:1 gap:5
Grid columns:{ xs:2 md:4 } gap:{ xs:4 md:6 } align:"center"
Card variant:"soft" scheme:"muted" rounded:"xl" p:4 w:{ xs:32 md:36 } minH:{ xs:32 md:36 }
Flex align:"center" justify:"center" minH:{ xs:24 md:28 }
Icon name:"gallery-bold-duotone" fill:"muted" w:8 h:8
Grid columns:1 gap:1
Title size:{ xs:"lg" md:"2xl" } weight:"black"
"{item.name}"
Text size:{ xs:"sm" md:"lg" } color:"muted"
"{item.option}"
Flex align:"center" gap:2
IconButton icon:"heart" label:"Save item" variant:"ghost" scheme:"muted" rounded:"full"
Box bg:"softMuted" rounded:"full" p:1
Flex align:"center" gap:2
Button variant:"ghost" scheme:"muted" size:"sm" rounded:"full"
"−"
Text weight:"bold"
"{item.quantity}"
Button variant:"ghost" scheme:"muted" size:"sm" rounded:"full"
"+"
Flex align:"center" gap:2
Title size:"xl" weight:"black"
"{item.price}"
IconButton icon:"trash-bin-minimalistic" label:"Remove item" variant:"ghost" scheme:"muted"
Divider
Grid show:{ xs:false md:true } columns:1 gap:4
Flex justify:"between"
Text size:"lg" color:"muted"
"Subtotal"
Text size:"lg" color:"muted"
"$199.89"
Flex justify:"between"
Text color:"muted"
"Tax"
Text color:"muted"
"(20%) $39.98"
Divider
Flex justify:"between"
Title size:"2xl" weight:"black"
"Subtotal"
Title size:"2xl" weight:"black"
"$239.87"
Card show:{ xs:false md:true } variant:"outlined" scheme:"muted" p:6 w:80
Grid columns:1 gap:4
Title size:"lg" weight:"black"
"Subtotal (2 items): $239.89"
Checkbox bind:giftOrder label:"This order contains a gift" scheme:"muted"
Button scheme:"warning" size:"lg" rounded:"full" w:"full"
"Proceed to checkout"