Shop Component Shop Configuration Guide

Note

NOTE: This document is only applicable to select merchants and partners using 3rd party checkout solutions. For more information, contact our enterprise sales team.

Anchor to OverviewOverview

This document details the configuration applicable for use of Shop Component.

At a high level, there are a few things to keep in mind when adopting this component:

A Shopify store is required as a conduit for certain actions, including granting API access keys, configuration and processing of payments through Shopify Payments, and interactions with Shop.
The modifications to your existing checkout workflows are:
- Augmenting your checkout email entry with automatic email recognition.
- The customer completes an order in the Shop Pay Checkout pop-up.
- Your system validates the order before finalizing the transaction with Shopify.
- When orders are fulfilled, your system must update fulfillment information in Shopify which enables customers to track their packages in the Shop app.

Anchor to Getting Started with ShopifyGetting Started with Shopify

If you don't yet have a Shop Component development shop, you can reach out to your Shopify onboarding team for a link to create one.

Once you've logged into your shop, you'll see the Shopify Admin. If you're already familiar with Shopify, you'll notice that this plan has a refined UI, including only the features and settings that are relevant to Shop Component. It's recommended to familiarize yourself and your team with the features and settings that are available to you.

Anchor to Shopify AdminShopify Admin

Anchor to SettingsSettings

Refer to the settings area of the Shopify admin to fully configure the following sections marked with 🟢.

Review the information available to you in the sections marked with 🟡.

Note

Note: Some of these settings will require elevated permissions, so it's recommended to have the account owner for your shop available to grant permissions where needed, and to configure those sections available only to the account owner.

Organization settings:

🟢 Organization: Configure your organization name and manage the stores in your organization
🟢 Users: Delegate permissions to staff through roles and groups, and configure security settings for your organization
🟢 Billing: Configure a payment method and billing profile for your organization

Store settings:
🟢 General: Essential configurations that will impact your use of Shopify
🟡 Plan: Information about your Shopify plan
🟢 Payments: Required configuration for Shopify Payments and payment capture settings
🟢 Apps and sales channels: Configure your custom app used to communicate with Shopify
🟢 Brand: Upload logos for your shop, which is used in the Shop Pay experience. Details below.
🟢 Policies: Configure your store's policies, which are viewable by customers in the Shop Component checkout

Anchor to PaymentsPayments

Shop Component processes payments using Shop Pay via Shopify Payments.

You will need to onboard and configure Shopify Payments sufficiently to be enabled in test mode for your development shop(s), and for your production shop, the account owner will need to complete the onboarding process. This will require verification of information about your business to fully activate Shopify Payments and enable payouts. Follow these instructions to complete the setup.

Credit card rates vary by plan, and may require manual configuration by Shopify. Please contact your Shopify onboarding team with any questions about the rates listed in your shop(s).

Note

You're able to test your Shop Component integration without completing the Shopify Payments configuration, as long as your Shopify Payments account is in test mode, and the Shop Component session is initialized with the debug parameter set to true. See the configure parameters for details.

Anchor to Apps and Sales ChannelsApps and Sales Channels

A Custom App is an essential component of the Shop Component configuration, acting as a conduit between Shopify and your existing platform. By default, the Shop Component plan will have a Custom App pre-configured with the essential Storefront API permissions required for use of Shop Component.

Depending on your system architecture, you may need to create one or more additional custom apps to support your Order Management System (OMS) or other systems. Each app should be configured with only the required scopes for the functionality you're implementing.

To create a new custom app, follow these steps:

Go to Settings ▶️ Apps and sales channels ▶️ Develop apps ▶️ Create an app
Enter an app name and click Create app
Click Configure Admin API scopes
Select the scopes required by this appand click Save
Click Install app ▶️ Install
Copy the Admin APIaccess token and store it securely
Configure your app to use the access token in your implementation

For details on Shopify custom app scopes, see access scopes.

For clarity, while most public apps from the Shopify App Store, have not been validated for use with Shop Component, some apps may still function as expected. At your discretion, you may work with a Shopify app developer to validate the functionality of their app on the Shop Component plan, for your use.

Anchor to BrandBrand

To enable your branding to appear in the Shop Pay Checkout header, you’ll need to configure it in your shop settings. Navigate to Settings ➡️ General, then click on the Manage button in the Brand assets section, and complete the configuration.

To enable your logo and support contact information to appear in the Shop App, you'll need to upload a logo in the Brand in Shop App section of the Admin. Navigate to Shop ➡️ Brand in Shop App, then click Edit details

Anchor to NotificationsNotifications

Shopify doesn’t send notifications for orders created through Shop Component, however based on a customer’s preferences in their Shop account, customers typically expect fulfillment notifications from the Shop app, and these are dependent on your system updating fulfillment information in Shopify as fulfillment actions are performed.

Anchor to The Shop Sales ChannelThe Shop Sales Channel

The Shop channel should be visible in the navigation of your Shopify Admin. If it's not, you can use the store search bar at the top to find it, and it can then be pinned to your navigation.

The homepage of the Shop channel will contain information and configurations that your developers will need to enable Shop Component in your checkout:

Domains allow list
- Add all domains where the javascript SDK will be loaded from
Your Shopify Shop ID
Your Shop Pay Client ID

You should also edit the Shop brand settings, and populate as much as possible to avoid default contact information from being used when customers navigate to your shop in the Shop app.

Anchor to SupportSupport

If you have any questions about the configuration of your shop, contact your Shopify onboarding team, or reach out to Shopify Support. Below are resources you may find helpful:

Shopify Help Center - Powered by a virtual help center assistant trained on our merchant documentation, you can quickly find information on Shopify features.
24/7 Shopify Plus Support - Available to staff members with an account within your Shopify organization:
- For chat support, click on your shop name in the top right corner of the Shopify Admin
- Click on Contact Shopify Plus Support
- Follow the prompts for Live Chat or email support.
- For phone support, generate a pin at pin.shopify.com and call 1-877-255-1225.
Shop Support - For customer feedback or technical issues with the Shop app:
- Shop.app help documentation
- Shop.app contact information