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.