Learn how to integrate Marker.io into your Shopify store for easier issue reporting and tracking.
Why Integrate Marker.io with Shopify?
Shopify is a platform that allows you to set up and customize your online store. It provides tools for:
Sales management
Social media promotion
Inventory tracking
Business reporting
By integrating Marker.io with your Shopify store, you can easily collect issues and bug reports. This helps reduce developer workload and improves the process of funneling these reports into your project management or issue tracking tools.
Steps to Integrate Marker.io with Shopify
Get your Marker.io widget code
Go to your Marker.io dashboard.
Navigate to: Project settings > Widget > Installation > Add code manually.
Copy the widget code snippet.
Access your Shopify theme settings
Log in to your Shopify admin panel.
Navigate to: Online Store > Themes.
Click on Actions > Edit code for your active theme.
Insert the Marker.io widget code
In the code editor, find and open the
header.liquidfile.Paste the copied code snippet right before the closing
</header>tag.Save your changes.
Confirm widget display
Visit your website to confirm that the Marker.io widget appears.
Troubleshooting: Widget Not Displaying
If the Marker.io widget isn’t showing up on your Shopify store, try the following steps:
Ensure your website[s] is listed under website domains. Navigate to your project settings > Settings > General > Website domains. Check that the correct website domain(s) is listed here.
Check widget visibility settings: Check settings, including widget appearance and widget targeting within your Marker.io account.
Finally, check your caching settings, and open up your website using an incognito window to verify that it's working.
How to Add the Widget in Preview Mode
if you want the Marker.io widget to only show up in Preview mode for testing or client reviews, follow these steps:
In your Shopify code editor, navigate to the
header.liquidorheader.phpfile.Add the following code to ensure the widget only appears in Preview mode:
{% if content_for_header contains "previewBarInjector.init();" %}
Preview mode // Add marker.io snipet here
{% elsif content_for_header contains "Shopify.designMode" %}
Customizer
{% else %}
Live!
{% endif %}
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.