Simple Products
Products defined with minimum configuration
Galaxy Earings
$17.00
Demonstrates a simple product with a basic price
{"id":"simple1","type":"product","name":"Galaxy Earings","image":"https://demo.static.tools/media/images/simple-001.jpg","url":"https://demo.static.tools/products/earings1","price":17,"dimensions":{"height":2,"length":3,"width":2,"weight":18},"available":true,"digital":false,"addons":[]}
Turquoise Earings
$41.99
Demonstrates a simple product with a basic price
{"id":"simple2","type":"product","name":"Turquoise Earings","image":"https://demo.static.tools/media/images/simple-002.jpg","url":"https://demo.static.tools/products/earings2","price":41.99,"dimensions":{"height":2,"length":3,"width":2,"weight":24},"available":true,"digital":false,"addons":[]}
Elephant Earings
$65.00
Demonstrates a simple product with a basic price
{"id":"simple3","type":"product","name":"Elephant Earings","image":"https://demo.static.tools/media/images/simple-003.jpg","url":"https://demo.static.tools/products/earings3","price":65,"dimensions":{"height":2,"length":2,"width":2,"weight":15},"available":true,"digital":false,"addons":[]}
Marble Earings
$108.75
Demonstrates a simple product with a basic price
{"id":"simple4","type":"product","name":"Marble Earings","image":"https://demo.static.tools/media/images/simple-004.jpg","url":"https://demo.static.tools/products/earings4","price":108.75,"dimensions":{"height":2,"length":2,"width":2,"weight":20},"available":true,"digital":false,"addons":[]}
Notes
- Physical products require dimensions for shipping calculations
- See the product definition documentation
Digital Products
Products that do not require shipping details and are delivered digitally
Art Activities
$2.00
Demonstrates a digital product
{"id":"digital1","type":"product","name":"Art Activities","image":"https://demo.static.tools/media/images/digital-001.jpg","url":"https://demo.static.tools/products/art-activities","price":2,"dimensions":{},"available":true,"digital":true,"addons":[]}
Sewing Pattern
$6.50
Demonstrates a digital product
{"id":"digital2","type":"product","name":"Sewing Pattern","image":"https://demo.static.tools/media/images/digital-002.jpg","url":"https://demo.static.tools/products/sewing-pattern","price":6.5,"dimensions":{},"available":true,"digital":true,"addons":[]}
Sheet Music
$19.32
Demonstrates a digital product
{"id":"digital3","type":"product","name":"Sheet Music","image":"https://demo.static.tools/media/images/digital-003.jpg","url":"https://demo.static.tools/products/sheet-music","price":19.32,"dimensions":{},"available":true,"digital":true,"addons":[]}
Photography Assets
$33.65
Demonstrates a digital product
{"id":"digital4","type":"product","name":"Photography Assets","image":"https://demo.static.tools/media/images/digital-004.jpg","url":"https://demo.static.tools/products/photography-assets","price":33.65,"dimensions":{},"available":true,"digital":true,"addons":[]}
Notes
- Digital products do not require dimensions
- Orders containing only digital products do not require shipping details
- See the digital attribute documentation
Composite Products
Products where a sub-product is selected by attributes (color, size etc)
C&G Shirt
$29.00
Demonstrates a composite product and the automatic resolving of attributes and sub-products
{"id":"composite1","type":"product","name":"C&G Shirt","image":"https://demo.static.tools/media/images/composite-001-large-black.jpg","url":"https://demo.static.tools/products/c-and-g-shirt","price":29,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Size","id":"size","attribute":true},{"label":"Color","id":"color","attribute":true}],"products":["composite1largeblack","composite1largeblue","composite1largegreen","composite1largegrey","composite1largepurple","composite1largered","composite1largewhite","composite1largeyellow","composite1mediumblack","composite1mediumblue","composite1mediumgreen","composite1mediumgrey","composite1mediumpurple","composite1mediumred","composite1mediumwhite","composite1mediumyellow","composite1smallblack","composite1smallblue","composite1smallgreen","composite1smallgrey","composite1smallpurple","composite1smallred","composite1smallwhite","composite1smallyellow"],"digital":false,"addons":[]}
C&G Shirt
$25.00
Demonstrates the automatic resolving of a sub-product back to the parent composite product
{"id":"composite1largepurple","type":"product","name":"C&G Shirt","image":"https://demo.static.tools/media/images/composite-001-large-purple.jpg","url":"https://demo.static.tools/products/c-and-g-shirt","price":25,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"attributes":{"size":"Large","color":"Purple"},"group":"composite1","digital":false,"addons":[]}
C&G Vibrant Shirt
$26.00
Demonstrates the handling when the available product attributes are severely limited or mutually exclusive
{"id":"composite2","type":"product","name":"C&G Vibrant Shirt","image":"https://demo.static.tools/media/images/composite-002-large-blue.jpg","url":"https://demo.static.tools/products/c-and-g-vibrant-shirt","price":26,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Size","id":"size","attribute":true},{"label":"Color","id":"color","attribute":true},{"label":"Cut","id":"cut","attribute":true},{"label":"Fabric","id":"fabric","attribute":true}],"products":["composite2largeblue","composite2largegreen","composite2largepurple","composite2largered","composite2largeyellow","composite2mediumblue","composite2mediumgreen","composite2mediumpurple","composite2mediumred","composite2mediumyellow","composite2smallblue","composite2smallgreen","composite2smallpurple","composite2smallred","composite2smallyellow"],"digital":false,"addons":[]}
C&G Vibrant Shirt
$20.00
Demonstrates the automatic resolving of a sub-product back to the parent composite product
{"id":"composite2mediumgreen","type":"product","name":"C&G Vibrant Shirt","image":"https://demo.static.tools/media/images/composite-002-large-green.jpg","url":"https://demo.static.tools/products/c-and-g-vibrant-shirt","price":20,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"description":"Medium Green Regular Cotton","attributes":{"size":"Medium","color":"Green","cut":"Regular","fabric":"Cotton"},"group":"composite2","digital":false,"addons":[]}
Notes
- Composite products resolve to a single product within the cart
- See the composite product documentation
Quantity Limits & Steps
Products with restricted quantities or alternate increment steps
Chakra Bracelet - Black
$10.00
Demonstrates a minimum quantity of 4
{"id":"quantity1","type":"product","name":"Chakra Bracelet - Black","image":"https://demo.static.tools/media/images/quantity-001.jpg","url":"https://demo.static.tools/products/chakra-bracelet-black","price":10,"dimensions":{"height":2,"length":10,"width":10,"weight":30},"available":true,"digital":false,"quantity":{"minimum":4},"addons":[]}
Chakra Bracelet - Purple
$10.00
Demonstrates a maximum quantity of 8
{"id":"quantity2","type":"product","name":"Chakra Bracelet - Purple","image":"https://demo.static.tools/media/images/quantity-002.jpg","url":"https://demo.static.tools/products/chakra-bracelet-purple","price":10,"dimensions":{"height":2,"length":10,"width":10,"weight":30},"available":true,"digital":false,"quantity":{"maximum":8},"addons":[]}
Chakra Bracelet - Rainbow
$10.00
Demonstrates a step of 3
{"id":"quantity3","type":"product","name":"Chakra Bracelet - Rainbow","image":"https://demo.static.tools/media/images/quantity-003.jpg","url":"https://demo.static.tools/products/chakra-bracelet-rainbow","price":10,"dimensions":{"height":2,"length":10,"width":10,"weight":30},"available":true,"digital":false,"quantity":{"step":3},"addons":[]}
Embroidered Bracelet
$10.00
Demonstrates a minimum, maximum and step all in effect at once
{"id":"quantity4","type":"product","name":"Embroidered Bracelet","image":"https://demo.static.tools/media/images/quantity-004.jpg","url":"https://demo.static.tools/products/embroidered-bracelet","price":10,"dimensions":{"height":2,"length":10,"width":10,"weight":45},"available":true,"digital":false,"quantity":{"minimum":5,"step":5,"maximum":50},"addons":[]}
Notes
- Used to enforce a minimum and/or maximum quantity per order
- Steps allow for a non-standard increment/decrement amount (e.g. counting by 2 or 5)
- See the quantity attribute documentation
Configurable Products
Products that can be customized at the point of purchase
3 x Bath Bombs
$24.00
Demonstrates 'Select' fields
{"id":"configurable1","type":"product","name":"3 x Bath Bombs","image":"https://demo.static.tools/media/images/configurable-001.jpg","url":"https://demo.static.tools/products/3-x-bath-bombs","price":24,"dimensions":{"height":30,"length":30,"width":30,"weight":180},"available":true,"fields":[{"label":"Flavour #1","id":"bomb1","options":[{"id":"Apple"},{"id":"Chamomile"},{"id":"Cherry"},{"id":"Eucalyptus"},{"id":"Green Tea"}]},{"label":"Flavour #2","id":"bomb2","options":[{"id":"Lavender"},{"id":"Lemon"},{"id":"Mango"},{"id":"Milk"},{"id":"Orange"}]},{"label":"Flavour #3","id":"bomb3","options":[{"id":"Peppermint"},{"id":"Pineapple"},{"id":"Rose"},{"id":"Vanilla"},{"id":"Watermelon"}]}],"digital":false,"addons":[]}
Bath Bliss Gift Pack
$20.00
Demonstrates 'Radio' fields
{"id":"configurable2","type":"product","name":"Bath Bliss Gift Pack","image":"https://demo.static.tools/media/images/configurable-002.jpg","url":"https://demo.static.tools/products/bath-bliss-gift-pack","price":20,"dimensions":{"height":30,"length":40,"width":30,"weight":100},"available":true,"fields":[{"label":"Bath Bomb Flavour","id":"bomb","options":[{"id":"Apple"},{"id":"Lemon"},{"id":"Peppermint"},{"id":"Rose"}],"type":"radio"},{"label":"Candle Fragrance","id":"candle","options":[{"id":"Lavender"},{"id":"Rose"},{"id":"Vanilla"}],"type":"radio"}],"digital":false,"addons":[]}
Serenity Gift Pack
$26.00
Demonstrates 'Checkbox' fields
{"id":"configurable3","type":"product","name":"Serenity Gift Pack","image":"https://demo.static.tools/media/images/configurable-003.jpg","url":"https://demo.static.tools/products/serenity-gift-pack","price":26,"dimensions":{"height":35,"length":35,"width":30,"weight":100},"available":true,"fields":[{"label":"Gift Wrapping","id":"wrapping","options":[{"id":"Add Free Gift Wrapping"}],"type":"checkbox"}],"digital":false,"addons":[]}
Scented Salts Gift Pack
$29.00
Demonstrates 'Text' and 'Textarea' fields and the 'Required' feature
{"id":"configurable4","type":"product","name":"Scented Salts Gift Pack","image":"https://demo.static.tools/media/images/configurable-004.jpg","url":"https://demo.static.tools/products/scented-salts-gift-pack","price":29,"dimensions":{"height":40,"length":40,"width":40,"weight":220},"available":true,"fields":[{"label":"Recipient Name","id":"name","type":"text","required":true},{"label":"Gift Message","id":"message","type":"textarea","required":true}],"digital":false,"addons":[]}
Notes
- Available field types are Select, Radio, Checkbox, Text, Textarea, Number
- See the fields attribute documentation
Delta Pricing
Products where selections made by the customer adjust the price
Salmon Fillets
$12.50
Demonstrates 'Select' and 'Radio' field price modifiers
{"id":"delta1","type":"product","name":"Salmon Fillets","image":"https://demo.static.tools/media/images/delta-001.jpg","url":"https://demo.static.tools/products/salmon-fillets","price":12.5,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Flavour","id":"flavour","options":[{"id":"Natural"},{"id":"Smoked","price":1}]},{"label":"Cut Size","id":"size","options":[{"id":"Regular"},{"id":"Thick Cut","price":3}],"type":"radio"}],"digital":false,"addons":[]}
Salmon Slices
$10.75
Demonstrates 'Checkbox' field price modifiers
{"id":"delta2","type":"product","name":"Salmon Slices","image":"https://demo.static.tools/media/images/delta-002.jpg","url":"https://demo.static.tools/products/salmon-slices","price":10.75,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Customize","id":"customize","type":"checkbox","options":[{"label":"Smoked","price":1},{"label":"Thick Cut","price":3}]}],"digital":false,"addons":[]}
Salmon Chunks
$14.00
Demonstrates negative price modifiers
{"id":"delta3","type":"product","name":"Salmon Chunks","image":"https://demo.static.tools/media/images/delta-003.jpg","url":"https://demo.static.tools/products/salmon-chunks","price":14,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Flavour","id":"flavour","options":[{"id":"Smoked"},{"id":"Natural","price":-1}]},{"label":"Cut Size","id":"size","options":[{"id":"Thick Cut"},{"id":"Regular","price":-3}],"type":"radio"}],"digital":false,"addons":[]}
Salmon Sashimi
$9.00
Demonstrates fields that represent an 'additional' item
{"id":"delta4","type":"product","name":"Salmon Sashimi","image":"https://demo.static.tools/media/images/delta-004.jpg","url":"https://demo.static.tools/products/salmon-sashimi","price":9,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"label":"Soy Sauce","id":"soy","options":[{"id":"None"},{"id":"Single serve","price":0.25},{"id":"Large serve","price":0.5}],"additional":true},{"label":"Wasabi","id":"wasabi","options":[{"id":"None"},{"id":"Single serve","price":0.75},{"id":"Large serve","price":1.25}],"type":"radio","additional":true},{"label":"Pickled Ginger","id":"ginger","options":[{"id":"Single serve","price":0.5}],"type":"checkbox","additional":true}],"digital":false,"addons":[]}
Notes
- Configurable fields can adjust the price of the product
- See the fields attribute documentation
- See the delta pricing example documentation
Multi-Currency Support
Products can be priced in multiple currencies
Notes
- The available currencies are configured within the Admin
- See the price attribute documentation
Fractional Pricing
Products where the price is calculated by a fractional unit
C&G Fabric Purple
$5.00 per meter
Demonstrates fractional pricing with a minimum, maximum & precision of 1 decimal place
{"id":"fractional1","type":"product","name":"C&G Fabric Purple","image":"https://demo.static.tools/media/images/fractional-001.jpg","url":"https://demo.static.tools/products/c-and-g-fabric-purple","price":5,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"id":"length","label":"Length (in meters)","description":"Meters between 0.1 and 30","maximum":30,"minimum":0.1,"precision":1,"type":"number","multiplier":true}],"digital":false,"quantity":{"fixed":1},"addons":[]}
C&G Fabric Blue
$12.00 per meter
Demonstrates fractional pricing with a minimum, maximum & precision of 1 decimal place
{"id":"fractional2","type":"product","name":"C&G Fabric Blue","image":"https://demo.static.tools/media/images/fractional-002.jpg","url":"https://demo.static.tools/products/c-and-g-fabric-blue","price":12,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"id":"length","label":"Length (in meters)","description":"Meters between 2.5 and 20","maximum":20,"minimum":2.5,"precision":1,"type":"number","multiplier":true}],"digital":false,"quantity":{"fixed":1},"addons":[]}
C&G Fabric Green
$16.50 per meter
Demonstrates fractional pricing with a minimum, maximum & precision of 2 decimal places
{"id":"fractional3","type":"product","name":"C&G Fabric Green","image":"https://demo.static.tools/media/images/fractional-003.jpg","url":"https://demo.static.tools/products/c-and-g-fabric-green","price":16.5,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"id":"length","label":"Length (in meters)","description":"Meters between 0.05 and 10","maximum":10,"minimum":0.05,"precision":2,"type":"number","multiplier":true}],"digital":false,"quantity":{"fixed":1},"addons":[]}
C&G Fabric Red
$19.00 per meter
Demonstrates fractional pricing with a minimum, maximum, step & precision of 2 decimal places
{"id":"fractional4","type":"product","name":"C&G Fabric Red","image":"https://demo.static.tools/media/images/fractional-004.jpg","url":"https://demo.static.tools/products/c-and-g-fabric-red","price":19,"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"fields":[{"id":"length","label":"Length (in meters)","description":"Meters between 0.25 and 7.25","maximum":7.25,"minimum":0.25,"precision":2,"step":0.25,"type":"number","multiplier":true}],"digital":false,"quantity":{"fixed":1},"addons":[]}
Notes
- Allows for the purchase of items by any non-integer values (e.g. weight or length)
- See the fields attribute documentation
- See the fractional example documentation
Bulk Pricing
Products that support bulk pricing for higher volume purchases
Tramways
$50.00
Demonstrates bulk pricing occuring at 3 units and 6 units
{"id":"bulk1","type":"product","name":"Tramways","image":"https://demo.static.tools/media/images/bulk-001.jpg","url":"https://demo.static.tools/products/tramways","price":{"default":{"AUD":{"1":50,"3":45,"6":42.5}}},"dimensions":{"height":30,"length":15,"width":24,"weight":1000},"available":true,"digital":false,"addons":[]}
Southern Dusk
$48.00
Demonstrates bulk pricing occuring at 5 units and 10 units
{"id":"bulk2","type":"product","name":"Southern Dusk","image":"https://demo.static.tools/media/images/bulk-002.jpg","url":"https://demo.static.tools/products/southern-dusk","price":{"default":{"AUD":{"1":48,"5":43.2,"10":38.4}}},"dimensions":{"height":30,"length":15,"width":24,"weight":1000},"available":true,"digital":false,"addons":[]}
Port Heritage
$46.50
Demonstrates bulk pricing occuring at 5 units and 10 units, with a price modifier field
{"id":"bulk3","type":"product","name":"Port Heritage","image":"https://demo.static.tools/media/images/bulk-003.jpg","url":"https://demo.static.tools/products/port-heritage","price":{"default":{"AUD":{"1":46.5,"5":41.85,"10":37.2}}},"dimensions":{"height":30,"length":15,"width":24,"weight":1000},"available":true,"fields":[{"id":"adjust","label":"Adjust","type":"checkbox","options":[{"label":"Extra Roasted","price":{"default":{"AUD":{"1":5,"5":3,"10":2}}}}]}],"digital":false,"addons":[]}
Carbide
$58.00
Demonstrates bulk pricing occuring at many unit counts
{"id":"bulk4","type":"product","name":"Carbide","image":"https://demo.static.tools/media/images/bulk-004.jpg","url":"https://demo.static.tools/products/carbide","price":{"default":{"AUD":{"1":58,"2":54.6,"3":50.75,"4":48.2,"5":46.4,"10":42.5}}},"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"digital":false,"addons":[]}
Notes
- The unit price of the item is determined based on the product quantity
- See the product price documentation
Wholesale
Easily define alternate price lists and support wholesale with one site
Sour Worms
$26.00
undefined
{"id":"wholesale1","type":"product","name":"Sour Worms","image":"https://demo.static.tools/media/images/wholesale-001.jpg","url":"https://demo.static.tools/products/product1","price":{"default":26,"wholesale":13},"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"digital":false,"addons":[]}
Starburst
$30.00
undefined
{"id":"wholesale2","type":"product","name":"Starburst","image":"https://demo.static.tools/media/images/wholesale-002.jpg","url":"https://demo.static.tools/products/product1","price":{"default":30,"rrp":35,"sale":28,"vip":25,"wholesale":20},"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"digital":false,"addons":[]}
Candy Eggs
$35.00
undefined
{"id":"wholesale3","type":"product","name":"Candy Eggs","image":"https://demo.static.tools/media/images/wholesale-003.jpg","url":"https://demo.static.tools/products/product1","price":{"default":{"AUD":35,"CAD":31.5,"EUR":21.6,"GBP":18.2,"JPY":2600,"NZD":36.5,"USD":24},"rrp":{"AUD":40,"CAD":36,"EUR":24.7,"GBP":20.8,"JPY":3000,"NZD":41.7,"USD":27.4},"wholesale":{"AUD":30,"CAD":27,"EUR":18.5,"GBP":15.6,"JPY":2200,"NZD":31,"USD":20.5}},"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"digital":false,"addons":[]}
Jelly Beans
$38.00
undefined
{"id":"wholesale4","type":"product","name":"Jelly Beans","image":"https://demo.static.tools/media/images/wholesale-004.jpg","url":"https://demo.static.tools/products/product1","price":{"default":{"AUD":{"1":38,"5":35,"10":32},"CAD":{"1":34.3,"5":31.6,"10":28.9},"EUR":{"1":23.4,"5":21.6,"10":19.7},"GBP":{"1":19.8,"5":18.2,"10":16.7},"JPY":{"1":2800,"5":2600,"10":2400},"NZD":{"1":39.6,"5":36.5,"10":33.4},"USD":{"1":26,"5":24,"10":22}},"wholesale":{"AUD":{"1":28,"5":25,"10":22},"CAD":{"1":25.3,"5":22.6,"10":19.9},"EUR":{"1":17.3,"5":15.4,"10":13.6},"GBP":{"1":14.6,"5":13,"10":11.5},"JPY":{"1":2000,"5":1800,"10":1600},"NZD":{"1":29.2,"5":26,"10":23},"USD":{"1":19.2,"5":17,"10":15}}},"dimensions":{"height":4,"length":30.48,"width":22.86,"weight":130},"available":true,"digital":false,"addons":[]}
Notes
- Use the promo code wholesale to activate wholesale pricing for these products within the cart
- See the price attribute documentation
Discounts System
Full discounts system supporting promo codes, % and fixed discounts, and buy X get Y discounts
Phone
$1,325.00
Demonstrates two public discounts, a 'buy X get Y' discount and a '% off' discount
{"id":"discount1","type":"product","name":"Phone","image":"https://demo.static.tools/media/images/discount-001.jpg","url":"https://demo.static.tools/products/phone","price":1325,"dimensions":{"height":10,"length":18,"width":5,"weight":190},"available":true,"digital":false,"addons":[]}
Wireless Headphones
$70.00
Demonstrates that an item added via a 'buy X get Y' discount can also exist as a normal product
{"id":"discount2","type":"product","name":"Wireless Headphones","image":"https://demo.static.tools/media/images/discount-002.jpg","url":"https://demo.static.tools/products/wireless-headphones","price":70,"dimensions":{"height":8.38,"length":18.8,"width":24.38,"weight":220},"available":true,"digital":false,"addons":[]}
Fitness Band
$15.00
Demonstrates promo code based discounts, enter 'fitnessfirst' and add a Fitness Band and Cover to the cart
{"id":"discount3","type":"product","name":"Fitness Band","image":"https://demo.static.tools/media/images/discount-003.jpg","url":"https://demo.static.tools/products/fitness-band","price":15,"dimensions":{"height":0.9,"length":12,"width":4,"weight":80},"available":true,"digital":false,"addons":[]}
Fitness Band Cover - Pink
$4.00
Demonstrates promo code based discounts, enter 'fitnessfirst' and add a Fitness Band and Cover to the cart
{"id":"discount4","type":"product","name":"Fitness Band Cover - Pink","image":"https://demo.static.tools/media/images/discount-004.jpg","url":"https://demo.static.tools/products/fitness-band-cover-pink","price":4,"dimensions":{"height":0.9,"length":12,"width":4,"weight":30},"available":true,"digital":false,"addons":[]}
CodePen Examples
See how easy Commerce is to work with.
Add to cart
See the Pen static.tools/commerce - Add To Cart Example by Matthew White (@statictools) on CodePen.
Basic product tile
See the Pen static.tools/commerce - Tile Example by Matthew White (@statictools) on CodePen.
In-page product configuration
See the Pen static.tools/commerce - Product Configuration Example by Matthew White (@statictools) on CodePen.
Custom Cart UI - Vanilla JavaScript
See the Pen static.tools/commerce - Vanilla JavaScript E-Commerce Example by Matthew White (@statictools) on CodePen.
Custom Cart UI - React
See the Pen static.tools/commerce - React E-Commerce Example by Matthew White (@statictools) on CodePen.
Custom Cart UI - Vue
See the Pen Vue by Matthew White (@statictools) on CodePen.