Shopify theme snippet

Most themes take the FitMyType app block in the theme editor. Use this snippet when your theme cannot (older or custom themes), or when your store does not have the FitMyType app. It shows the size button, selects the recommended size in your theme's size picker and, if you want, adds it to the cart.

1. Add the snippet

In the FitMyType back-office, open Integration and copy the Shopify theme snippet. It already holds your client id.
In Shopify, open Online Store › Themes › Edit code, add a snippet named fmt-size-recommender.liquid and paste the code.
In your product template or product section, inside the product form, add this line where the button should appear:

{% render 'fmt-size-recommender', product: product %}

Try it in a theme preview first. In the theme editor the snippet shows a placeholder button only.

2. Settings

Settings go in the settings object of the config block the snippet writes (<script id="fmt-config" type="application/json">), or at its top level. A value that is not allowed is ignored and the default is used.

Setting	Values	Default
`logoStyle`	default, s, ruler, scale, none	default
`tooltipPosition`	bottom, bottom-left, bottom-right, left, upper, upper-left, upper-right	bottom-left
`unitSystem`	metric, imperial	—
`endBehavior`	close, select-size, select-size-add-to-cart	select-size
`buttonText`	your own button text	—
`fontFamily`	font family name	—
`fontFallback`	fallback font	—
`fontFaceCss`	URL of a @font-face stylesheet	—
`channel`	selling channel for your reports	shopify
`braInputMandatory`	true or false	—
`autoSelectOnAutoReco`	true or false: pre-select the size we remember for a returning shopper	false
`autoReco`	true or false: show the remembered size on the button	true
`autoSelect`	true or false: select the size in your theme's picker	true
`cartEvent`	true or false: send add-to-cart events (only for a store with no FitMyType pixel)	false
`debug`	true or false: console warnings about the config	false

endBehavior: close only shows the recommendation, select-size also selects it in your size picker, select-size-add-to-cart also adds it to the cart and opens your cart drawer (or goes to the cart page).

3. Config schema

The config block follows this JSON schema.

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://docs.fitmytype.com/schemas/shopify-theme-config.json",
  "title": "FitMyType Shopify theme config (fmt-config)",
  "type": "object",
  "required": [
    "clientId",
    "productId",
    "availableSizes",
    "sizeOptionName",
    "variants"
  ],
  "properties": {
    "clientId": {
      "description": "FitMyType client id",
      "oneOf": [
        {
          "type": "integer",
          "minimum": 1
        },
        {
          "type": "string",
          "pattern": "^[1-9][0-9]{0,14}$"
        }
      ]
    },
    "productId": {
      "description": "Product id by the source's product ID strategy",
      "type": [
        "string",
        "integer"
      ]
    },
    "productImage": {
      "type": [
        "string",
        "null"
      ]
    },
    "language": {
      "type": [
        "string",
        "null"
      ]
    },
    "shopCountry": {
      "type": [
        "string",
        "null"
      ]
    },
    "availableSizes": {
      "type": "array",
      "items": {
        "type": "string"
      },
      "minItems": 1,
      "uniqueItems": true
    },
    "sizeOptionName": {
      "type": "string"
    },
    "sizeOptionIndex": {
      "type": "integer",
      "minimum": 0,
      "maximum": 2
    },
    "variants": {
      "type": "object",
      "additionalProperties": {
        "type": "integer"
      }
    },
    "variantsDetail": {
      "type": "object",
      "additionalProperties": {
        "type": "object",
        "required": [
          "id",
          "available",
          "options"
        ],
        "properties": {
          "id": {
            "type": "integer"
          },
          "available": {
            "type": "boolean"
          },
          "options": {
            "type": "array",
            "items": {
              "type": "string"
            }
          }
        }
      }
    },
    "productIdStrategy": {
      "type": "string",
      "pattern": "^(shopify_product_id|handle|sku_prefix:.+|metafield:[^.]+\\..+)$"
    },
    "selectedVariant": {
      "type": [
        "integer",
        "null"
      ]
    },
    "productUrl": {
      "type": "string"
    },
    "primaryLocale": {
      "type": "boolean"
    },
    "sizeData": {},
    "settings": {
      "type": "object"
    },
    "buttonText": {
      "type": "string"
    },
    "logoStyle": {
      "enum": [
        "default",
        "s",
        "ruler",
        "scale",
        "none"
      ]
    },
    "tooltipPosition": {
      "enum": [
        "bottom",
        "bottom-left",
        "bottom-right",
        "left",
        "upper",
        "upper-left",
        "upper-right"
      ]
    },
    "fontFamily": {
      "type": "string"
    },
    "fontFallback": {
      "type": "string"
    },
    "fontFaceCss": {
      "type": "string"
    },
    "channel": {
      "type": "string"
    },
    "unitSystem": {
      "enum": [
        "metric",
        "imperial"
      ]
    },
    "braInputMandatory": {
      "type": "boolean"
    },
    "endBehavior": {
      "enum": [
        "close",
        "select-size",
        "select-size-add-to-cart"
      ]
    },
    "autoSelectOnAutoReco": {
      "type": "boolean"
    },
    "autoReco": {
      "type": "boolean"
    },
    "autoSelect": {
      "type": "boolean"
    },
    "cartEvent": {
      "type": "boolean"
    },
    "debug": {
      "type": "boolean"
    }
  }
}