⚠️ Developer article. This guide requires editing your theme's Liquid or HTML files.
How it Works
This guide applies to the Standard Shopify integration, where Measmerize manages the primary CTA via App Blocks or theme injection. If you're using the Modal Integration (embedding the Size Hub in your own modal), you control all entry points from your own UI: the measmerize-additional-button class does not apply in that setup.
Step-by-Step Implementation
⚠️ Prerequisite: Measmerize must already be installed and active on your store. Follow the Quick Start Guide if you haven't done this yet.
1. Insert the Measmerize Class
To create an additional trigger, insert a <div> tag into your theme’s liquid or HTML file where you want the button to appear. You must assign the specific class measmerize-additional-button to the element:
<div class="yourmenu">
<div class="your-button"></div>
<div class="measmerize-additional-button"></div>
<div class="your-button"></div>
</div>
<div class="yourbuttonsblock">
<div id="measmerize-button"></div>
</div>
2. Supporting Multiple Locations
If your design requires the button to appear in several spots (e.g., both a "Sticky Add to Cart" bar and the main product description), simply repeat the step above. Each element with the measmerize-additional-button class will independently trigger the size advisor.
Technical Considerations
Coexistence with the Main Button: These additional buttons work alongside your primary button (usually identified by
#measmerize-button). They do not replace it; they offer alternative access points for the user.Automatic Styling: By default, additional buttons will inherit the brand styling configured in your Shopify App Store-builder. If you require unique CSS for a specific location, you can wrap the div in a parent container with a custom ID.
Tip: Optimizing for Mobile vs. Desktop
In modern eCommerce design, user behavior differs by device. You can use these additional buttons to cater to specific scenarios:
Mobile: Place a button inside your "Size & Fit" dropdown or near the bottom of the screen where it is easily reachable by a thumb.
Desktop: Place a button near the official Size Guide link to provide a high-tech alternative to static measurement tables.
Need further assistance? If the buttons are not appearing after implementation, ensure that the Measmerize main script is correctly loaded on your page or contact our support team at [email protected].
Related articles