Adding the Mavrck Influencer plugin to your Shopify site will enable you to embed and expose Mavrck's influencer marketing features to your customers from within your existing ecommerce experience. Plugin integration can be performed in the Shopify administration tool in just a few steps. This article will guide you through installing the main plugin code, setting up an embedded influencer experience and configuring a conversion script for tracking purchases. If you have access to your Shopify site's theme files and basic knowledge of HTML this setup should only take a few minutes.
Adding the plugin script to your Shopify theme
Step One: Go to the "Online Store" section in your Shopify administration app and click on "Themes".
Step Two: In your current theme, click the "Actions" menu and select "Edit Code".
Step Three: Find your theme's layout file (commonly named theme.liquid) and click it to open the file in the code editor.
Step Four: Paste the Plugin code into the layout file just before the closing head </head> tag. Copy your Mavrck "brand id" into the plugin script, shown below in red. Click "Save" and close the file.
Sample plugin script:
<!-- Mavrck Plugin -->
<script>
window.mvk = window.mvk || function(){(mvk.q=mvk.q||[]).push(arguments)};
mvk('config', {id:'brand_id'});
</script>
<script async src='//plugin.mavrck.co/mavrck_plugin.js'></script>
<!-- End Mavrck Plugin -->
Example of plugin script added before closing head tag
Note: To ensure the plugin works as expected it is important for this code to be in the <head> tag of every page on your site. Contact your development team if you are unsure of which file to place the code in.
Testing Plugin integration
Test that the plugin is installed by going to a page on your Shopify site and viewing the source of the web page. In most browsers you can do this by right-clicking anywhere on the page and selecting "View Source" in the menu. Search ( command/crtl + "F" ) the source view for "Mavrck" and you should see the code you just added to the theme layout.
Embedding the influencer experience
With the plugin installed you can now embed the Mavrck influencer experience into your Shopify site.
Step One: Add a new page from the "Pages" section in the "Online Store" menu.
Note: The influencer experience is designed to take up the majority of the page so you should select a template that will provide as much page real estate as possible.
Step Two: Add a title for the page and then, in the edit bar for the content section, click the "Show HTML" button.
Step Three: In the content area add the following tag and only this tag to the page.
<div id="mavrck-influencer-program"></div>
Step Four: Ensure the page is set to "Visible" and click "Save".
After saving the new page, click "View" link. You should now see the influencer experience loaded via an iframe within the page template.
Adding a conversion tag to the checkout page
If you would like to track the conversions driven by influencers through the Mavrck platform you need to add a conversion script to your checkout page. This will allow you to attribute sales to individual influencers and better assess their value to your brand.
The easiest way to include a conversion script in your site is to add it within the checkout settings section of your Shopify online store.
Step One: Click "Settings" from the main menu and then click "Checkout".
Step Two: Find your Mavrck conversion tag and the associated conversion code. All Mavrck brand instances have, be default, a purchase conversion tag available. To find your conversion tag go to the "Campaigns" section in the Mavrck management app and click into "Conversion Management". The code will be listed there.
Step Three: In the "Order Processing" section locate the "Additional Scripts" text area.
Step Four: Paste the following script into the "Additional Scripts" text area, replacing the "conversion_code" value with your Mavrck conversion code and click "Save".
<!-- Mavrck Plugin -->
<script>
window.mvk = window.mvk || function(){(mvk.q=mvk.q||[]).push(arguments)};
mvk('config', {id:'brand_id'});
</script>
<script async src='//plugin.mavrck.co/mavrck_plugin.js'></script>
<!-- End Mavrck Plugin -->
<script>
mvk('fireConversion', 'conversion_code', '0.00', '0','');
</script>
Passing Cart Value
If you would also like to capture the cart value at the time of purchase simply add the Shopify short code {{ total_price | money_without_currency }} into the conversion script. (Example shown below)
IMPORTANT: In some Shopify themes the checkout page uses a different layout template than the rest of the site. This will require you to add the main plugin script to the "Additional Scripts" area in addition to the conversion script. Please add this BEFORE the conversion script to ensure proper tracking.
At this point you should have the integrated influencer experience as well as the ability to track conversions that are driven by your influencers. If you have any issues or questions please let us know.
Note: In the future we are planning to release a Mavrck app into Shopify marketplace that will allow you to add and configure the Influencer Plugin without the need to edit theme files.