# Shopify Setup

To fully integrate Nacelle with Shopify, please follow the steps below.

# Shopify Domain Routing

Navigate to your Shopify dashboard and, under "online store" click on "domains". You will want to change your primary domain to subdomain. For example, shop.reallycoolmerchantstore.com uses "shop" as the subdomain. You can use any subdomain you choose.

# DNS for Production

Log into your DNS provider for the next step. You will need to add an A name record which points to your production server. For example, if you are using Vercel for deployment:

A @ 76.76.21.21

Next, add a CNAME record with a name of "checkout" and a content value of shops.myshopify.com:

CNAME checkout shops.myshopify.com

Don't forget about adding a CNAME for "www" if required.

# Install Redirect Script

Please place the following JavaScript snippet directly below the opening <head> tag in your theme.liquid. Replace the redirectTo <PWA domain> with the production domain for your PWA storefront:

<script>
  const fullurl = window.location.href
  const route = fullurl.split("?")[0]
  const urlParams = window.location.search
    {% if product.handle %}
      let handle = "/products/{{product.handle}}"
      let redirectTo = "https://<PWA Domain>" + handle + urlParams
      window.location.href = redirectTo
    {% else %}
      redirectTo = "https://<PWA Domain>" + urlParams
    {% endif %}
  if (!fullurl.includes("account")) {
    window.location.href = redirectTo
  }
</script>

# Install Checkout Script

Include the following snippets in the Checkout Scripts section in Shopify:

if (window.location.search && window.location.search.includes('c=')) {
  var userDataObject = JSON.parse(
    decodeURI(window.location.search.split('c=')[1].split('&')[0])
  )
}

And

<!-- NACELLE CHECKOUT COMPLETE EVENT | BEGIN -->
{% if first_time_accessed %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const vegaLineItems = [
    {% for line_item in line_items %}
      {
        'handle': '{{ line_item.product.handle }}',
        'quantity': '{{ line_item.quantity }}',
        'variantId':
        '{{ line_item.variant_id }}'
      },
      {% endfor %}
    ]
    const vegaEvent = {
      eventType: 'checkoutComplete',
      spaceId: YOUR_NACELLE_SPACE_ID,
      checkoutId: '{{ checkout.id }}',
      cart: vegaLineItems
    }
    axios.post('https://tem.hailfrequency.com/events/add', vegaEvent);
</script>
<!-- NACELLE CHECKOUT COMPLETE EVENT | END -->

Your nacelle space id can be found in the dashboard (opens new window)

# Expose Metafields

If you need to access product Metafields in Nacelle, please follow the Shopify Metafield Instructions