Customize Measmerize Widget Text Style

Measmerize is designed to integrate seamlessly into your online store. Many brands have strict typographical guidelines for how text appears, such as requiring all Call‑to‑Action (CTA) buttons to be UPPERCASE or all headers to be lowercase.

With a small amount of custom CSS, you can control the capitalization of:

The Size Hub (modal)
The CTA button on your product page

This lets you enforce a specific text style regardless of how the text was originally typed in the Measmerize dashboard.

Who this guide is for

This guide is intended for:

Shopify merchants or developers who are comfortable editing theme code, or
Agencies managing Shopify themes for their clients

You will need access to the Shopify Admin and permission to edit theme files.

Important: Theme code changes should be made by someone comfortable editing Shopify themes. Measmerize support can help confirm that the widget works as expected, but cannot implement or debug custom theme code for you.

Available styling options (`text-transform`)

We use the standard CSS property text-transform to modify text. You can choose from these values:

Style	CSS Value	Result example
Lowercase	`lowercase`	find my size
Uppercase	`uppercase`	FIND MY SIZE
Title Case	`capitalize`	Find My Size (capitalizes the first letter of every word)
Original	`none`	Find my size (displays text exactly as typed in the Measmerize dashboard)

Step 1 - Choose what you want to style

You can apply typography changes to:

CTA Button on the product page
- Selector: #measmerize-button
Size Hub Modal (the pop‑up size advisor)
- Selector: #measmerize-modal

You can style one or both.

Step 2 - Copy a CSS snippet

A. Customize the CTA button (`#measmerize-button`)

Use this to change the "Find my size" button on your product page.

Choose one text-transform value and update the snippet:

/* Measmerize CTA button typography */ 
/* Choose ONE value: lowercase | uppercase | capitalize | none */  

/* OPTION 2: Force all button text to UPPERCASE */ 
#measmerize-button * {   
    text-transform: uppercase; 
}  

/* OPTION 3: Capitalize Every Word (Title Case) */ 
#measmerize-button * {   
    text-transform: capitalize; 
}

/* OPTION 1: Force all button text to lowercase */ 
#measmerize-button * {   
    text-transform: lowercase; 
}  

#measmerize-button * {   
    text-transform: uppercase; 
}

To use a different style, just change the value:

text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
text-transform: none; (use text exactly as typed in the dashboard)

B. Customize the Size Hub modal (`#measmerize-modal`)

Use this to change the text inside the recommendation window (headers, body text, etc.).

/* Measmerize Size Hub modal typography */ 
/* Choose ONE value: lowercase | uppercase | capitalize | none */  

/* OPTION 2: Force all modal text to UPPERCASE */ 
#measmerize-modal * {   
    text-transform: uppercase; 
}  

/* OPTION 3: Capitalize Every Word (Title Case) */ 
#measmerize-modal * {   
    text-transform: capitalize; 
}

/* OPTION 1: Force all modal text to lowercase */ 
#measmerize-modal * {   
    text-transform: lowercase; 
}  

#measmerize-modal * {   
    text-transform: uppercase; 
}

Again, you can switch to:

text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
text-transform: none;

Step 3 - Add the CSS to your theme

In Shopify Admin, go to Online Store → Themes.
Find your active theme and click ... → Edit code.
In the Assets folder, open your main stylesheet file. It is usually named:
- base.css, global.css, or theme.css
Scroll to the bottom of the file.
Paste the CSS snippet(s) you selected in Step 2.
Click Save.

If your theme offers a "Custom CSS" field in the Theme Editor, you can paste the same snippet there instead of editing the CSS file directly.

Step 4 - Verify that it is working

After saving your changes:

Open a product page where the Measmerize widget is installed.
Use a hard reload or an incognito window to avoid cached CSS.
Check:
- The product page CTA button shows text in the desired style.
- Open the Size Hub and check that headers and body text follow the expected capitalization (if you styled the modal).

If you do not see any changes, refer to the troubleshooting section below.

Important notes

Wildcard selector *
In the examples we use selectors like:
```
#measmerize-modal * {   text-transform: uppercase; }
```
The wildcard * means "apply this rule to every element inside the Measmerize widget." This is a simple way to ensure all text in the widget follows your typography rules.
Scope
These selectors are scoped to Measmerize only (#measmerize-button and #measmerize-modal), so they will not affect other parts of your store.
Sentence case
CSS does not offer a native "Sentence case" option (capitalizing only the first word of a sentence). To achieve sentence case (for example, Find my size):
- Use text-transform: none;
- Type the text exactly as desired in your Measmerize dashboard settings.

Advanced: Target specific elements only (optional)

If you prefer not to change all text inside the widget, you can use more specific selectors.

Examples:

/* Only apply to the CTA button text inside the modal (example class) */ #measmerize-modal .measmerize-cta {   
     text-transform: uppercase; 
} 
/* OPTION 3: Capitalize Every Word (Title Case) */ 
/* Only apply to titles/headings inside the modal */ 
#measmerize-modal h1, 
#measmerize-modal h2, 
#measmerize-modal h3 {   
    text-transform: uppercase;

Use your browser's Inspect / Developer Tools to identify the exact elements and classes you want to target.

Troubleshooting

The text style is not changing at all

Confirm that the widget is installed on that product template.
Check that #measmerize-button and/or #measmerize-modal exist in the page's HTML:
- Right‑click the button or modal → Inspect → look at the element ID.
Make sure the CSS was added to the correct theme:
- If you have multiple themes, confirm you are editing the published one.
Try a hard reload (Ctrl/Cmd + Shift + R) or an incognito window to bypass browser cache.

Some text changes, some does not

Another CSS rule in your theme or another app may be overriding your rule.
Use Inspect → Computed styles to see which text-transform rule is winning.

Increase specificity if necessary, for example:

#measmerize-modal .measmerize-cta span {
   text-transform: uppercase; 
}

Use !important only as a last resort:

#measmerize-modal * {
   text-transform: uppercase !important; 
}

Changes appear in editor preview but not on live store

Some themes or preview modes cache assets differently.
Always verify on the live storefront, not just the admin preview.
If you are using a CDN or performance app, allow a short delay or clear its cache.

FAQ

Will this affect other text on my store?
No. The examples in this guide only target elements inside Measmerize's widget, using the IDs #measmerize-button and #measmerize-modal.

Can I use different styles on desktop and mobile?

Yes. You can wrap the same selectors in a media query, for example:

/* Mobile only */ @media (max-width: 768px) 
{
   #measmerize-button * {
     text-transform: uppercase;   
} }

Can I undo these changes easily?
Yes. Remove or comment out the CSS rule, or change text-transform back to none.

For additional help, contact [email protected] and share:

A link to a product page with the widget installed
A screenshot of your CSS snippet in the theme file