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

# Smile Setup

Easily integrate Smile.io (opens new window) loyalty rewards program into your Nacelle (opens new window) Nuxt project.

# Requirements

  • A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
  • A Smile.io account and installed on your Shopify store.

# Setup

# Add Module to Nacelle

Once you hace Nacelle and Smile set up you can install this module in your project from npm:

npm install @nacelle/nacelle-smile.io-nuxt-module --save

After the package has installed, open nuxt.config.js. Under modules add @nacelle/nacelle-smile.io-nuxt-module to the array:

modules: [
  // other modules,
  '@nacelle/nacelle-smile.io-nuxt-module',
]

Next, the SMILE_API_KEY (Public) and SMILE_SECRET (Private) to the project's .env file.

Smile

We'll pass the environment variables to the module by adding a new smile object with key and secret properties to the nacelle block of nuxt.config.js:

nacelle: [
  // other nacelle config,
  (smile: {
    key: process.env.SMILE_API_KEY,
    secret: process.env.SMILE_SECRET,
  }),
]

To make the Smile widget visible in your store, open up layouts/default.vue and paste <smile-widget /> just before the closing div in the template:

<div class="app nacelle">
  <!-- <other-elements /> -->
  <smile-widget />
</div>

# Shopify Setup

If using the Shopify Hosted Solution (opens new window) for Accounts, then follow the additional steps below.

Otherwise, if using the Integrated Account Solution (opens new window) or any other method, you can just pass the customer object into the SmileWidget component as props like this:

<smile-widget :customer="customer" />

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 smile-init.liquid, paste the following code, and save:

{% if customer %}
  {% assign smile_api_secret = shop.metafields['smile'].api_secret %}
  {% assign smile_customer_id = customer.id %}
  {% assign smile_digest = smile_customer_id
    | append: smile_api_secret
    | md5 %}

<script>
  if (window.Cookies) {
    var smileUser = {
      customerId: {{ smile_customer_id | json }},
      digest: {{ smile_digest | json }}
    };

    Cookies.set('nacelle_smile_user', JSON.stringify(smileUser), {expires: 30});
  }
</script>

{% endif %}

Open theme.liquid and and before the closing body tag paste {% include 'smile-init' %}. Your Shopify account pages will now set the correct smile data to be used in your Nacelle store.