# Yotpo Loyalty & Referrals Setup
To fully integrate Yotpo and Nacelle, please follow the steps below.
# Shopify Setup
Navigate to your Shopify dashboard and, under "apps" click on "Visit the Shopify App Store". Search for "yotpo" or navigate to "https://apps.shopify.com/yotpo". Click "add app" to install Yotpo. Follow installation instrucions.
To complete the integration a liquid snippet needs to be added to your Shopify theme.
Open your Shopify theme code editor under "Actions > Edit Code". Under "Snippets" click "Add new snippet". Name the snippet yotpo-nacelle-init.liquid
, paste the following code:
{% if customer %}
<script>
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
if (document.cookie) {
var yotpoUser = {
customerId: {{ customer.id }},
customerEmail: '{{ customer.email }}',
customerTags: {{ customer.tags | json }}
};
setCookie('nacelle_yotpo_user', btoa(JSON.stringify(yotpoUser)), 30)
}
</script>
{% endif %}
Open layout/theme.liquid
and and before the closing body
tag paste {% include 'yotpo-nacelle-init' %}
. Your Shopify account pages will now set the correct Yotpo data to be used in your Nacelle store.
# Add Module to Nacelle
Once you have Nacelle and Yotpo set up you can install this module in your project from npm
:
npm install @nacelle/nacelle-yotpo-loyalty --save
After the package has installed, open nuxt.config.js
. Under modules
add @nacelle/nacelle-yotpo-loyalty
to the array. It should look something like this:
modules: [
'@nuxtjs/pwa',
'@nuxtjs/dotenv',
'@nacelle/nacelle-nuxt-module',
'@nuxtjs/sitemap',
'@nacelle/nacelle-yotpo-loyalty'
],
Then add your Yotpo GUID to your environment variables .env
file.
YOTPO_GUID=xxxxxxxxxxxxx
# Add the components to your Nacelle Storefront
To make the Yotpo widget visible in your store, open up layouts/default.vue
and paste <yotpo-widget />
just before the closing div
in the template.