# Pet profile

Chapter 8 of the Scruff user guide.

Most pet shopping starts with "will this fit?" The pet profile answers it everywhere at once: a shopper tells you about their pet once, and every product with sizes says whether it fits.

## What shoppers see

* **The pet chip**, in the header from 990px wide: "Add your pet" with a plus, or "Shopping for Mabel" with the pet's initial on a little round tag and a pencil. Under 990px it's a strip under the header ("Add your pet for sizes that fit · Add", then "Shopping for Mabel · 12 kg · Edit"), and a row in the menu drawer.
* **The pet dialog**, which the chip opens: **Their name** (required, up to 16 characters), **Dog or cat**, **Weight** in kg or lb (0.5 to 100 kg, or 1 to 220 lb, to one decimal place; switching the unit converts the number), and an optional **Birthday** (a day and a month, both or neither). The button follows the name: **Save Mabel**. Under it: "Saved on this device only. Nothing is sent to us." A saved pet also gets **Forget Mabel**, which asks "Forget Mabel? Yes, forget / Keep" before it does anything.
* **Fit badges** on product cards, a bone at the bottom left of the picture: **Fits Mabel** (green, with a check), **Too small for Mabel** or **Too big for Mabel**, or **Check size**. On phones the long ones shorten to "Too small" and "Too big".
* **The fit row** on the product page, above the variant picker: "Fits Mabel in M · Mabel is 12 kg. M fits 9 to 18 kg, 32 to 42 cm neck. Change", with size M already selected and a small green "Mabel" pill on its tile.
* **"Only what fits Mabel"**, a switch on collection and search pages (and on Featured collection), and **Dogs / Cats / All** beside it.
* **The birthday banner** in the week before the pet's birthday: "Mabel's birthday is Friday!"
* **Mabel everywhere else**: the Shop by size tile in her size, "Find Mabel's size" in the size guide, her weight already in the feeding calculator, her name in the feeding promo's words, and, if her bag is empty, "Your bag is empty. Mabel's still waiting for something good."

Everything updates the moment the shopper saves, without reloading the page, and in their other open tabs too.

## Where the profile is kept

**On the shopper's device only.** The profile is saved in the shopper's own browser (its local storage), with the name, dog or cat, the weight, the unit and the birthday. Nothing is sent to you, to Shopify or to anyone else, no cookie is set, and it isn't linked to a customer account. That also means:

* A shopper on their phone and their laptop adds their pet on each.
* Clearing the browser's site data, or **Forget Mabel**, removes it.
* You can't see your shoppers' pets, and the theme can't email anyone about a birthday.

If the browser won't let the theme save anything (some private browsing modes, or blocked site data), the profile still works on the page the shopper is on, and the dialog tells them: "Your browser isn't saving this, so we'll forget Mabel when you leave this page."

Two small choices are kept for the browser session only: whether the fit switch is on, and that the species filter has already picked the pet's species once.

## Settings

**Theme settings › Pet profile**:

| Setting | Default | What it does |
| --- | --- | --- |
| Turn on the pet profile | On | Off removes the pet chip and strip, the dialog, the fit badges and fit row, the fit switch and species filter, the birthday banner, and the pet's name everywhere |
| Sample pet name | Mabel | Shown in the theme editor until a profile is saved. Shoppers never see it. |
| Sample pet weight (kg) | 12 | The sample profile's weight in the theme editor |
| Default species | Dog | **Dog** or **Cat**: preselected in the pet dialog and the Pet profile section's form until the shopper chooses, and the sample pet's species in the theme editor. The Whisker preset sets **Cat**. |
| Default weight unit | Kilograms | **Kilograms** or **Pounds**: the unit the dialog and the feeding calculator start in |
| Size option names | Size | The variant option that holds sizes, such as Size. Separate several with commas: `Size, Collar size`. The size guide, the size tiles and the card's size count use it too. |
| Weight range per size | `XS \| 0–4 kg`, `S \| 4–9 kg`, `M \| 9–18 kg`, `L \| 18–32 kg`, `XL \| 32+ kg` (one per line) | One size per line, as `XS \| 0–4 kg`. Use kg or lb, and `32+ kg` for no upper limit. A product's `custom.size_weights` metafield overrides it. The same format as that metafield (chapter 7). |
| Show fit badges on product cards | On | "Fits Mabel", "Too small for Mabel" or "Check size" on cards with a size option. Off hides the bones; the fit row and the fit switch still work. |
| Show the Dogs / Cats / All filter | On | On collection and search pages, when products have a `custom.species` metafield |
| Show the birthday banner | On | A note under the header in the week before the pet's birthday |
| Birthday banner link | `/collections/all` | Where the banner's link goes, such as your treats or birthday collection |

The header's **Show the pet chip** (chapter 3) turns the chip, the strip and the drawer row off on their own while keeping everything else.

## Size option names

The fit works on the variant option named in **Size option names**, matched without regard to capitals: a product whose option is called "Size" or "size" gets a badge; one called "Collar size" only does if you add that name. A product without such an option gets no bone and no fit row: it doesn't fail to fit, it simply has no sizes.

**The size values must match the labels in your weight ranges**, again without regard to capitals: "M" matches `M | 9–18 kg`, but "Medium" doesn't. Either name your sizes XS, S, M, L and XL, or write your ranges with your own names (`Small | 0–8 kg`). The size guide table and the Shop by size tiles match the same way.

## The fit rules

For each product, the theme takes its sizes, finds each one's weight range (from the product's `custom.size_weights`, or **Weight range per size**), and compares the pet's weight:

1. **A size fits** when the weight is at least its minimum and **less than** its maximum. A weight exactly on a boundary goes to the larger size: with the defaults, exactly 4 kg is **S**, not XS, and exactly 9 kg is **M**. Between two sizes, size up.
2. **The largest size the product offers also takes its own maximum**, so a product sold in XS to L still fits a 32 kg dog in L. `32+ kg` has no maximum at all.
3. **Fits Mabel** when the fitting size is available in at least one variant. **Check size** when the fitting size is sold out.
4. **Too small for Mabel** when the pet is heavier than every size the product offers; **Too big for Mabel** when lighter than every size.
5. **Check size** when the weight falls in a gap between the sizes listed, or when none of the product's sizes has a weight range.
6. **Pounds** are converted at 0.45359237, and the weight is kept to the hundredth of a kilogram: 8.8 lb is 3.99 kg (XS), and 8.82 lb is 4.00 kg (S).

Worked examples, with the default ranges:

| Pet | Product's sizes | Badge | Fit row |
| --- | --- | --- | --- |
| Mabel, 12 kg | XS, S, M, L, XL, all in stock | **Fits Mabel** | "Fits Mabel in M · Mabel is 12 kg. M fits 9 to 18 kg, 32 to 42 cm neck." M is selected. |
| 4 kg | XS, S, M | **Fits** (S) | S is selected: 4 kg is the start of S, not the end of XS |
| 32 kg | XS to XL | **Fits** (XL) | XL starts at 32 kg |
| 32 kg | XS to L only | **Fits** (L) | L is the largest size offered, so it takes 32 kg too |
| 33 kg | XS to L only | **Too small** | "The largest size fits up to 32 kg." |
| 2 kg | M, L, XL | **Too big** | "The smallest size starts at 9 kg." |
| Mabel, 12 kg | M is sold out in every colour | **Check size** | "Mabel is 12 kg. M would fit, but it's sold out." |
| Mabel, 12 kg | Small, Medium, Large (no matching ranges) | **Check size** | "These sizes don't list a weight, so measure to be sure." |
| 8.8 lb | XS, S | **Fits** (XS) | 3.99 kg |

With **Choose the size that fits** on (the **Pet fit** block's setting, on by default), the fitting size is selected when the page opens and whenever the pet changes, but never over a size the shopper has picked themselves, and never over a link that names a variant. The fit row's **Change** opens the pet dialog. With no pet saved, the row says "Add your pet to see what fits" with an **Add your pet** button.

## Dogs, cats and products for both

A product's `custom.species` (chapter 7) says who it's for:

* **Dog**: cats get no bone and no fit row on it, and the fit switch hides it from cat owners.
* **Cat**: the same the other way round.
* **Dog** and **Cat**, or **nothing**: it shows for every pet, and gets a bone for every pet when it has sizes. Leave bowls, beds and toys that suit both untagged.

## Only what fits Mabel

A switch in the toolbar of collection and search pages, and beside the heading of a **Featured collection** with **Show the fit switch** on. Turned on, it hides:

* products for the other species, and
* products with sizes whose badge isn't **Fits Mabel** (so "Check size", "Too small" and "Too big" go too).

Products without sizes for the pet's species, such as treats, bowls and toys, stay: they don't fail to fit.

Screen readers hear the count: "Showing 12 of 38 products that fit Mabel." and, turned off, "Showing all 38 products." When nothing on the page fits: "Nothing on this page fits Mabel." with a **Turn off the filter** button. With no pet saved, the switch reads "Add your pet to filter by fit" and opens the dialog, then switches on once the pet is saved. It stays on as the shopper moves between pages, for the rest of their visit. A link ending in `?fit=1`, such as `/collections/collars?fit=1`, opens a collection with it already on; the home section's **Shop what fits Mabel** uses that.

**It filters the products on the current page only.** It hides cards the page has already loaded; it doesn't fetch the products on other pages, and it doesn't change the count in the toolbar or the page numbers. When the collection has more than one page, the switch says "Filtering this page only." For long collections, raise **Products per page** in the Collection section (up to 36), or point shoppers to a smaller collection.

## Dogs / Cats / All

A three-way switch beside the fit switch on collection and search pages, shown only when **Show the Dogs / Cats / All filter** is on and at least one product on the page has a `custom.species`. It starts on **All**; the first time a shopper with a saved pet sees it in a visit, it picks their pet's species once, and they can change it. Untagged products always show. The count is announced the same way ("Showing 9 of 24 products."). Featured collection doesn't have it.

**Like the fit switch, it filters the current page only.** To filter a whole collection by species, with the right count and page numbers, add the **Species** filter in Search & Discovery (chapter 13): it appears in the filter sidebar.

## The birthday banner

A colour block A strip under the header, with a cake icon, shown to a shopper whose saved pet has a birthday in the next seven days:

* Two to six days away: "Mabel's birthday is Friday!" (the weekday in the shopper's language)
* Seven days away, the same weekday as today: "Mabel's birthday is next Wednesday!"
* One day away: "Mabel's birthday is tomorrow!"
* On the day: "Happy birthday, Mabel!"

Then the section's **Text** ("Treat them to something from the birthday shelf.") and a link with its **Link label** ("Birthday shelf") to **Birthday banner link**. The days follow the shopper's own calendar, and a birthday on 29 February shows on the 28th outside leap years. **Dismiss** hides it until next year's birthday.

The banner is the **Pet birthday banner** section in the Header group, and only fits there. Turn it off with **Show the birthday banner**. Point the link at something worth a birthday: treats, a cake, a new toy. Nothing is emailed: the banner is the whole reminder.

## The Pet profile section

The home page's panel: your words and three perks on the left, and on the right a white card with the same fields as the dialog and a gold bone tag hanging off its corner that shows the name as it's typed. Once a pet is saved the card says "Shopping for Mabel", "12 kg dog · birthday 14 March", with the tag, **Shop what fits Mabel** and **Edit Mabel** (which opens the dialog).

| Setting | Default | What it does |
| --- | --- | --- |
| Background | Surface | |
| Eyebrow | "Pet profile" | |
| Heading | "Who are we shopping for?" | |
| Text | "Add your dog or cat once. We'll mark what fits on every product and filter the rest out when you ask." | |
| Perk 1, Perk 2, Perk 3 | "Fits [name] on every product with sizes", "Size picked from [name]'s weight", "A little note on [name]'s birthday" | Under **Perks**. `[name]` becomes the pet's name, or "your pet" until one is saved. |
| Collection for “Shop what fits” | | Under **Button**. "Shop what fits Mabel" opens it with the fit filter on. Blank opens all products. |
| Default species | Same as theme settings | **Same as theme settings**, **Dog** or **Cat**: preselected in the section's form until the shopper chooses. **Same as theme settings** follows **Default species** in Theme settings › Pet profile, which the dialog from the header chip uses too. |

## In the theme editor

With no profile saved in your own browser, the theme editor uses a sample pet everywhere: a dog (or a cat, with **Default species** set to Cat) called **Sample pet name** weighing **Sample pet weight**, with a small "Sample" tag on the chip, so you can see the badges, the fit row (on any product), the size guide heading and the feeding calculator filled in. The birthday banner shows the sample pet three days before its birthday. The sample never reaches your shoppers, and products without a size option still show no bone. Save a real pet in the editor's preview to see exactly what shoppers see.