This article is the companion reference to Shopify App Integration for Headless Storefronts. It covers all available customization options for the Measmerize Size Hub widget and explains how to pass them via window.measmerizeSettings on a headless frontend.

⚠ Developer article

This guide is intended for developers. Configuring and applying these settings is your responsibility. Measmerize does not perform the customization on your behalf. If you have questions, reach out to [email protected].

How Customization Works

The visual configuration of your Size Hub is defined entirely via the window.measmerizeSettings object, which you control in your own frontend code. The parameters below cover color palette, typography, component styles, layout, and CTA appearance. Review each option and set the values that match your storefront's design.

Design options Available:

Below are the configuration parameters you can select within this approach:

1. Color Palette

Set the colors applied to actions, states, and text across the Size Hub.

Element	Description
Primary color	Drives main interactive elements (Continue buttons, active sliders, progress indicators).
Secondary color	Used for secondary components (Back buttons, inactive states, outlines).
Text color	Used for body copy and titles throughout the widget.

2. Fonts

Define the fonts used across the Size Hub experience.

Headings font: controlled by widget_heading_system_font and widget_heading_font_size_scale.
Body font: controlled by widget_body_system_font and widget_body_font_size_scale.

Setting either key to "inherit" will use the font stack already defined on your storefront.

3. Gender Picker

Pick one of the selector style families for the gender selection step.

Classic
Modern
Sleek

4. Inputs & Dropdowns

Select the style family for text fields and menus used across the flow.

Classic
Modern
Sleek

5. Buttons

Configure the visual properties of primary and secondary buttons.

Radius — widget_button_border_corner_radius
Text color — widget_button_text_color
Button color — widget_button_background_color
Button width — widget_button_text_transform
Border thickness — widget_button_border_thickness
Padding — widget_button_padding_block

Note:

Set widget_button_override_theme to true to apply your custom button values instead of the default theme.

6. Body Shape Style

Select the illustration family used for body silhouettes in the shape step.

Classic
Modern
Sleek
Ready-to-Wear
Footwear
Kids Wear

7. Slider Style

Select the visual preset for interactive sliders used in the measurement steps.

Classic
Modern
Sleek

8. Navigator (Header / Stepper)

Pick the style family for the progress stepper displayed at the top of the widget.

Classic
Modern
Sleek

9. Recommendation Carousel

Define how the recommended size result is displayed at the end of the flow.

Classic
Modern
Sleek

10. Popup Layout Position

Choose where the Size Hub appears on the product page.

Centered — widget opens as a centred modal overlay.
Side-docked — widget slides in from the right or left edge.

Relevant settings key: widget_position.

11. Overlay Background

Set the opacity of the overlay displayed behind the widget popup.

Define the required transparency coefficient from 0% (fully transparent) to 100% (fully opaque).

Full Settings Reference

Copy the full object below into your headless frontend, before the measmerize-script tag, and adjust the values to match your design. See the Shopify App Integration for Headless Storefronts guide for the complete implementation context.

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

<script>
  window.measmerizeSettings = {    

// Widget

"widget_in_editor": false,     
"widget_theme": "classic",                     // classic | modern | sleek     
"widget_position": "right",                    // right | left | center     "widget_size_hub_width": "560",     
"widget_invert_colors": "light",               // light | dark     "widget_solid_button_background": "#0f2534",     "widget_outline_button_color": "#9aa2b1",     
"widget_tone": "formal",                       // formal | casual  
"widget_product_category_preview": "apparel_adult",  // apparel_adult | footwear | kids    

// Heading

"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",       // Body     "widget_body_system_font": "inherit",     
"widget_body_font_size_scale": 1,     
"widget_body_background_color": "#ffffff",     
"widget_body_text_color": "#687083",          // Button     "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",    

// Analytics

"widget_client_GA": "G-XXXXXXXXXX",    

// CTA Button

"cta_icon_type": "measmerize",          // measmerize | custom | none  
"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",     // underline | none     "cta_text_alignment": "left",           // left | center | right     "cta_type": "background",               // background | outline | text     "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>

Quick-Start Reference

Use the table below to map your design decisions to the correct setting keys before updating window.measmerizeSettings.

Parameter	Setting key(s)	Example value
Primary & secondary colors	`widget_solid_button_background` / `widget_outline_button_color`	`#0055FF` / `#F2F2F2`
Body shape style	`widget_product_category_preview`	`sleek`
Slider style	`widget_theme`	`classic`
Buttons (radius)	`widget_button_border_corner_radius`	`6px`
Inputs & dropdowns	`widget_theme`	`sleek`
Gender picker	`widget_theme`	`modern`
Navigator / Stepper	`widget_heading_sticky_header`	`true`
Recommendation carousel	`widget_theme`	`classic`
Popup position	`widget_position`	`right`
Overlay opacity	`widget_invert_colors`	`light`

Customization Settings for Headless Storefronts