Goal finder

Most shoppers arrive knowing what they want help with, not which product they need. The goal finder starts there: tap a goal to see what fits, or answer three questions and get a starter stack of up to three products, added to the bag in one tap.

What shoppers see

• Goal tiles: tall rounded squares in their goal colours, each with an icon, the name ("Sleep"), the number of matching products ("14 products"), a product picture and an arrow.

• The quiz strip under the tiles: "Not sure where to start?", "Three questions, about 30 seconds. No email needed." and Start the quiz.

• The quiz opens in place of the strip, with three numbered discs and "Question 1 of 3":

  1. "What's your main goal?": a chip for each tile's goal, with its colour dot.
  2. "When do you take your vitamins?": Morning or Night.
  3. "Which format do you prefer?": Gummy, Capsule or Powder, each with its icon.

  Next stays disabled until an answer is chosen and reads See my stack on the last question; Back keeps the answer. The quiz works with the keyboard alone (Tab, the arrow keys, Space and Enter), and focus moves to each new question.

• Your starter stack: up to three rows, each with a picture on its goal colour, the name (a link), why it was picked ("Matches sleep · night · gummy", or "Fits your night routine" for a product picked for the routine), its price and a tick box. Under them, Subscribe and save 15% on the stack (ticked) when any of the products has delivery plans, the Total, and one button: Add stack to bag · $90.00. Start again goes back to the first question.

• No match: "We don't have a match for that yet.", with a button to the goal's tile link and Shop all.

The Goal finder section

Add up to twelve Goal blocks, one per tile:

A goal tile's colour comes from its name's place in Goal names (Theme settings › Goals): Sleep is first in the Dose preset, so it's goal colour 1, lilac in Citrus. A name that isn't in the list takes the colour of the tile's own position.

Where a tile leads

In this order:

1. The tile's own Link, when you set one.
2. The ranked collection filtered by the goal, /collections/all?filter.p.m.custom.goals=Sleep, when that collection has the Goal filter from Search & Discovery (chapter 14).
3. The tile's Fallback collection.
4. The ranked collection itself (all products when Collection to rank is blank).

The count ("14 products") is the number of products in the first 50 of the ranked collection whose custom.goals has the goal, in any capitals; with none, no count shows. Write your own in Count label if your collection is bigger. The picture is the tile's Cut-out image, or the first matching product's featured image.

How the stack is chosen

The quiz ranks the first 50 products of Collection to rank, in that collection's sort order, in the shopper's browser. Sold-out products are left out. Each product scores:

• +3 when its custom.goals has the chosen goal;
• +1 when its custom.goals shares a goal with the chosen routine's list (Goals for the first answer for Morning, Goals for the second answer for Night);
• +2 when its custom.format matches the chosen format. Capitals and a plural don't matter: "Gummies" matches "Gummy".

Then:

1. The stack is the products that match the goal, highest score first, ties in the collection's order, with at most Most products of one format of any one format, up to Products in the stack.
2. Short of that, products that don't match the goal but do match the routine fill the stack, ranked by routine and format, with the same format limit. A format match alone never fills a stack, so a morning multivitamin won't land in a night stack because it's a gummy.
3. No product matches the goal: "We don't have a match for that yet."

Worked example. A collection with these products, in this order, and the default settings:

So give every product a custom.format and at least one goal from your tiles, and list your routine goals (such as Calm) in the two goal lists even when they aren't tiles.

Adding the stack

Add stack to bag adds every ticked row in one go. With Subscribe and save ticked, each product goes in with the delivery plan the supply calculator would choose for its own servings and daily dose (chapter 10); a product without plans goes in as a one-time purchase, and a product that can only be bought on a plan always gets one. The stack's lines carry a hidden mark that keeps them together in the cart, tagged Stack (chapter 13). On success the button shows a tick, the cart drawer opens and the bag count updates.

Shopify adds all or nothing: if one product has just sold out, nothing is added, and the stack says so ("Magnesium glycinate just sold out. Untick it or try again.").

The same goal names drive the menus' goal tiles (chapter 3), the goal chips (chapters 4 and 14) and the card colours (chapter 2), which take their colour from the name, so a Tile colour set on a Goal block shows on that tile only.

In the theme editor

While no product in the ranked collection has custom.goals, the theme editor shows sample pictures on the tiles, and the quiz runs on a sample stack made from the collection's first three products, with a "Sample" tag and the add button disabled ("Sample: add goals to your products to see real results"). Shoppers see the tiles but no quiz until your products have goals. With no Goal blocks the section shows nothing.

The section's anchor is #goal-finder (a second goal finder on the same page gets its own), which is where the hero's Find your stack and the empty cart's button lead.