You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# 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

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.