According to research by Adweek, websites featuring UGC benefit from a 29% higher conversion rate than those without it. So why not add your most impactful consumer content to your ecommerce web pages to increase traffic and conversions?
To display a user-generated image collected via Miappi Content on your Shopify site, all you need to do is add a code snippet to your site’s templates by implementing the following steps:
Log in to your Miappi Content dashboard
Click on the 'Embed' tab, which can be found on the left-hand side menu
Create an element on the page with the available id 'miappi-frame' and set it to the width/height you'd like to display Miappi at. e.g.
<div id="miappi-frame" style="width: 300px; height: 600px;”></div>
Copy the Miappi body embed code. The code will look something like the following, you should add it just before closing the </body> tag:
<script type="text/javascript">
var _mpi_user = 'YourMiappiUsername';
(function(){
var miappi = document.createElement('script');
miappi.type = 'text/javascript';
miappi.async = true;
miappi.src = 'http://miappi.com/embed.js';
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(miappi,script);
})();
</script>
Log in to your Shopify admin and click 'Online Store'.
Click 'Actions' and then 'Edit code'.
Open your theme.liquid file.
Include the miappi.js script on your page. Paste the Miappi body embed code in the <head> element:
<head>
<script type="text/javascript">
var _mpi_user = 'YourMiappiUsername';
(function(){
var miappi = document.createElement('script');
miappi.type = 'text/javascript';
miappi.async = true;
miappi.src = 'http://miappi.com/embed.js';
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(miappi,script);
})();
</script>
</head>
Click ‘Save’
That’s all there is to it. Get in touch with your account manager if you need help or want to know more.