Custom cake builder

The cake builder replaces the back-and-forth of a custom order with six numbered steps on the product page: size, flavour and filling, frosting colour, a message, an inspiration photo and add-ons. A live summary card sits under them, and the add button carries the running total ("Add to bag · $163.00"). What the shopper chose arrives on the order, line by line, with the photo.

Set up a cake product

1. Create the product in admin, with an option called Size and one variant per size, each at its own price: "6 inch" at $95.00, "8 inch" at $145.00, "10 inch" at $210.00. Give each variant its own image if you have one: the summary card uses it.
2. Tag it custom-cake (or the tag you set in Theme settings › Cake builder › Cake builder tag).
3. Add the servings to each variant, in the custom.servings metafield ("Serves 10–12", chapter 7).
4. Set the lead time in the product's custom.lead_days metafield. It sets the first date in the bag (chapter 8).
5. Set up the block. In the theme editor, open a cake product's page, select the Cake builder block under the Product section, and fill in your flavours, fillings and add-ons. The block holds a Frosting colour block for each colour: rewrite the six it comes with, and add or delete any.

The block's settings apply to every product that uses that template. To give wedding cakes different flavours from birthday cakes, Create template from the product template and assign it to those products.

The block sits in the product template of every preset, and it shows only on tagged products. On any other product shoppers see the normal Variant picker, and in the theme editor the block shows a sample tagged Sample, with the note "Shoppers see this builder on products tagged custom-cake", so you can style it before you have a cake product.

The block's settings

Each Frosting colour block has a Label ("Strawberry milk") and a Frosting colour (#F4B6C2).

What shoppers see

1. Size: cards from your size option, each with the size, its custom.servings and its price. If the product has other options, they show here too. A sold-out size is struck through, says Sold out and can't be chosen.
2. Flavour and filling: two menus side by side.
3. Frosting colour: round swatches, with the chosen colour's name beside the step's heading, so colour is never the only cue.
4. Message on top: a text field with a live count ("15 of 30").
5. Inspiration photo: an optional upload, with a thumbnail and Remove photo once chosen.
6. Add-ons: a checkbox for each add-on, with its name and price ("+ $18.00").

Then comes the Your cake summary, with a small round of the chosen size's image and one sentence that builds as they choose: "8 inch, vanilla bean with raspberry jam, strawberry milk frosting. "Happy 40th, Bec". Fresh flowers." The total follows it, and the add button carries the same total, add-ons and quantity included.

A step with nothing to offer is skipped and the rest renumber: no flavours or fillings, no frosting colours, no photo, no add-ons, or a product with only one variant.

Size, flavour, filling and frosting are required, when you offer them. The message and the photo are optional. Add to bag is never greyed out: pressing it with something missing moves the shopper to the first unfinished step, which says what's needed ("Please choose a frosting colour."). The sticky bar's button does the same.

Buy it now and the accelerated checkout buttons are hidden on every cake builder product, whatever the Buy buttons block's settings, because they'd skip the steps and the date. Cards read Start your cake and link to the product page, and quick view does the same: the builder only runs on the product page and in a Featured product section.

The message limit

Typing stops at the Message limit. A paste or a drop that would go over is refused whole, with a message, rather than quietly cut: "That's 42 characters and the limit is 30, so it wasn't added." That matters because half a birthday message is worse than none. An emoji counts as one character.

Set the limit to what fits on your smallest cake, and use Message help text to set expectations ("We pipe it by hand.").

The inspiration photo

The photo goes to Shopify along with the cake, in the same request to Shopify's /cart/add.js, so there's no upload app and no third-party storage. Shoppers can choose a JPG, PNG, HEIC or WEBP file, and the prompt says so: "Add a photo. JPG, PNG, HEIC or WEBP, up to 10 MB."

The file is checked before anything is sent, and refused with its reason ("That file is 14 MB. The limit is 10 MB.", "That's a PDF file. Please use a JPG, PNG, HEIC or WEBP photo."). On some browsers a HEIC file shows its name without a thumbnail. The photo still uploads.

In the bag, the line shows a small thumbnail linked to the file. On the order in admin, the Inspiration photo line under the cake is a link to the image on Shopify's servers. Open it from there.

Add-ons

An add-on is an ordinary product: fresh flowers, gold leaf, candles. Create one with a single variant and a price, then choose it in the block. Add-ons don't need a discount or an app, and they keep their own stock, SKU and tax settings.

• Each add-on must be Active and published to your Online Store sales channel, or the setting comes back empty and the add-on doesn't show. A sold-out add-on hides.
• To keep add-ons out of your catalogue, leave them out of your collections, and don't use an automated collection that picks them up. To keep them out of storefront search as well, add Shopify's seo.hidden metafield to the product (a definition with the namespace and key seo.hidden, type Integer, and the value 1).
• The add-on's line follows its cake. It sits under the cake in the bag with no stepper of its own, its quantity follows the cake's, and removing the cake removes it. The bag's count leaves add-ons out, so one cake with flowers is one item.
• Add-ons are added in the same step as the cake. Each is its own line on the order, with a For property naming the cake.

On the order

Each cake is one line item with these properties, in this order. They show under the line in the bag, at checkout and on the order in admin:

The property names stay the same whatever you call the steps: a Flavour label of "Sponge" still arrives as Flavour. Choices the shopper didn't make, or that you don't offer, are left out. Two hidden properties, _cake_id on the cake and _addon_for on its add-ons, tie them together. They start with an underscore, so Shopify hides them at checkout, and you can ignore them.

Two identical cakes added separately stay two lines, each with its own add-ons.

The builder on the home page

The Tier preset puts the builder on the home page, in a Featured product section with a Heading, Price, Lead time note, Cake builder, Buy buttons, and Allergens and dietary. Choose your cake in the section's Product setting. It must carry the Cake builder tag, and the Frosting colour blocks live in this copy of the block, separate from the one on the product page. It comes with the same six. With no product chosen, shoppers see nothing here. The sticky bar doesn't show here, because it's for product pages.