Setup

You need to be running:

• Statamic 5.0+
• PHP 8.1+

It's advisable you also use a queue system that is not sync, for those options you can view the Laravel docs.

This plugin requires a Shopify account to work. If you're testing this, you can create a free Shopify Partner account. When putting your site live, you'll be required to upgrade to a Shopify Lite account. Third-party apps on the Shopify store may interact with how this product works.

Installation

Add statamic-rad-pack/shopify as a dependency to your project:

composer require statamic-rad-pack/shopify

If you are on a Windows environment, please set the SHOPIFY_SESSION_STORAGE_PATH .env value to a writeable path.

Step 1: Using Shopify's Headless app for front end Storefront integration

In you are using the front end code to access the Storefront API we recommend you set up Shopify's Headless on your store. This app lets you create a new sales channel that you can use to determine which of your products are available on your Statamic site.

Once you have installed the app you should create a new sales channel, with a meaningful name (eg "Statamic").

In the Sales Channel Credentials screen you should now be able to copy your keys as follows:

SHOPIFY_APP_URL="your-store.myshopify.com"
SHOPIFY_STOREFRONT_TOKEN="{Public access token}"
SHOPIFY_SALES_CHANNEL="{Sales channel name}"

Step 2: Create an app to access the Admin API on the Shopify Dev Dashboard and get an access token

Set up an app at https://dev.shopify.com/dashboard/ with the following details:

1. App name: "Statamic" or whatever other name you want to use.
2. Redirect URL: https://www.yourwebsite.com/!/shopify/oauth-redirect (as we don't use OAuth redirects this simply redirects to the Statamic admin)
3. Scopes: At a minimum we need: write_customers, read_inventory, read_metaobjects, read_orders, read_product_listings, read_products, read_publications, read_translations, however your site may need others.
4. App URL: your website's URL

If you plan to use customer order history or addresses on your site, you need to request access to protected user fields:

To request access:

1. From the Partner Dashboard, go to Apps, and then select your app.
2. In the sidebar, click API access requests.
3. Find Protected customer data access and click Request access.
4. Select Protected customer data, provide your reasons for using it (we suggest 'App functionality'), and click Save.
5. If your app needs access to protected customer fields, then select the relevant fields, provide your reasons for using them, and click Save.
6. Complete your Data protection details, making sure that your app meets the protected customer data requirements.

Once the app is created, add the Client ID to your .env as SHOPIFY_CLIENT_ID and the Client Secret as SHOPIFY_CLIENT_SECRET. Then click "Install" and add it to your Shopify store.

This add-on will automatically negotiate a new Admin API token for you when you make GraphQL calls and handle expirations.

Step 3. Shopfront redirection

If you are not intending to use the Shopify storefront you should perform redirection from any Shopify URLs to your website.

We recommend installing Shopify's Hydrogen Redirect Theme, and following their setup instructions.

Step 4. Set up webhooks

In order for the addon to receive updates from Shopify about your products and customers you need to set up webhooks.

The quickest way is to run the registration command once your credentials are configured:

php artisan shopify:webhooks:register

This will register all required webhooks in your Shopify store automatically. You can also check webhook status at any time from the Shopify section of the Control Panel.

Note: if you have not requested access to protected customer fields, the order create, customer create and customer update webhooks will fail to register.

Full details can be found in the "Webhooks" section.

Step 5. Finalise your .env

After completing steps 1-4 your .env should look as follows:

SHOPIFY_APP_URL="your-store.myshopify.com"
SHOPIFY_STOREFRONT_TOKEN="{Public access token}"
SHOPIFY_SALES_CHANNEL="{Sales channel name}"
SHOPIFY_CLIENT_ID="{App Client ID}"
SHOPIFY_CLIENT_SECRET="{App Client Secret}"
SHOPIFY_WEBHOOK_SECRET="{Webhook Secret}"

You may also wish to add some of the optional values defined in the "Env Values" section.

Publishable Assets

There are several assets the plugin provides you with

• Config
• Blueprints for Products
• Blueprints for Variants
• Blueprints for Tags, Vendors, and Type Taxonomies
• Asset container for Shopify assets
• Front-end JavaScript to integrate Shopify Storefront API

Quick Setup

When installing the app for the first time it will copy across all of the necessary assets. If you want to manually do this you can run the following command.

php artisan vendor:publish --provider="StatamicRadPack\Shopify\ServiceProvider"

Granular Setup

You can install each asset individually.

Config

php artisan vendor:publish --tag="shopify-config"

JavaScript

Publishes the JavaScript files which have been created to speed up your integration with the Storefront API.

php artisan vendor:publish --tag="shopify-scripts"

Theme Files

You can publish the starter theme files if you want to get started quickly or see how the JavaScript integrates.

php artisan vendor:publish --tag="shopify-theme"