# 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 Netlify for deployment:

A @ 104.198.14.52

If you purchased your domain from Netlify directly this is a cinch. For more details on how to set up a custom domain with Netlify please see Netlify's DNS Documentation.

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

CNAME shop 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;
  const redirectTo = "https://<PWA Domain>.com" + urlParams;
  if (!fullurl.includes("account")) {
    window.location.href = redirectTo;
  }
</script>

# Install Checkout Script

Include the following snippet 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])
  );
}

# Expose Metafields

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