Edit me
Make GROVE yours.
Everything shoppers see comes from the CMS, a few labelled controls and your Shopify store.
/01
Edit your formulas
CMS › Formulas. One item per product: Name, Slot and Time (they drive the day timeline and the hero deck), Colour, Tint and Day ground, Shot, Jar cut-out, Short line, Benefit, Ingredients (comma separated), Price, How to take and Description.
Order sets the order everywhere. Every deck, timeline, builder, chip row and grid reads this collection, so a change shows up across the site at once. Tick Sold out to grey a formula out. Works with 1 to 3 formulas; the timeline takes up to 4.
/02
Swap the images
Shot: 4:5, the jar front-on and centred, with the same framing in every formula, so the swap lines up. Jar cut-out: a transparent PNG or WebP of the jar alone (used in the deck, the stack and the bag).
Hero: 16:10 or wider. Lifestyle: 4:5. Ingredients: 16:10. Box: 1:1. Select an image and use Replace in the right panel.
/03
Place the hero deck and copy
Select Hero Photo on Home. Crop focus X/Y % keeps the right part of the photo in view; Deck right X % and Deck bottom Y % place the card stack on your photo (as a percentage of the photo). The deck opens on the visitor’s time of day and cycles every few seconds.
The headline sits on the left of the photo. If your photo is busy there, raise Crop focus X or use a photo with calm space on the left.
/04
Ingredient callouts
Select Ingredient Map on Home. Each callout has a label, an amount, X/Y % on the photo and Above/Below. Amounts on the demo are placeholders: use the figures from your own label.
Keep claims to your approved label wording. The demo copy avoids health claims on purpose.
/05
Connect Shopify
Open the Main layout template, select Bag drawer and paste your store domain (your-store.myshopify.com). Set currency there too.
One-time bags check out with a Shopify cart link. No app, API key or token is needed. With no store set, the demo shows the checkout link it would open.
/06
Paste variant IDs
In Shopify admin, open a product and click its variant: the number at the end of the URL is the variant ID. Paste it into Variant ID on the matching formula in CMS › Formulas.
Missing an ID? The Add button says what to fill in instead of failing silently.
/07
Subscriptions (optional)
Install a Shopify subscriptions app and create a selling plan (for example: delivered every 30 days, 10% off). Copy each plan’s ID (the number at the end of its ID, or the full gid://shopify/SellingPlan/… value) into Selling plan ID on each formula.
When a shopper picks Subscribe, checkout posts the bag to your store’s /cart/add with each line’s selling_plan, then opens checkout. No token is needed. Leave Selling plan ID empty, or turn off Subscribe option on the Stack Builder and Buy Box, to sell one-time only. Set Subscribe % to match your plan’s discount so the totals shown here agree with checkout.
/08
Bundle codes
Create two discount codes in Shopify › Discounts: STACK10 (10% off) and STACK20 (20% off). In the Bag drawer, 2 formulas code and 3 formulas code hold them, with the matching percentages.
The bag counts the different formulas in it and passes the right code to checkout automatically. Set the same percentages on the Stack Builder so the live badge matches.
/09
Preorder or waitlist
Stack Builder › Mode and Buy Box › Mode switch the buttons between Buy, Preorder (with a ship note) and Waitlist (links to your waitlist page or form).
/10
Brand, colours and type
Colours live in the colour styles (Oat, Paper, Forest, Moss, Sage, Clay, Night). Text uses the text styles in Instrument Sans.
The wordmark is the Wordmark component (Cormorant Garamond): select it and change the text.
/11
Before you publish
Replace hello@example.com on the Contact page, check the Legal page with your own terms, and set the site title, description and favicon in Site Settings.