How it Works
Measmerize allows you to deploy multiple buttons on a single page. While the primary button is typically injected near your size selector, additional buttons act as triggers that open the same Measmerize interface, ensuring the user journey remains consistent regardless of where they click.
Step-by-Step Implementation
Prerequisites
Before implementing a second "Find Your Size" button, you must complete the standard Measmerize integration steps. This ensures the plugin is properly loaded and receiving product data from your Shopify store.
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].