Setup Shopify
To use the Nuxt Shopify module, you may need to obtain certain credentials to connect with the Shopify APIs. Depending on which API you want to talk to, you might need different tokens and setup steps.
Prerequisites
Make sure you have a Shopify store.
If you don't have one, you can create a free trial store at shopify.com.
If you only want to use the Storefront API and don't need real data, you can use the mock option
to get started right away without a Shopify store. See the module configuration for details.
Store Name
In order to talk to your Shopify store, you need to set the store's name in the module configuration.
export default defineNuxtConfig({
shopify: {
name: 'my-awesome-store',
},
})
The store name is the subdomain part of your Shopify preview URL. For example, if your preview store URL is my-awesome-store.myshopify.com, then your store name is my-awesome-store.
You can also find the name of your Shopify store by logging into your Admin Dashboard.
The name will be shown in the URL: admin.shopify.com/store/my-awesome-store.
Storefront API
In order to use the Storefront API, you need to obtain a public or private access token. To obtain these tokens, sign in to your Shopify Admin Dashboard and follow these steps:
Install the Shopify Headless App
Go to the Shopify Headless app in the App Store and install it to your store.
Navigate to Headless Settings
In your Admin Dashboard, go to Sales Channels → Headless.
Select Your Store
Click on your store in the List of Storefronts.
Manage API Access
Under "Manage API Access", click Manage next to "Storefront API".
Get Your Tokens
You should now see the public and private access tokens for the Storefront API. You can also set scopes and permissions for the Storefront API from this interface.
Customer Account API
To use the Customer Account API, you need to enable it in your Shopify store via the Shopify Headless app.
Install the Shopify Headless App
Go to the Shopify Headless app in the App Store and install it to your store.
Navigate to Headless Settings
In your Admin Dashboard, go to Sales Channels → Headless.
Select Your Store
Click on your store in the List of Storefronts.
Enable Customer Account API
Under "Manage API Access", click Manage next to "Customer Account API".
Get Your Tokens
You should now see the client ID and client secret for the Customer Account API. You can also set scopes and permissions for the Customer Account API from this interface.
Set your callback and logout URLs
Make sure to set the callback URLs to
https://your-app.com/_auth/customer-account/callback
and the logout URLs to
https://your-app.com/_auth/customer-account/logout
respectively, replacing your-app.com with your app's publicly reachable URL.
Admin API
To use the Admin API, you need to create an app in the Shopify Dev Dashboard and obtain your client credentials.
Create a new app
Go to the Shopify Dev Dashboard and create a new app.
Configure access scopes
In your app's Configuration, set the required Admin API access scopes (e.g., read_products, read_orders).
Create an app version
Go to the Deploy section and create an app version to lock in your scopes.
Install the app on your store
Install the app on your store using the install URL:
https://{shop}.myshopify.com/admin/oauth/install?client_id={your_client_id}
Get your client credentials
In your app's Settings page, copy the Client ID and Client Secret. These are used by the module to automatically obtain and refresh access tokens.