Fit finder

Fit finder is a small size calculator for pet gear. Shoppers type their pet’s real measurements — chest and neck, for example — choose inches or centimeters, and the finder tells them which size matches. The whole size chart lives in two settings you fill in as text, so the answer always reflects your own size chart.

What it does

Use this section when sizing is the question shoppers ask before buying — pet apparel, harnesses, collars, anything measured in centimeters or inches.

For shoppers, the flow is:

• enter each measurement your size guide asks for (one to eight of them), typing in inches or centimeters — their choice;
• click Find my size;
• see the matching size right where they are, with its measurement ranges — or, when exactly one size matches and you have linked that size, land directly on the linked product or collection.

Nothing is added to the cart automatically — shoppers stay in control and continue on the product page or collection.

You build the finder from two things: a size table (one of two modes: Size ranges — a row per size, or Two-measurement matrix — a grid crossing two measurements) and optional Size links that decide where a matched size leads.

Add it to a page

1. In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
2. Open the template where you want the section (for example, a collection page or the home page).
3. Click Add section and choose Fit finder.
4. The section is added as Fit finder, in the Text, image and form layout. You should see: the heading “Find their comfortable fit”, a built-in measuring illustration (no image is set yet), a Chest and a Neck input, and a collapsible size guide with three example rows (S, M, L). These example ranges are for preview only — replace them with your product’s real measurements before you publish (see Set it up: quick start).

Choose a style

The Layout setting switches between five arrangements:

Layout	Page arrangement
Text, image and form (default)	Heading and intro on top, image on the left, form on the right — three columns side by side on wide screens
Compact image banner	Photo and form in one slim band, the heading inside the form area
Image and tinted form card	Heading on top, image below it, form in a soft tinted card on the right
Full guide — side by side	A taller, two-column guide: full instructions under the image, a titled form panel, and the size guide always visible
Full guide — stacked	The same full guide in one centered column

The three layouts with a form beside the image keep the page compact and collapse the size guide; the two Full guide layouts give the form its own title and keep the full size guide open at all times.

Set it up: quick start (Size ranges)

Before you start, have the real size chart for your product at hand: per size, the range each measurement must fall into, in inches. If you want matched sizes to lead to a product or collection, that product or collection must already exist — create or pick it first.

1. Keep Matching mode on Size ranges (the default).

2. Set Range table headings — the column titles of your size guide. The size column comes first, then one name per measurement, separated by |. Example: Size|Chest|Neck. Use 1–8 measurements. Each measurement name becomes one input in the shopper’s form and one column in the guide; every name must be filled in.

3. Set Range table rows — one line per size (press Enter between lines): the size label first, then one inch range per measurement, in the same order as the headings. Example: S|12~17|8~12. Replace the three example lines with your real chart — up to 40 lines.

   Write a range as 12~17 or 12-17 (minimum, then maximum). A range includes its minimum and excludes its maximum, so place boundaries deliberately: with 12~17 and 17~23, a shopper measuring exactly 17 matches the second size, not the first.

   Checkpoint: in the preview, the size guide shows one column per heading and one row per size, and the form shows one input per measurement name. A line with too few or too many cells switches the whole calculator off (see Good to know).

4. Optional — fill in Size links to send shoppers somewhere after a match. One line per size: the size label, |, and the link text. Example: S|Shop size S. Select the link text and use the rich text toolbar to insert a product or collection link. The size label must match the table exactly, letter for letter; up to 40 links.

   When exactly one size matches, the shopper is taken to that size’s link. A collection opens directly. A product opens with the first available variant whose value for the Size option name option equals the size label already selected — products with more than 250 variants, or without a verifiable variant, open the plain product page. Several matching sizes always show their results in the section, and in the theme editor nothing ever redirects.

5. Optional — write Introduction and measuring instructions (shown under the heading), upload an Image, and pick the background tint.

6. Save, then test like a shopper:

   • a value exactly on a minimum → matches that size;
   • a value exactly on a maximum → belongs to the next range;
   • a value in a gap between two ranges → “No size matches” message;
   • two overlapping ranges → two result cards, no redirect;
   • switch inches/centimeters → typed values convert, results clear;
   • a broken line (delete one cell) → the table and the form disappear until you fix it.

Set it up: Two-measurement matrix

Use the matrix when two measurements together decide the size — for example chest crossed with neck. Shoppers still enter both values in one form; the answer is the cell where the two intervals cross.

1. Set Matching mode to Two-measurement matrix.

2. Set Matrix headings — the first cell names the two measurements in order, separated by /: the first name is the row axis (the first input), the second is the column axis. Then come the column ranges, in ascending order, separated by |. Example: Chest/Neck|8~11|11~15|15~19. Up to 20 columns.

3. Set Matrix rows — one line per row (press Enter between lines): the row range first, then one cell per column with the recommended size, or - for no recommendation. Example: 12~16|S|S|M. Up to 20 lines; row ranges also ascend.

   Each interval includes its minimum and excludes its maximum. A shopper whose two values land in one row interval and one column interval gets the size written in that crossing cell. A - cell answers “no size for this combination”. Size links work exactly as in Size ranges mode, matched by the size label in the cell.

   Checkpoint: the size guide shows the corner heading “Chest/Neck (in)” — your first measurement down the side, the second across the top — with every cell you typed. A match highlights the row and column and scrolls to the cell.

Settings

This section has no content blocks — the whole size guide is entered in the section settings.

Section settings

Content and layout

Setting	Default	Options	What it does
Heading	“Find their comfortable fit”	Text	Title above the section; leave empty for no title
Introduction and measuring instructions	Empty	Rich text	Shown under the heading. Use it for a short intro plus how to measure the pet
Image	Empty	Image picker	Photo next to the form, e.g. a measuring diagram. Without one, a built-in illustration appears, numbered with your measurement names
Layout	Text, image and form	Five layouts (see Choose a style)	Switches the page arrangement
Section background tint	Lilac	None (white) / Cream / Lilac / Mint / Apricot	Soft background color band behind the section
Image ratio	Landscape (4:3)	Landscape (4:3) / Square (1:1) / Portrait (4:5) / Wide (16:9)	Shape of the image frame

Size table

Setting	Default	Options	What it does
Matching mode	Size ranges	Size ranges / Two-measurement matrix	Chooses the data mode; each mode reads only its own headings and rows below
Range table headings	Size|Chest|Neck	Text	Size ranges only. Column titles: size column first, then 1–8 measurement names separated by |. Each measurement adds one input
Range table rows	S / M / L example rows	Rich text	Size ranges only. One line per size: label first, then one inch range per heading, in order. Up to 40 lines
Matrix headings	Chest/Neck|8~11|11~15|15~19	Text	Matrix only. Row measurement/Column measurement, then ascending column ranges. Up to 20 columns
Matrix rows	Three example rows	Rich text	Matrix only. One line per row: row range first, then one size (or -) per column. Up to 20 lines
Preferred input unit	Inches (in)	Inches (in) / Centimeters (cm)	The unit preselected for shoppers. Table data is always entered in inches; shoppers can switch units, which converts their typed values and clears the result

Result destination

Setting	Default	Options	What it does
Size links	Empty	Rich text	One line per size: Size label|Link text, with a product or collection link inserted on the link text. Exact labels must match the table. One match opens its link; several matches stay in place. Up to 40 links
Size option name	“Size”	Text	Product option used to preselect a variant, e.g. Size. The first available variant whose value equals the size label is selected; if none can be verified, the product page opens without a variant

Images and content tips

• Image: around 1200 × 900 px works well. The three compact layouts crop the image to fill its frame — keep any measuring marks near the center and check the phone view. The two Full guide layouts show the complete image.
• Measuring instructions: write them as short steps (“Measure the widest part of the chest, just behind the front legs”). Good instructions prevent most “no match” results.
• Size table: take the numbers from a real, finished size chart. Shoppers see the exact ranges in the size guide, so the numbers must match what the products actually fit.

Good to know

• You enter inches; shoppers pick their unit. All table ranges are entered in inches. The matching itself is computed in centimeters, so a shopper typing centimeters is compared just as accurately. Converted display values are rounded to one decimal and marked with ”≈” — that rounding never changes the matching.
• Ranges include the minimum and exclude the maximum. The size guide caption tells shoppers the same. Boundary values belong to the next range up.
• Overlapping rows show every match. If two rows fit, the finder says so and lists both cards in place — no link opens. Give overlapping sizes different fit notes in your instructions so shoppers can choose.
• Links resolve strictly. A Size links line only works when its size label matches the table exactly (letter for letter). Duplicate size labels in Size links are dropped, as is everything past 40 lines, and the section resolves links to at most 20 different products — collection links are not counted against that.
• An invalid table hides the calculator. If any heading is empty, a line has too few or too many cells, a range is malformed (zero, negative, or maximum not above minimum), the matrix intervals do not ascend, or you exceed the line limits, the whole table and the form stop rendering — the section shows only its heading, image and text. Fix the line and the calculator comes back.
• Nothing is added to the cart. The finder points shoppers to the right size; buying happens on the product page or in the collection.
• The size guide collapses in the three compact layouts once the table is valid — shoppers can expand it anytime. In matrix mode a match re-opens the guide, highlights the matched row and column, and scrolls to the cell. The two Full guide layouts keep it always open. Table numbers follow the shopper’s chosen unit.
• Switching units converts and clears. After a shopper flips inches/centimeters, their typed values convert and they click Find my size again.
• The theme editor never redirects. Test links from the published page or a preview share link, not from inside the editor.

Example setups

Dog coat finder (Full guide — side by side). Layout Full guide — side by side, Preferred input unit Inches (in), Range table headings Size|Chest|Neck, four rows from your real chart with each boundary owned by the larger size, measuring steps in Introduction and measuring instructions, tint Cream, a photo of the coat being measured. No Size links — results stay in place. Use beside a coat collection or on a sizing help page.

Collar finder with collection links (Compact image banner). Layout Compact image banner, Range table headings Size|Neck (one measurement), three rows matching your collar sizes, and three Size links lines (S|Shop small collars, …), each linking to the matching collar collection. A shopper whose neck measurement matches exactly one size lands on that collection. Link to a product instead and the first available variant with that size value opens selected.

Common questions

A shopper’s measurements match two sizes. Their values fall inside overlapping rows. Both results are shown in place and no link opens. Narrow the ranges so they don’t overlap, or teach the difference in your measuring instructions (for example, “M for slim builds, L for fluffy coats”).

The link didn’t open after a match. Links only open when exactly one size matches and its Size links label matches the table exactly. Check for typos or different capitalization between the table and Size links, make sure the line isn’t a duplicate or past the 40-line limit, and remember several matching sizes — and the theme editor — always show results in place.

The product opened without the size selected. The variant is preselected only when the product has an option named like the Size option name, an available variant whose value for it equals the size label exactly, and no more than 250 variants. Otherwise the product page opens as is — the link itself still works.

The calculator disappeared from my page. The size table is invalid, which switches the calculator off. Check that every heading is filled in, every line has exactly as many cells as there are headings, every range is two positive numbers with the maximum above the minimum, matrix intervals ascend, and you are within 40 lines (ranges) or 20 rows and 20 columns (matrix). Also confirm you edited the settings of the mode you are actually using — each mode reads only its own headings and rows.

Why does a customer in centimeters see ”≈” in the size guide? The guide converts your inch ranges for display and rounds to one decimal; ”≈” marks the rounded values. Matching is unaffected — it always uses your exact numbers.

My customers use centimeters. Do I enter the table in centimeters? No. Table data is always entered in inches, regardless of the Preferred input unit. The finder converts everything for shoppers automatically.