CMSCloudHeartcoreMarketplace

Shopify

Details an integration available for Shopify, built and maintained by Umbraco HQ.

This integration provides a product picker and a value converter that creates a strongly typed model for rendering. Products can be retrieved from a Shopify store or through custom apps developed by Shopify Partners.

Package Links

Minimum version requirements

Umbraco CMS

Major
Minor/Patch

Version 8

8.5.4

Version 9

9.0.1

Version 10

10.0.0

Version 11

11.0.0

Authentication

The package supports two modes of authentication:

  • API Access Token

  • OAuth

API Access Token

Follow these steps to retrieve an API Access token:

  1. Log into the admin interface of your shop by accessing https://{shop}.myshopify.com/admin.

  2. Go to Apps > Develop apps.

  3. Create a new App for the shop.

  4. Enable the App Development feature if it is currently disabled.

  5. Define the scopes for the Admin API: read_products.

  6. Select the option to Install App.

Once the app is installed the Admin API access token will be visible only once in the API credentials tab.

Use the access token and add it to your website's configuration file alongside settings for the API version and the name of the shop:

appsettings.json
"Umbraco": {
  "CMS": {
    "Integrations": {
      "Commerce": {
        "Shopify": {
          "Settings": {
            "ApiVersion": "2022-01",
            "Shop": "[your shop's name]",
            "AccessToken": "[your access token]"
          }
        }
      }
    }
  }
}

Shopify releases a new API version every 3 months at the beginning of the quarter. The latest stable version used for this integration is 2022-01.

OAuth

If you prefer not to use an API token, an authentication flow using OAuth is also available.

To use this, ensure you do not have an API key in your configuration file.

Self Hosted OAuth Configuration

The easiest way to configure the integration is to make use of an application Umbraco has pre-configured with Shopify. With this in place, the authorization flow will go through a proxy website Umbraco maintains before redirecting back to your Umbraco backoffice.

From version 1.1.0, we introduced an alternate approach that requires a little more setup. It removes the need for relying on any services from Umbraco when using the integration.

To use this you need to setup your own app with Shopify and use an extended configuration like this:

appsettings.json
"Umbraco": {
  "CMS": {
    "Integrations": {
      "Commerce": {
        "Shopify": {
          "Settings": {
            ...
            "UseUmbracoAuthorization": true/false
          },
          "OAuthSettings": {
              "ClientId": "[your client id]",
              "ClientSecret": "[your client secret]",
              "RedirectUri": "https://[your website base URL]/umbraco/api/shopifyauthorization/oauth",
              "TokenEndpoint": "https://[your shop].myshopify.com/admin/oauth/access_token",
              "Scopes": "read_products"
            }
        }
      }
    }
  }
}

The authorization mode is toggled by the UseUmbracoAuthorization flag, which by default is set to true meaning that previous versions of the integration are not impacted.

Authorization specific methods are exposed by the IShopifyAuthorizationService and implemented by two services:

The used service is provided using the AuthorizationImplementationFactory method, depending on the type of authorization selected.

If you are selecting your own authorization flow that uses the AuthorizationService, the redirect URL will be this one: /umbraco/api/shopifyauthorization/oauth, from ShopifyAuthorizationController. Please make sure to set to correct URL in the settings of the website and in the configuration of your Shopify app.

The authorization controller uses the window.postMessage interface for cross-window communications when redirecting from the Shopify authorization server.

Backoffice usage

To use the products picker, a new Data Type should be created based on the Shopify Products Picker property editor.

The settings in Web.config will be checked and a message presented indicating whether authentication is in place.

If OAuth is being used for authentication, then the Connect button will be enabled. When clicked, the user will be prompted with the Shopify authorization window.

The retrieved access token will be saved into the database and used for future requests.

The Revoke action will remove the access token from the database and the authorization process will need to be repeated.

Front-end rendering

A strongly typed model will be generated by the property value converter. An HTML helper is available, to render the products on the front end.

Ensure your template has a reference to the following using statement:

@using Umbraco.Cms.Integrations.Commerce.Shopify.Helpers;

Assuming a property based on the created Data Type with the alias shopifyProductPicker has been created, render the form using:

@Html.RenderShopifyProductsList(Model.ShopifyProductPicker)

You can use the default rendering view and style using the existing CSS classes, or use it as inspiration for your views. The path to your custom view will be then passed as a parameter to the HTML helper method.

PreviousSemrushNextZapier

Last updated