Shopify Integration

Benefits and steps to integrate Marker.io with your Shopify store.

Gary Gaspar avatar
Written by Gary Gaspar
Updated over a week ago

Big update! πŸš€ We're launching a direct Shopify application soon. Vote here to stay updated. πŸ‘πŸΌ

Why Choose Shopify Integration?

Shopify stands out with its plugin/application style platform, enabling users to download, install, and customize their online store. It offers:

  • Enhanced sales features

  • Social media promotion tools

  • Inventory management

  • Accounting and business reporting

By integrating Marker.io, you can effortlessly gather feedback on your Shopify store, reducing developer effort. You can quickly funnel your Shopify feedback into your preferred project management tools and issue trackers.


Integrating Marker.io with Shopify

To add Marker.io to your Shopify store, follow the provided steps. If you encounter issues like the widget not displaying, refer to the troubleshooting section below.

  • Within app.marker.io navigate to your project settings > widget > Installation > Add code manually and copy code.

  • Within your Shopify store, navigate to Themes > Actions > Edit code.

  • Locate the header.liquid file

  • Paste the copied snippet code above the closing </header> tag

  • Save your changes

  • You can visit your website, and the widget will appear.


Widget not displaying on your Shopify website?

If your widget is not displaying, try the following:

  • 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?

Sometimes you want your clients to be able to report feedback only on the Preview mode. You can easily do that by going into your Header.php and adding your snippet in the Preview mode condition.

{% 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 Assistance?

Should you face any challenges or have queries, don't hesitate to reach out to us. Our support team is available via the chat option at the bottom right of our website.

Did this answer your question?