A practical guide to editing this Framer concept. Original artwork, editable objects and a complete browser shopping demo.
Select this component in Framer. Change Brand, Hero title, Hero note, Paper color, Lime accent and the top announcement in the property panel. Product artwork shape, color and background are editable in Products. The SVG drawing internals live in this code component, rather than separate native Framer layers.
Open Products in the property panel. Every entry has a name, maker, price, collection, material, artwork type, color, detail and care fields. Add your own image using the optional Image field, or keep the built-in vector drawing.
Use one component instance per page and select its Page mode: Home, Shop, Story, Journal, Guide or NotFound. Collection pages use Shop mode with Initial collection. Update navigation URL controls to match your native Framer paths.
Product JSON overrides the visual Products list when it contains a valid array. Open the example below, select its text and paste it into Product JSON. Invalid or incomplete data falls back to the concept collection. Currency changes the display symbol only; it does not convert product prices.
Each product needs every field shown. Use a unique id of 1–40 letters, numbers, underscores or hyphens. Price is a number from 0 to 100000, rounded to two decimal places. Add 1–100 products to the array.
Collections: Kitchen, Bath, On the go, Home.
Artwork shapes: bottle, cup, soap, tote, brush, jar, towel, planter, bowl, candle, notebook, lunchbox, vase, baskets, watering, comb.
Use hexadecimal colors, such as #41674F, for color and background. The optional tag field adds a short label; optional image accepts a public HTTPS image URL and replaces the vector drawing. Brand and page controls stay editable in the Framer property panel. To change a drawing’s individual paths or texture, edit ProductArt, HeroArt or MakerArt in CommonGround.tsx.
Search, filters, saved objects, quantity, the bag and demo checkout work in the browser. Real payments, inventory, tax, shipping, emails and accounts require a separately configured commerce service. This template does not send payment or personal data.
All supplied makers, products, prices and stories are fictional. Replace specifications, care notes, policies and sustainability language with verified supplier information. Do not present concept artwork as a photo of a product you sell.
Real clarity, from the small print
to the bigger questions.
This is a storefront concept. All objects, makers, prices and stories are fictional. The shopping bag works locally, but demo checkout never creates an order or takes a payment.
There is no single label that answers that question. Material origins, production, transport, expected use and end-of-life all matter. This template makes no verified environmental claims. Replace concept content with evidence from real suppliers before selling.
Shipping and returns are not offered in this demo. A real store needs accurate delivery regions, costs, dispatch times and return terms. No shipping charge or tax is invented here.
Yes, when your browser allows local storage. Saved objects and your bag are stored only in this browser. If storage is blocked, they remain available during your current visit. No account is created.
Yes. The Framer component includes original vector artwork, editable brand and page controls, and an optional JSON product dataset. Real product photography, pricing and supplier information can replace this fictional collection.