# Shopify Guide
Following this guide you will deploy a fully functional eCommerce PWA using Nacelle and our preferred configuration stack of Shopify (opens new window) for product management, the headless CMS of your choice (Contentful (opens new window), or Sanity (opens new window)), NuxtJS (opens new window) powering the frontend application, and Vercel (opens new window) for hosting.
# 1. Setup Shopify
Shopify is the easiest eCommerce platform to get running with Nacelle, and only requires minimal setup within the Shopify dashboard.
# Create a Private App
A private app is necessary for Nacelle to communicate with your Shopify store. Create the private app by clicking on "Apps" in your dashboard and then clicking the link at the bottom for "Manage private apps"
Click the button for "Create new private app".
Give your app any name you would like, such as "Nacelle", and add your email address.
For Admin API permissions, give "Read Access" to "Products, variants and collections".
Under the section for Storefront API permissions, check all the boxes.
# Add Catalog to Private App
The private app needs access to products in your store. This can be done on a product's admin page under "Product availability" and checking the box for your new private app. Or you can also do it in bulk by following the directions in Shopify's docs here. (opens new window)
# 2. Set up CMS
You need to set up your CMS to work with Nacelle. This will allow you to use Nacelle to query your CMS data.
Follow setup instructions for Sanity.io
Follow setup instructions for Contentful
# 3. Create a Nacelle Space
With Shopify and your CMS configured, you can now create a new Nacelle space which will index all of your data. Log in or sign up in the Nacelle Dashboard at dashboard.getnacelle.com (opens new window).
After logging in, click the "Create Space" button to start the new space creation walkthrough. You will be entering information from the Shopify private app and the CMS space you just created.
Follow the walkthrough steps, first setting a name and the domain where you're space will be hosted. (You can also set the domain to something like "example.com", if you don't have a domain ready.)
# Enter Shopify Settings
On the next step for Product Connector select "Shopify" and enter you Shopify store's Storefront API GraphQL endpoint. That url will look like this:
https://<shopify-store-subdomain-name>.myshopify.com/api/graphql.json
In Shopify, go to the Apps tab then scroll to the bottom and go into "Manage private apps". Once there you can create a new private app, when you do, enable the "Storefront API" and copy the "Storefront access token". Paste it in the "GraphQL Token" field in the dashboard.
This will allow Nacelle to query your product and collection data, for more details visit the Shopify Storefront API documentation (opens new window).
Important! When you configure the Shopify GraphQL endpoint in Nacelle, Nacelle uses the hostname of this endpoint as a key to look up product data. If this configuration is changed, it will require a manual re-index of your product catalog in Nacelle which can disrupt active build processes.
# Webhooks
Next you will be asked if you want to auto-sync updates from Shopify to Nacelle using webhooks. This is an optional step which requires extra configuration in your Shopify admin. Documentation on how to configure Shopify webhooks can be found in our docs here.
# Save and Sync
With all your settings added you can click the button for "Index products". This will start the process of synchronizing your product and collection data from Shopify with Nacelle. Click "Continue" after it completes.
# Content Settings
On the Content Connector step, select the appropriate connector from the dropdown, and click "Continue".
You will need to enter your API access information provided by your CMS.
Once you have entered in all the fields, click "Index Content" to start importing you CMS data into Nacelle. When it has completed, click "Continue".
# Checkout Settings
Select "Shopify" from the "Source" dropdown. The GraphQL endpoint and token fields will be automatically copied from the Shopify settings you previously entered. Click "Continue".
NOTE
Before going live and if the source is Shopify, make sure this setting's GraphQL Endpoint uses the checkout subdomain in order to prevent cross-origin issues with checkout.
# 4. Create a Nuxt App
With all your Nacelle settings configured, open up your terminal again. Navigate to a directory where you want to build your project and run:
npx @nacelle/[email protected] <your-project-name>
This command will start building a Nacelle Nuxt Starter template. When prompted enter your Nacelle space ID and public token, which can be found at the top of your space settings page in the dashboard.
The process will create a .env file with these values:
NACELLE_SPACE_ID=<your-nacelle-space-id>
NACELLE_GRAPHQL_TOKEN=<your-nacelle-public-token>
NACELLE_ENDPOINT=<nacelle-storefront-api-endpoint>
The values for NACELLE_SPACE_ID and NACELLE_GRAPHQL_TOKEN can be found on the Nacelle Dashboard (opens new window) in the API section of your new space.
# 5. Deploy to Vercel
Your new Nacelle PWA is ready for deployment. Push to your repo, connect it to your Vercel account (opens new window), add your environment variables (opens new window) and you'll be live in minutes!
# Checklist
Review this checklist to make sure you have completed all the steps to get your Nacelle site up and running with Shopify, your CMS, Nuxt, and Vercel.
- Create private app in Shopify
- Make products available to private app
- Set up CMS
- Create a new Nacelle space with API keys for your Shopify private app and CMS
- Install Nacelle Nuxt Starter project
- Push project to Git repo and deploy on Vercel
# Next Steps
Learn more about configuring space settings in the admin dashboard.
Read more about extending and customizing your new space in the Nuxt Starter docs.