Stack builder
Chapter 11 of the Clasp user guide.
Rings are bought in stacks, and charms on a chain. The Stack builder section lets shoppers build one on a display, see it as it will look, choose each piece's size and metal, and add the whole stack to the bag in one tap:
- The display: on a velvet lining band, your kicker ("Stack builder"), heading ("Build your stack") and text, over your Display image (a ring cone, a ring stand or a necklace bust) set in an arch, an oval or a square. The pieces the shopper picks are layered on it in the order picked: on a ring display the first ring sits lowest and each next one above it. Under it: "3 of 5 in your stack".
- The tray: a card with your Tray heading ("Choose your rings"), a link ("See all rings") and a tile for each piece: its photo, name, price and an add button. A picked tile is highlighted with its number in the stack. Sold-out products show a Sold out badge and can't be picked. Once the stack is full, the other tiles are disabled and the tray says "Your stack is full. Remove a piece to add another."
- Your stack: one row per picked piece with its number, photo and name, a menu for its size and one for its metal (and for any other option with more than one value; values nobody can buy say "(sold out)" and can't be chosen), its price and a remove button. A new piece starts in the size chosen for the piece before it, when it comes in that size, so a shopper chooses a size once.
- The foot: your discount note with a facet ("Stack 3 or more, save 10% at checkout"), which changes to your unlocked note with a check ("Stack discount unlocked: 10% off at checkout") once the stack is big enough; the number of pieces and the total; and Add stack to bag.
- Add stack to bag checks that every piece has an available size and metal. A piece without a size gets "Choose a size for the Sienna band" under its menu, and nothing is added until it has one. Then every piece goes into the bag together, the cart drawer opens with all of them, and screen readers hear "3 rings added to your bag". In the bag each piece's line says "from your stack".
A piece without a stack image still joins the stack: it shows as a small photo under the display ("Also in your stack") instead of a layer. Everything works from the keyboard; nothing needs dragging. Every change is announced to screen readers ("Sienna band added. 3 of 5 in your stack.").
Stack builder settings
| Setting | Default | What it does |
|---|---|---|
| Colour scheme | Lining band | Lining band, Page or Champagne band. The tray stays a light card on every band. |
| Anchor | stack | Links to #stack (the default) scroll here, such as the Charm hero's "Start with a chain" or a menu link to /#stack. Give a second stack builder on the same page another word. |
| Kicker, Heading, Text | "Stack builder", "Build your stack", "Pick up to five rings and see them layered on the velvet, in the order you choose. Stack three or more and save 10%." | Your words. Only promise a discount you've set up (below). |
| Pieces | Empty | The collection of pieces: up to 24, available ones first. Each piece's layer is its custom.stack_image metafield (chapter 7). |
| Pieces in a stack | 5 (2 to 8) | How many pieces a stack can hold |
| Display image | Empty | A ring display, ring cone or necklace bust on a plain ground. Never a person. |
| Display shape | Arch | Arch, Oval or Square |
| Display ratio | 4:5 | 4:5, 3:4 or 1:1. Use the shape your display photo was shot at. |
| Layer positions | Ring display | Ring display: centred, from the bottom up, each piece a little above the last (for a ring cone or stand). Necklace bust: the first piece at the centre of the chain, then out to either side, alternately (for charms). Custom: your own positions (below). |
| Custom positions | Empty | Custom only: one slot per line as x, y (percent of the base), first picked first, such as 50, 70. Pieces past the last slot show as photos under the display. |
| Piece size on the base | 40% (10 to 80) | How wide each layer is, as a share of the display's width |
| Size option name | Empty | The option the size menus use. Blank uses Ring size option names (chapter 9). For charms or chains, type "Length" or leave it blank. |
| Tray heading | Choose your rings | Above the tiles |
| Link label, Link | "See all rings", empty | A text link beside the tray heading, such as the collection. Hidden until both are set. |
| Button label | Add stack to bag | The add button |
| Discount note | Stack 3 or more, save 10% at checkout | The note above the total |
| Pieces that unlock the discount | 3 (0 to 8) | At this many pieces the discount note switches to the Unlocked note. 0 hides the note. |
| Unlocked note | Stack discount unlocked: 10% off at checkout | Shown once the stack holds that many pieces |
Stack images: for each piece, upload a transparent PNG of the piece alone, cropped tight, at least 800px wide, to its custom.stack_image metafield (chapter 7). For rings, photograph each band as it sits in the lowest place on your display, from the same angle as the display photo, and the theme moves it up for the later slots. For charms, photograph the charm alone. To show each metal, give each variant its own custom.stack_image: the stack then shows the metal the shopper chose. Try a few stacks in the theme editor and adjust Piece size on the base until the layers sit right.
In the theme editor, a stack builder with no collection shows six working sample rings ("Sample ring", $58.00), a sample velvet display and three sample layers, tagged Sample, so you can try it first. On your storefront, a stack builder with no collection shows nothing. Without a display image, the stage is a soft ground with the layers on top.
The stack discount
The theme only shows the discount note; it doesn't give a discount. The discount itself is an automatic discount you create in Shopify admin, and it applies at checkout to every order that qualifies, whether the pieces came from the stack builder or not. For "Stack 3 or more, save 10%":
- In admin, go to Discounts › Create discount › Amount off products.
- Choose Automatic discount as the method and give it a title shoppers will see at checkout, such as "Stack discount".
- Set the value to 10%, and under Applies to choose Specific collections and pick the stack builder's collection (Rings).
- Under Minimum purchase requirements, choose Minimum quantity of items and type 3.
- Set the dates and Save.
Then set the section's Pieces that unlock the discount to the same number (3), so the note turns to "unlocked" at the moment the discount starts to apply. For the Charm preset's "Add four charms and the chain is half price", use a Buy X get Y automatic discount instead (customer buys 4 items from your charms collection, customer gets 1 item from your chains collection at 50% off) and set Pieces that unlock the discount to 5 (a chain and four charms).
The Cart drawer and Cart sections each have a Stack discount note ("Stack 3 or more, save 10%: applied at checkout"), shown above the subtotal when the bag holds pieces added from a stack builder. Keep it in step with your discount, or clear it to hide it. If you don't offer a stack discount, set Pieces that unlock the discount to 0, clear the two cart notes and take "save 10%" out of the section's text.