⚠️ Developer article. Custom placement requires editing your Shopify theme code. This is the responsibility of your development team. Measmerize does not implement or debug custom theme code.
Prerequisites
Before implementing custom placement, you must complete the standard Measmerize integration steps. This ensures the plugin is properly loaded and receiving product data from your Shopify store.
The custom placement process only controls where the button appears on the page.
Implementation Overview
Custom placement requires manually inserting an HTML anchor element in your theme code:
<div id="measmerize-button"></div>
This anchor serves as the injection point for the Measmerize CTA component.
Implementation Steps
1. Access Theme Code Editor
Navigate to Shopify Admin
Go to Online Store > Themes
Locate your active theme
Click Actions > Edit code
2. Locate Product Template File
Find the appropriate product template file, typically located in:
Sections folder:
main-product.liquid,product-template.liquidTemplates folder:
product.liquid
The exact filename depends on your theme structure.
3. Insert Anchor Element
Identify the exact location where the CTA should render
Common placement locations:
Above the "Add to Cart" button
Below the product price
Inside a custom feature block
Insert the anchor code at the target location:
<div id="measmerize-button"></div>
4. Save and Verify
Save the file changes
Test on a live product page to verify the CTA renders at the intended position
Check browser console for any integration errors
Troubleshooting
If the button does not appear after implementation:
Verify the standard Measmerize integration is active
Check that the anchor ID matches exactly:
measmerize-buttonEnsure no duplicate anchors exist in the template
Review browser console for JavaScript errors
For more support reach out to [email protected]
Related articles
Quick Start Guide app installation prerequisite
Modal Integration alternative if you need your own overlay (link to Modal article once published)