Size guide by breed and measurements

Even with a pet profile, shoppers want to check. The size guide puts your size table, a breed picker, a suggestion from the pet's weight and a drawn guide to measuring in one place, with a button that picks the size for them.

What shoppers see

On the product page, a Size guide link with a ruler icon sits at the right of the size option's label row. It opens the guide in a window:

• The heading: "Find Mabel's size", or "Find the right size" without a pet profile.
• Breed ("Start typing a breed") and Weight, with a Suggest button. The breed field lists up to eight matches as the shopper types, names that start with the letters first. The weight is filled in from the pet profile.
• The suggestion, with the size on a green bone:
  • from the weight: "Mabel is 12 kg, so M (9 to 18 kg)." (without a profile: "At 12 kg, M (9 to 18 kg).")
  • a breed that agrees adds: "Cavoodle: usually M too."
  • a breed that doesn't: "Labrador retriever: usually L, but Mabel's 12 kg says M. Measure to be sure." (without a profile: "…but 12 kg says M.")
  • a breed alone: "Cavoodle: usually M, 8–14 kg." (the breed's weight from your Breeds list; a breed listed without one: "Cavoodle: usually M (9 to 18 kg).")
  • a breed you don't list: "We don't have that breed yet. Use Mabel's weight or measure."
• The size table (Size, Neck cm, Chest cm, Weight kg), with the suggested row highlighted, and a cm / in switch that converts the measurements (never the weight). The shopper's choice of unit is remembered on their device.
• Choose M, which selects that size on the product page and closes the guide. When no variant in that size is available with the other options as picked, it reads "M is sold out" and can't be pressed.
• How to measure ("Two measurements, one soft tape"): a line drawing of a dog in profile with the neck (1) and chest (2) marked, beside your numbered steps.

The window opens on its heading and keeps the keyboard inside it; Esc, the close button or a click outside closes it, and focus goes back to the link. The breed list works with the arrow keys, Enter and Esc.

The size table: product or theme default

Each product's guide shows its own table when it has a custom.size_table metafield (chapter 7) with a header and at least one size. Otherwise it shows the theme's Default size table. So one default covers most collars and harnesses, and only the odd product needs its own.

The size names in the first column must match the product's size values (without regard to capitals): the table row "M" is the size "M", not "Medium".

The suggestion from the weight uses the same weight ranges as the fit badges: the product's custom.size_weights, or Weight range per size, so the guide and the bone never disagree. The table's weight column is only shown (it's used for the suggestion only when there are no weight ranges at all). Keep the two the same, so what the table says matches what the guide picks: a product with its own custom.size_weights should get its own custom.size_table too.

Settings

Theme settings › Sizing:

Size option names (Theme settings › Pet profile, chapter 8) decides which option the guide's link sits beside and which option Choose sets.

The breeds list

Each line is a breed, the size it usually wears in your sizes, and its usual weight:

Cavoodle | M | 8–14 kg
Labrador retriever | L | 25–32 kg
Maine coon | M | 6–10 kg

• The size must be one of the sizes in your table, written the same way. A breed whose size isn't in the table shown gets no suggested row.
• The breed's weight is shown in the suggestion for a breed alone ("Cavoodle: usually M, 8–14 kg."), as you write it, never converted. Once the shopper has a weight, the suggestion uses the size you give for the breed and the pet's own weight against your weight ranges.
• The defaults are typical weights for collars and harnesses sized like the default table. If your sizes run differently (a maker whose M is 15 to 25 kg), go through the list and change the sizes to yours.
• Add the breeds your customers have, remove those they don't, and keep the names the way shoppers type them ("Cavoodle", not "Cavalier King Charles spaniel × poodle").

The Size guide block

The Size guide block goes in the Product and Featured product sections; quick view shows it too, always as the link.

It shows on a product with a size option, or with its own custom.size_table, whenever there's a table to show. A product without a size option but with its own table gets its own "Size guide" link under the variant picker; Choose needs a size option, so it doesn't show there. A product with neither shows nothing. The product and product.embroidery templates carry the block; product.tag and product.food don't.

In the theme editor the block always shows, and if neither the product nor the theme has a table it says "Not shown to shoppers: this product has no size table and the default size table in Theme settings › Sizing is empty."

The size guide page

Every preset ships a page.size-guide template: your page's own text, then the Size guide section with the theme's default table, the breed picker, the pet's weight and how to measure, side by side. To use it:

1. In admin, go to Online Store › Pages › Add page. Title it "Size guide" so its address is /pages/size-guide (the presets' links expect that), and write any introduction you like, such as how your sizes run.
2. In Theme template, choose page.size-guide, and Save.
3. Link to it from your menus, the announcement bar and the hero (chapter 1 lists the presets' links that already point to /pages/size-guide).

The Size guide section's settings:

On a page there's no product, so there's no Choose button. The section can also go on a product template, under the product, to show the guide's cards there with Choose; it then uses that product's own table.