In your own copy, start with checkout off: on Mix card, turn Demo checkout off on every GlooMixCard instance in Desktop, Tablet and Phone. On Home, select GlooMix inside Build your bag, edit a flavour, pick five portions and use Review my mix. Download and sharing work without checkout. Keep checkout off until the key, pin, host and public declaration checks in the optional advanced setup below pass. No real sweets are sold or shipped.
Change the words and colours.
The navigation, main headline, introduction, story and footer are native editable layers. Open GLOO shell for shared navigation and footer across Home, Mix card, this guide and the custom 404. Colour styles and text styles apply to native layers. GlooMix and GlooMixCard have their own Ink, Cream, Accent, Body family and Display family controls; set each component separately. These controls do not change the SVG’s fixed ink/background colours or embedded type in GlooRecipe.ts. Snipcart’s checkout interface has its own styling in the checkout integration.
Make the jelly your own.
Select Living jelly sculpture on Home, then the GlooJelly instance. Its Raspberry, Lime and Jelly flavor controls change the scene. The artwork is procedural3D: no paid model or image licence is needed. The editor shows a still preview; Preview and the published demo run the live scene. Drag sideways or use Squish the jelly. Scrolling still works on a phone.
Edit the mix.
On Home, select GlooMix inside Build your bag. In Flavors, keep exactly three items with Shape set once each to Strawberry, Peach and Lime. These are the three fixed fruit drawings; leave those Shape choices unchanged. Within each item, edit Name, Note and Jelly. Set Brand and Heading on GlooMix. Pick five 50 g portions, totalling 250 g, then use Review my mix to open /mix. The card and SVG carry the recipe’s brand, flavour names, colours and weights; the Test cart uses the same recipe. Edit this mix returns counts by the stable strawberry, peach and lime IDs; it does not copy custom brand, names or colours back into the builder. Save draft on this device and Restore draft keep unfinished work locally.
Before a real shop goes live.
The demo uses Snipcart Test mode with shipping disabled. A successful checkout creates a Test order only; no real payment or shipment occurs. Use fictional contact details and the test card shown in checkout. Opening checkout loads Snipcart and transfers your mix and any details you enter to its Test service. The recipe card is not a receipt. A real shop needs verified products, ingredients, allergens, stock, pricing, delivery, privacy information and production checkout. GLOO makes no food, dietary or nutritional claims.
Check the small screens.
Check Home, Mix card, this guide and 404 at Desktop, Tablet and Phone widths. In the builder, try empty and full bags, add/remove, reset/undo and draft restoration. Follow Review my mix, download the SVG, open the shared link elsewhere and use Edit this mix to check its counts-only return. Check missing or invalid recipe links, keyboard focus and reduced motion. Try your own Snipcart Test checkout only after the optional setup below, with fictional details and the provider’s test payment data. No real card or address is needed. If WebGL fails, the still artwork and builder remain available.
Support and optional Test setup.
The sculpture, fruit illustrations, pouch and recipe card are original code artwork. Fonts are Chewy and Nunito Sans from Framer. The SVG is self-contained and editable. Keep all six local files—GlooJelly, GlooMix, GlooRecipe, GlooMixCard, GlooSandbox and GlooSandboxCatalog—and their relative imports together.
Optional advanced setup: your own Test checkout
This needs one code edit plus the Result controls. Work in your own copy. Keep Demo checkout off in every GlooMixCard instance on Mix card, including Desktop, Tablet and Phone, until steps 1–5 are complete. Copied instances may retain enabled overrides.
In your Snipcart account’s actual Test dashboard, identify and copy its Public TEST API key. Never use a secret or Live key. A matching hash does not prove that a key belongs to Test mode.
Compute the key’s SHA-256 locally on your Mac. Replace PUBLIC_TEST_KEY below with exactly that public Test key as one ASCII token. Include no leading/trailing spaces, line break or newline in the key. Run in Terminal:
printf %s PUBLIC_TEST_KEY | shasum -a 256
printf adds no newline. Copy only the 64 lowercase hexadecimal characters, not the trailing spaces or dash. No external hashing website is needed.Open GlooSandbox.ts. Replace only the quoted value of APPROVED_PUBLIC_TEST_KEY_SHA256 with those 64 characters and save. Do not remove the key check or change it to trim or accept other keys. Pasting a new key into a visual control alone cannot update this pin.
Publish your copy with checkout still off. In your Test dashboard, allow its exact published HTTPS host. Keep /guide public and readable without sign-in. View the initial page source and find the actual product element whose data-item-id is gloo-mix-250-demo-v1; a match in this guide’s prose is not enough. On that element check data-item-price is 9 (USD), data-item-weight is 250, data-item-min-quantity is 1, data-item-max-quantity is 1, data-item-shippable is false and data-item-taxable is false. Keep the Result matched to this fixed five-portion, 250 g item.
On Mix card, select each GlooMixCard instance in Desktop, Tablet and Phone. Set Public TEST key to exactly the key you hashed and check every override. Only after the key, pin, host and public declaration checks pass, enable Demo checkout on those instances.
Publish your Test demo and complete a provider Test checkout with fictional details and the provider’s test payment data. In your own Snipcart Test dashboard, confirm the provider-created order shows USD 9, 250 g, quantity 1 and the exact selected mix, not just an order number. Only that order confirms your account’s setup; the original demo’s order does not. No Live setup, real card, charge or shipment is part of this procedure.
Hosting follows Framer plans. Template questions: kamnev.apps@gmail.com. Public author: KamnevApps.
One sample bag. A full demo checkout.
This fictional 250 g bag demonstrates the complete cart, details, test payment and confirmation flow. Nothing is charged or shipped. Use fictional details and only the test payment information shown in the checkout notice.
Sample price: USD 9.00. This is a test amount, not a real offer to sell sweets. The exact five-portion mix is included with the test order. Shipping is disabled for this fictional demonstration.