So you've created a User Generated campaign (aka UGC Campaign), and customised your embed and now ready to install the embed code into your store, in order to present the widget to your customers. How is this achieved? Let's run through the steps:
1️⃣ Copy your embed code snippet from your User Generated Campaign edit page
Note the embed code will only appear when you have made your campaign live - which will involve fully connecting with your Instagram Professional account.
2️⃣ Decide where you would like your UGC Campaign to appear
Most likely you will want your UGC widget to either appear on just your homepage, or on all pages of your store. Importantly, because the UGC widget appears fixed in the corner of your website, the exact location of the snippet within your page does not appear - what's important is that it is simply present. The rest of this article assumes you are wanting the UGC widget to appear on every page of your store - including your product page and homepage for example - but not the checkout.
3️⃣ Enter the Themes section of your Store settings and click to 'Edit Code'
Here we assume you are using an e-commerce platform such as Shopify. If you have a custom built solution, please reach our to your development team.
The rest of this article assumes you are using Shopify, and specifically it's default theme: Debut. The exact steps should be similar enough if you are using an alternative theme - although you'll want to read the specific notes of your theme for how best to customise it. If you are using an a different e-commerce platform, the steps will be similar - but if you get stuck, reach out to us and we'll get an article together for your particular platform.
Another important note here: if you are not comfortable modifying the code of your Theme, please work with your developer or find an expert to assist you here. Adding the code and subsequently removing it is a fairly straight-forward process, but note that if you accidentally modify other areas of your Themes code, it could leave issues with how your store loads. With this said, let's continue...
4️⃣ Paste the UGC code snippet into the bottom of the theme.liquid template
The theme.liquid template is the 'layout' template for your theme - the overall container within which each specific page loads into. This means, anything changed or added to this template file will impact every page of your store, apart from the checkout. As we want the UGC widget to load on every page, it's here where we want to paste the code snippet.
Now as mentioned above, the exact location of where you paste the code snippet, does not matter, providing you place it within the <body> tags of the file. That said, we recommend you paste it just before the closing </body> tag. To do this, click theme.liquid from the file list sidebar - this will load the file in the code editor. From here, scroll down to the very bottom of the file, where and paste the UGC code snippet as shown below:
5️⃣ Click save changes and you're done!
Now head on over to the homepage of your store and marvel at your work. Should you have any issues, simply ping us a message in the in-app messenger and we'll get you up and running.
Please reach out to use if you need any further assistance.
🤔 How do I trigger the UGC Campaign via a Button on my Page?
There are various ways to launch the UGC Campaign Modal or Sign-up Form on your page. Say you have a button on your Page, as part of an Image banner perhaps that you want to use as the trigger, you can add the sauce-ugc-campaign-show class, e.g:
<button class="sauce-ugc-campaign-show">Share It</button>