0 votes

Shopify: Umbraco CMS Integration

This integration adds a backoffice product picker that can be added as a property editor for content, with a value converter providing a strongly typed model for rendering.

The package support two authentication methods and uses the read_products scope for retrieving products:

  • API Access Token
Use the access token and add it to an app setting in `Web.config` alongside settings for the API version and the name of the shop:
<add key="Umbraco.Cms.Integrations.Commerce.Shopify.ApiVersion" value="2022-01" />
<add key="Umbraco.Cms.Integrations.Commerce.Shopify.AccessToken" value="[your access token]" />
<add key="Umbraco.Cms.Integrations.Commerce.Shopify.Shop" value="[your shop's name]" />

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

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

To use this, simply ensure you don't have an API key in your configuration file.

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 prompted indicating whether the authentication flow is valid.

If OAuth is used, the Connect button will be enabled, which will trigger the Shopify authorization window. The retrieved access token will be saved into the database and used for future requests.

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

Front-end rendering

A strongly typed model will be generated by the property value converter, and an HTML helper is available to easily 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;

And render the form using (assuming a property based on the created data type with alias shopifyProductPicker has been created):


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



1.2.0 (February 6th 2024)

  • Products pagination

1.0.4 (November 22nd 2022)

  • Package icon

1.0.3 (November 4th 2022)

  • Marketplace updates and tags
  • Telemetry elements

1.0.2 (August 8th 2022)

  • Return product id and update async call in value converter

1.0.1 (May 26th 2022)

  • Rendering component with default or custom views
1.0.0 (March 3rd 2022)
  • Initial release




Package files

Archived files


Source code

 Download package
version 1.2.0

NuGet install instructions for Umbraco 8.1.0-9+

Install-Package Umbraco.Cms.Integrations.Commerce.Shopify

NuGet install instructions for Umbraco 9+

dotnet add package Umbraco.Cms.Integrations.Commerce.Shopify

Package owner

Umbraco HQ

Umbraco HQ

Umbraco has 7882 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions: 8.5.x

Package Information

  • Package owner: Umbraco HQ
  • Created: 08/03/2022
  • Current version 1.2.0
  • .NET version 4.7.2
  • License MIT
  • Downloads on Our: 124
  • Downloads on NuGet: 4.2K
  • Total downloads : 4.3K

External resources