All Tutorials

Build a sales channel onboarding and account connection flow

All Tutorials

Build a sales channel onboarding and account connection flow

Build a sales channel onboarding and account connection flow

This guide teaches you how to onboard and connect merchants to your channel using OAuth and Shopify's Polaris components.

Prerequisites

This guide assumes that you're familiar with the following:

Onboarding and account connection

You use OAuth to obtain permission from the merchant to install your sales channel app. The merchant clicks on a link to install your app which redirects to Shopify's OAuth screen.

After the merchant agrees to the OAuth permissions, your app requests an access token and then uses it for API access. The merchant is redirected to Shopify to complete your app's onboarding flow.

Step 1: Setup Shopify

Install a Shopify library to access the API from your app.

Step 2: Host app URL

Host an OAuth app URL on your servers so the user can give your app permissions:

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={access_mode}

Refer to Authenticate with OAuth for definitions of the app URL properties.

Permissions

You can request the following OAuth access scopes for your sales channel app:

  • read_product_listings
  • write_checkouts

Sales channel apps can only read their own orders. This means your app can only read orders for sales that are attributed to your channel.

For more detailed information, refer to Authenticate with OAuth.

Step 3: Get a token for the shop

You can get a token for a shop by exchanging the code for a token. The following redirect URL is returned to your app server, including the code that can be exchanged for an access token:

https://example.org/some/redirect/uri?code={authorization_code}&hmac=da9d83c171400a41f8db91a950508985&timestamp=1409617544&state={nonce}&shop={hostname}

Write a handler to extract the parameters from the URI, then verify the state against the state you saved on your server, and then send the token to Shopify's API.

You can save the returned token in your database. This the merchant account's identifier and you can use it to communicate with Shopify on behalf of the merchant.

Step 4: Redirect the user to your app's onboarding in Shopify

You need to redirect the user to your apps' account page in Shopify. To embed your app in Shopify you need to use Shopify App Bridge or the EASDK. You need to use the Empty state component from Shopify Polaris to build the screen that hosts a value statement, an illustration, and a button for the account connection component.

By default your app's first onboarding screen might look similar to the following:

Example sales channel account

Step 5: Style an account connection form

You need to use the account connection component from Polaris to connect the merchant to your channel. The form needs to reflect your company branding. This clearly informs the merchant that they’re connecting to your account and helps create trust. It must be clear who merchants must contact with any questions around onboarding.

See the component examples to see the account connection from a user’s perspective.

For example, your account connection form might look something like the following:

Example sales channel account

Step 6: Include a setup flow for any qualifying steps or additional onboarding requirements

If you have any qualifying steps, eligibility requirements, or additional onboarding requirements, then these must be included in the account connection form. This is also where you can surface the app's terms of service (TOS). Shopify recommends keeping your setup flow to a maximum of 3-4 separate steps to keep the onboarding process simple. Some topics that are typically included are product categories and fulfillment options. For example, if you're building a marketplace app, then you can call out expectations around fulfillment options and order management as part of this flow. This is also a good place to collect payment details from merchants so that you can pay them for sales on your marketplace. Regardless of what type of sales channel app you're building, you need to be clear and upfront about your app's pricing and fees. If your app uses the checkout API, then you need to prompt the merchant to agree to recurring billing using the AppSubscription resource. For more information, see Get Paid.

Your additional steps might look something like the following:

Example sales channel account

Account section

After merchants have completed account connection and onboarding, then they're redirected to your app's account page in Shopify.

Build an account page

You need to build your account page using the Layout component. Pages built with the layout component include a contextual area (left of card, on desktop) and functional area (card, main/right side, on desktop). The functional area is built using the card component.

Your account page might look like the following, with the contextual area on the left and the functional area on the right:

Sales channel account page

Contextual area

The title and description of each section is used to give the merchant the context that they need to make decisions in your sales channel.

Section heading: What information, feature, or functionality is the merchant dealing with in this section? Be concise, and use your own platform’s terminology where possible, such as “Inventory management”.

Description: A one-sentence description of why this information or functionality is important, and how it benefits the merchant. You can also include a text link that points to documentation or more information on your platform’s site, such as “Learn more about [feature name]”.

Account review (optional step)

If your sales channel has a review process, then you can communicate account status information to merchants using the Banner component.

If your app has a review process, then you can use the blue banner component to communicate this information.

Your account review message might look something like the following:

Sales channel account review banner

Account connection success

If the merchant has successfully passed the review process, then you can indicate success using a green banner component:

Sales channel account review banner

Account rejection

If the merchant has failed the review process, then you can indicate this using a red banner component.

Sales channel account review banner

Account disconnect

Your sales channel must give the merchant the option of disconnecting from the channel from the Account section. Clicking on disconnect must launch a hard alert featuring a red button, since this action cannot be undone.

Sales channel account disconnect

Commissions

Your app must include a commission section using the card component and the annotated layout. The commission section must state the commission rate and state how and when merchants are charged.

Terms and conditions

Your app must include a Terms and conditions section. Any links in that section must open in a new window. The terms and conditions should be hosted outside of your sales channel app, but linked to from the terms and conditions module. The module must be visible after account connection, and located at the bottom of the Account page.

https://polaris.shopify.com/components/navigation/link

A help footer must appear on every page of your sales channel. It's a convenient way to provide your user with links to documentation or support for your sales channel.

Product publishing

After the merchant has been approved, you can begin to publish the merchant's products to your sales channel. This process has both front end and back end considerations.

Step 1: Manage product publishing

Back end

By default, all available products can be published to your channel. However, Shopify recommends reading the product catalog from the ProductListing resource instead, to better align with how merchants like to control where their products appear.

You can make the following call to the Shopify API to retrieve product listings:

GET https://{shop}.myshopify.com/admin/api/2020-10/product_listings.json

In response, the API returns the product listings formatted as JSON.

If you wish to control which products are published to your app, then you can send a PUT request to this resource to publish a product on behalf of the merchant.

Another option is to read products in bulk by performing bulk operations with the GraphQL Admin API.

Front end

To surface product publishing status to the merchant, you need to build a status card using the card component. This status section is included as part of the account section. The status section includes the number of products published. If any products failed to publish to a channel, then merchants should see the number of products with errors clearly listed in the Publishing status card. Merchants should be able to view all products with publishing error directly through the channel by visiting the link found on the status card.

Your status card might look like the following:

Sales channel status card

Step 2: Manage product information

In some cases, you won't have all of the product information that you need for your channel from the product catalog. If this is the case, then you can use metafields to obtain the additional information. There is also a Metafield resource which can be used for the same purpose.

Front end

On the front end, metafields can surface under the More actions dropdown on the products page in Shopify.

By way of example, here is an example of a pattern that was used to implement metafields:

Sales channel metafields

Additional fields are surfaced using the "More actions" dropdown.

Sales channel metafields

Merchants can always visit the Products section in Shopify to view and manage products that are published to sales channels. From the Products section, merchants can view a solve publishing errors one-by-one or using the bulk editor.

Products bulk editor

Step 3: Manage errors

In some cases, you'll encounter errors when trying to publish the merchant's product catalog to your sales channel. If this is the case, then there are a variety of measures that you can take to resolve these errors.

Front end

To surface product publishing errors to the merchant, you need to build a status card using the card component. This status section is included as part of the channel account page.

Your status card could show products being synced or products with errors preventing their sync:

Sales channel status card

Merchants must be able to view all products with publishing error directly through the channel by visiting the link found on the Product publishing card. After all errors are resolved, you can show a success banner:

Sales channel success

Resource feedback

The resource feedback API provides a mechanism to prompt a merchant to solve errors. This can be useful in a variety of scenarios, such as when a product isn't valid for you to publish, or when an edit to a previously published product causes an error.

Any missing product attributes required by a channel can be listed on a Products page using the Resource feedback API. Product resource feedback is surfaced to the merchant under the channel's name in the Product availability section on the Products page.

Sales channel feedback

Product resource feedback:

Product level resource feedback can be used for anything involving a product and its variants.

You can make the following call to the Shopify API to create product resource feedback:

POST https://{shop}.myshopify.com/admin/api/2020-10/products/#{product_id}/resource_feedback.json

After you create resource feedback, you need to check the product for validity whenever you receive a product update. If the error is resolved, then you can dismiss the resource feedback.

Shop resource feedback:

You can use the Shop level feedback for any account level errors that affect the entire catalog.

You can make the following call to the Shopify API to create resource feedback:

POST https://{shop}.myshopify.com/admin/api/2020-10/resource_feedback.json

Step 4: Stay in sync with product changes

After products have been published to your channel and you've dealt with any errors, you need to keep the product catalog up-to-date with any changes in Shopify. A merchant could change a product title or images, for example, or mark a product as out of stock. In order to be notified of changes, you can subscribe to product or product listing level webhooks:

  • product_listings/add
  • product_listings/update
  • product_listings/remove
  • collection_listings/add
  • collection_listings/update
  • collection_listings/remove

You can configure webhooks using the API by specifying the topic in the body of the request.

The following example shows a request that uses the product_listings/add webhook:

POST /admin/api/2020-01/webhooks.json HTTP/1.1
Host: channelsrule.myshopify.com
X-Shopify-Access-Token: 085abas8bd90325c3f81s8e9c88befc0
Content-Type: application/json

{
    "webhook": {
        "topic": "product_listings/add",
        "address": "https://yourchannelapp.com/webhooks",
        "format": "json",
    }
}

View response

The API call returns the following response:

HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8
X-Shopify-Shop-Api-Call-Limit: 1/40

{
    "webhook": {
        "id": 125777732,
        "address": "https://yourchannelapp.com/webhooks",
        "topic": "product_listings/add",
        "created_at": "2015-12-08T06:16:53+01:00",
        "updated_at": "2015-12-08T06:16:53+01:00",
        "format": "json",
        "fields": [],
        "metafield_namespaces": []
    }
}

You can then create an HTTP endpoint on your server to monitor for events. Refer to Creating an endpoint for webhooks to learn more.

Next steps

More information