⚠ Developer article

This guide is intended for developers. The integration is your responsibility. Measmerize does not perform the setup on your behalf. If you have questions, reach out to [email protected].

Unlike a standard Shopify Liquid theme, where the Measmerize app's theme extension automatically injects the script, button, and settings object; a headless frontend never renders Liquid. You will need to reproduce those three pieces manually

Injecting the script
Placing the button container
Defining the widget settings object

1. Inject the Measmerize Script

Add the script tag on every product page, with data-shopify="true" so Measmerize resolves the request through the Shopify App (metafields, plan, size charts) instead of the standard self-service backend:

<script
  id="measmerize-script"
  src="https://client.measmerize.com/script.js"
  data-brand-code="yourstore.myshopify.com"
  data-product-code="SHOPIFY_PRODUCT_ID"
  data-lang-code="LANGUAGE_CODE"
  data-country-code="COUNTRY_CODE"
  data-shopify="true"
  async
></script>

Data Attribute	Value
`data-brand-code`	Your store's `.myshopify.com` domain (Shopify's `shop.permanent_domain`).
`data-product-code`	The Shopify product's numeric `id` — not the SKU.
`data-shopify`	Always `"true"`. Tells Measmerize to resolve the brand/product via the Shopify App.

ℹ Supported attributes

For the supported data-lang-code, see the list of language codes.

For the supported data-country-code, see the list of country codes.

2. Add the Measmerize Button

Add <div id="measmerize-button"></div> at the position where the CTA should render on your PDP. For placement guidance and Liquid examples, see How to Manually Position the 'Find My Size' Button.

For multiple buttons on the same page, see Implementing Additional 'Find Your Size' Buttons.

3. Provide the Widget Settings Object

On a Liquid theme, the app's theme editor blocks generate window.measmerizeSettings for you (widget colors, fonts, position, CTA copy, etc.). A headless storefront has no theme editor, so define this object yourself, before the measmerize-script tag. If you skip this step, the widget renders with its default styling.

ℹ Note

The values shown below are the defaults used in our standard Classic integration. Adjust them to match your storefront's design.

For a full description of each option and accepted values, see the Shopify App Customization Settings for Headless Storefronts.

<script>
  window.measmerizeSettings = {
    "widget_in_editor": false,
    "widget_product_category_preview": "apparel_adult",
    "widget_theme": "classic",
    "widget_position": "right",
    "widget_size_hub_width": "560",
    "widget_invert_colors": "light",
    "widget_solid_button_background": "#0f2534",
    "widget_outline_button_color": "#9aa2b1",
    "widget_tone": "formal",
    "widget_heading_sticky_header": true,
    "widget_heading_system_font": "inherit",
    "widget_heading_font_size_scale": 1,
    "widget_heading_background_color": "#ffffff",
    "widget_heading_text_color": "#687083",
    "widget_body_system_font": "inherit",
    "widget_body_font_size_scale": 1,
    "widget_body_background_color": "#ffffff",
    "widget_body_text_color": "#687083",
    "widget_button_override_theme": true,
    "widget_button_background_color": "#ff0000",
    "widget_button_text_color": "#ffffff",
    "widget_button_border_thickness": "1px",
    "widget_button_border_opacity": 1,
    "widget_button_border_corner_radius": "0px",
    "widget_button_padding_block": "12px",
    "widget_button_text_transform": "default",
    "widget_client_GA": "G-XXXXXXXXXX",
    "cta_icon_type": "measmerize",
    "cta_icon_color": "#000000",
    "cta_system_font": "inherit",
    "cta_font_size": "14px",
    "cta_text_copy": "Find your size",
    "cta_text_color": "#000000",
    "cta_text_decoration": "underline",
    "cta_text_alignment": "left",
    "cta_type": "background",
    "cta_background_color": "#ffffff",
    "cta_border_color": "#9AA2B1",
    "cta_border_radius": "0px",
    "cta_border_thickness": "1px",
    "cta_with": "100",
    "cta_padding_block": "12px",
    "cta_padding_inline": "0px"
  };
</script>

<script
  id="measmerize-script"
  src="https://client.measmerize.com/script.js"
  data-brand-code="yourstore.myshopify.com"
  data-product-code="SHOPIFY_PRODUCT_ID"
  data-lang-code="LANGUAGE_CODE"
  data-country-code="COUNTRY_CODE"
  data-shopify="true"
  async
></script>

Integration for Headless Storefronts

1. Inject the Measmerize Script

2. Add the Measmerize Button

3. Provide the Widget Settings Object

Related articles