# Shop by occasion and the Turning picker

Chapter 8 of the Hooray user guide.

Party shoppers arrive with an occasion ("it's a baby shower") or an age ("she's turning 30"). Hooray has a way in for each: the **Shop by occasion** section's occasion balloons, the **Turning picker** of foil number balloons, and **occasion chips** on cards and product pages.

## Shop by occasion

A row of occasion balloons, each the tile's image cut as a balloon over its colour, hanging from a string, tilted alternately. With no image, the balloon is the tile's colour with a small white balloon drawn on it. Six sit across on a computer, four on a tablet, and on phones they become a sideways row the shopper swipes. Each tile is one link. In the **Cards** layout they're rounded cards instead.

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | "Shop by occasion" | |
| Heading | "What are we celebrating?" | |
| Link label, Link | "All occasions" | A link beside the heading, such as a page listing every occasion |
| Base collection | | Used for tiles without their own link or collection (see below). Blank uses all products. |
| Occasion metafield | `custom.occasions` | The namespace and key of the list metafield the filter reads. Change it only if your occasions live in another metafield. |
| Show product counts | On | "Birthday, 128 products". Counts come from the tile's own collection, so tiles that link to a filter or a link of your own show no count. |
| Layout | Balloons | **Balloons** or **Cards** |
| Background | Surface | |
| Streamer at the bottom edge | None | |

Add an **Occasion** block for each tile, up to 12:

| Setting | Default | What it does |
| --- | --- | --- |
| Name | "Birthday" | The tile's name, and the value it filters by |
| Image | | Cut as a balloon: keep the subject in the middle and upper part |
| Colour | `#ff7d45` | Shows behind a transparent image and when there's no image |
| Link | | Optional: anywhere you like |
| Collection | | Optional: the occasion's own collection |

With no blocks, the theme editor shows six sample tiles (Birthday, Baby shower, Bridal, Graduation, Halloween, Christmas) and shoppers see nothing.

### Where a tile goes

Each tile links to the first of these it has:

1. its **Link**;
2. its **Collection**;
3. the **Base collection** (all products when blank), filtered to the tile's **Name**: `/collections/all?filter.p.m.custom.occasions=Birthday`.

The third works only once you've added the **Occasion** filter in Search & Discovery (chapter 14). **Without that filter, Shopify ignores the filter in the address and shows the whole collection**, so every tile opens the same list of everything. The presets' tiles have no link or collection, so on a fresh install that's what they do. Pick one way:

* **A collection per occasion.** Make a collection for each occasion in **Products › Collections** (manual, or automated by a product tag such as `birthday`) and choose it in the tile's **Collection**. The tile then shows a count. This works without Search & Discovery.
* **The Occasion filter.** Fill in `custom.occasions` on your products, add the filter (chapter 14), and leave the tiles' Link and Collection empty. One base collection serves every tile, and shoppers can tick more occasions in the filters once they're there. The tile's **Name** must match the metafield value exactly, capitals and spaces included.

You can mix them: a collection for your big occasions, the filter for the rest.

## Occasion chips

**On cards**, up to two occasions from `custom.occasions` show above the product's name as small chips, then a count of the rest ("+2"). They're words, not links, because the whole card is one link. Turn them off in **Theme settings › Product cards › Show occasion chips**.

**On the product page**, the **Occasion chips** block shows the product's occasions as chips that link to the Occasion filter, so a shopper looking at a cake topper can tap "Birthday" and see everything else for birthdays.

| Setting | Default | What it does |
| --- | --- | --- |
| Fallback occasions | | Comma-separated. Shown when a product has no occasions, for example "Any party". |
| Link chips to | | The collection the chips filter. Blank uses all products. |
| Occasion metafield | `custom.occasions` | The namespace and key of the list metafield the filter reads |
| Most chips to show | 6 | 1 to 12. The rest are counted as "+2". |

The chip links need the Occasion filter too. Without it, a chip opens the whole collection.

## Turning picker

A band of foil number balloons, one per common age, and a field for any other age. Every balloon is a link: "Turning 30: shop number 30". Milestone ages are gold foil, the rest in your palette's own foil.

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow | "Number balloons, candles and banners" | |
| Heading | "Turning…" | |
| Text | "Tap the age and we'll show you everything with that number on it." | |
| Number balloon collection | | Where the ages go (see below). Blank searches for the number instead. |
| Ages link to | The collection, filtered by number | Or **The collection itself**, or **Search results** (see below) |
| Number metafield | `custom.number` | The namespace and key of the integer metafield the filter reads |
| Ages | `1,2,3,4,5,6,7,8,9,10,13,16,18,21,30,40,50,60` | The balloons, comma-separated. Blank shows 1 to 10, 13, 16, 18, 21, 30, 40, 50 and 60. Toast uses `18,21,30,40,50,60,70,80`. |
| Milestone ages | `18,21,30,40,50,60` | Shown in gold foil. Toast makes every age gold. |
| Show the age field | On | A field and button for any other age |
| Age field label | "Another age" | |
| Button label | "Show balloons" | |
| Highest age | 120 | The highest age the field accepts. Ages in **Ages** above it aren't shown. |
| Background | Deep band | |
| Streamer at the bottom edge | None | |

### Where an age goes

**Ages link to** decides, once you've chosen a **Number balloon collection**:

* **The collection, filtered by number** (the default): each age opens that collection filtered by the number: `/collections/number-balloons?filter.p.m.custom.number=30`. This needs the **Number** filter in Search & Discovery (chapter 14). **Without the filter, Shopify ignores it and every age opens the whole collection.** If you also put the Turning picker on your collection pages, the balloon for the age being shown is marked with a bar under its knot.
* **The collection itself**: every age opens the collection with no filter: `/collections/number-balloons`. Choose this when you sell one number balloon with a digit option of 0 to 9, which no number filter can find for 30: the shopper lands on it and picks the digits there.
* **Search results**: each age searches your store, as below, even with a collection chosen.

**With no collection** (as the presets ship), each age searches your store whatever **Ages link to** says: `/search?q=30+balloon&type=product`. That finds products whose details mention both the number and the word "balloon", so it's only as good as your product titles and tags. Choose a collection as soon as you can.

The age field goes to the same place. It accepts a whole number from 1 to **Highest age**. Anything else is refused with "Enter an age from 1 to 120." and the shopper stays in the field.

### Making the ages find the right products

The Number filter matches a product's `custom.number` exactly, and each product holds one number. So:

* **Sell each age as its own products** where you can: "Number 30 foil balloons" (a 3 and a 0), "30 candles", "Happy 30th banner", each with `custom.number` 30. Then tapping 30 shows exactly those.
* **A single product with a Number option of 0 to 9** can carry only one `custom.number`, so the filter can find it for one age at most. Set **Ages link to** to **The collection itself**, or sell the common pairs (18, 21, 30, 40, 50, 60) as products of their own alongside it.
* Put the number collection's products in one collection (Number balloons, or everything with a number on it), and choose it as the **Number balloon collection**.

The word "balloon" added to searches is one of the theme's words: change or translate it in **Edit default theme content** (chapter 15).