---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/en/apps/connect-shopify"
locale: en
meta:
"og:title": "Academy App"
---
[Go to home](https://academy.laioutr.com/en)
- [Apps](https://academy.laioutr.com/en/bereiche/apps)
- [Commerce platforms](https://academy.laioutr.com/en/leitfaeden/commerce-platforms)
- [Connect Shopify](https://academy.laioutr.com/en/apps/connect-shopify)
# Connect Shopify
The Shopify app connects a Shopify store to Laioutr through the Storefront API, Customer Account API and Admin API. Products, collections, cart, menus, content and customer login come straight from Shopify.
## Before you start
- Plan
- Any Laioutr plan plus a Shopify subscription
- Role
- Developer role on the environment
- Duration
- 10 min
### Prerequisites
- Admin access to the Shopify store
- Headless sales channel in Shopify
- Callback URL of the Laioutr storefront for customer login
Last reviewed on October 15, 2026
Connects Shopify as the commerce backend: products, collections, cart with discount codes, menus, blog, content pages and predictive search through the Storefront API, customer login and addresses through the Customer Account API, Shopify files in the Studio media library through the Admin API.
[Developer documentation](https://docs.laioutr.com/apps/app-docs/shopify)
## How it works
1. Install the Headless channel and create a Storefront API tokenWhere: Shopify admin · Role: Shop admin · Duration: 10 min
2. Set up the Customer Account API with client type Confidential and callback URLWhere: Shopify admin · Role: Shop admin · Duration: 10 min
3. Create a custom app with Admin API scopes and generate a tokenWhere: Shopify admin · Role: Shop admin · Duration: 10 min
4. Install the app from the catalogueWhere: Laioutr Cockpit, Apps · Role: Developer · Duration: 2 min
5. Enter, test and save values under ConfigurationWhere: Laioutr Cockpit, Configuration · Role: Developer · Duration: 5 min
6. Deploy the environment and check data in StudioWhere: Laioutr Cockpit and Studio · Role: Developer, content manager · Duration: 10 min
## Configuration
| Field | Purpose | Where to find it | Required | Per environment |
| --- | --- | --- | --- | --- |
| `shopId` | Shop identifier used to build Customer Account API URLs. | Store domain in the format store-id.myshopify.com. | Yes | Yes |
| `storeDomain` | Domain for Storefront and Admin API calls. | Store domain in the format store-id.myshopify.com. | Yes | Yes |
| `privateAccessKey` | Storefront API private access token for products, collections, cart and content. | Shopify admin, Headless sales channel. | Yes | Yes |
| `adminAccessToken` | Admin API token for the media library and additional data. | Shopify admin, Settings > Apps and sales channels > Develop apps, custom app with the required scopes. | Yes | Yes |
| `customerAccountApiClientId` | OAuth2 client ID for customer login. | Shopify admin, Customer Account API, application with client type Confidential. | Yes | Yes |
| `customerAccountApiClientSecret` | OAuth2 client secret of the same application, used server-side only. | Shopify admin, Customer Account API. | Yes | Yes |
| `redirectUri` | Callback URL for the OAuth2 login, identical to the entry in Shopify. | Provided by Laioutr for the storefront. | Yes | Yes |
| `analyticsIds` | Optional: sends analytics destinations plain IDs instead of Shopify GIDs. | Project decision, off by default. | No | Yes |
## Common errors
- Customer login fails after the redirect to Shopify.
- **Cause:** The callback URL in the Customer Account API differs from redirectUri, or the client type is not Confidential.
- **Fix:** Make both URLs identical and set the client type to Confidential.
- The Studio media library shows no Shopify files.
- **Cause:** The Admin API token is missing or the custom app lacks scopes such as read_files and write_files.
- **Fix:** Add the scopes to the custom app, generate a new token and enter it under Configuration.
- The preview shows no products.
- **Cause:** storeDomain is not in the format store-id.myshopify.com or the Storefront token is wrong.
- **Fix:** Correct the values and check them with Test connection.
- New credentials have no effect on the storefront.
- **Cause:** Saved settings only apply from the next deployment of the environment.
- **Fix:** Rebuild the environment with Deploy.
The Shopify app makes Shopify the commerce backend of the Laioutr storefront. The app reads products, collections, carts, menus, blog posts and content pages through the **Storefront API**. Through the **Customer Account API**, customers log in with their Shopify account, manage addresses and reset passwords. A token for the **Admin API** opens the Shopify files in the Studio media library.
Orchestr maps all Shopify data into the unified Laioutr data model. Sections for product lists, product detail pages, cart and search therefore work without Shopify-specific changes; discount codes in the cart and predictive search come from Shopify as well.
No code needs to change in the Shopify store itself. It only takes a few values from the Shopify admin, which the shop team enters directly or hands to the implementation partner.
## Step by step
1. 1 ### Step 1: Set up the Headless channel
In the Shopify admin under **Apps and sales channels**, install the **Headless** channel and create a **Storefront API private access token** in it.
2. 2 ### Step 2: Prepare customer login
Enable the **Customer Account API**, create an application with **Client type** set to **Confidential**, note Client ID and Client Secret and add the storefront callback URL.
3. 3 ### Step 3: Enable the media library
Under **Settings** > **Apps and sales channels** > **Develop apps**, create a custom app with Admin API access, grant at least the scopes `read_files`, `write_files`, `read_themes`, `write_themes` and `read_online_store_navigation`, and generate an Admin API token.
4. 4 ### Step 4: Install the app
In Cockpit under **Apps**, add the Shopify app to the project with **Install** in the **Ecommerce** tab.
5. 5 ### Step 5: Enter and test the values
Open **Configuration** in the environment menu, enter the values, check them with **Test connection** and store them with **Save settings**.
6. 6 ### Step 6: Deploy and check
Rebuild the environment with **Deploy**, then check in Studio that products and categories appear in the preview.
## Check the result
The connection test reports success, the product detail page in Studio shows Shopify products, the media library lists Shopify files, and a test login on the storefront returns through Shopify to the customer account.
## Frequently asked questions
Does any code need to change in the Shopify store?
No. The Headless channel, the Customer Account API and a custom app with Admin API access are all the connection needs.
Which callback URL goes into the Customer Account API?
The URL Laioutr provides for the storefront. It must be identical in Shopify and in the app field `redirectUri`.
Is the Admin API required?
Products and cart only need the Storefront API. The Admin API token serves the Studio media library and additional data and is part of the full feature set.
Are Shopify markets and translations used?
Yes. The Shopify app takes Shopify markets and translations into account, so multilingual storefronts show the maintained content.
## Related
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min
Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Enter credentials and test the connection](https://academy.laioutr.com/en/artikel/enter-credentials-and-test-the-connection)5 min
App credentials are entered per environment under Configuration, checked with Test connection and stored with Save settings. They take effect with the next deployment.
- [Check live data in Studio](https://academy.laioutr.com/en/artikel/check-live-data-in-studio)5 min
The Studio preview shows real data from connected apps. On dynamic pages such as the product detail page, the Preview Data field selects which product the preview shows.
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Set up and check the storefront cart](https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart)5 min
The cart opens as a side panel (Cart Sheet) with line items, a coupon field, progress towards free delivery and totals; there is also a separate cart page. Prices, discounts, shipping costs and the path to checkout come from the commerce backend.
## Learn it in a lesson
- [Connect commerce apps](https://academy.laioutr.com/en/lektionen/developer-connect-commerce-apps)12 min
- [Connect Shopify](https://academy.laioutr.com/en/lektionen/go-live-connect-shopify)8 min
## [Commerce platforms](https://academy.laioutr.com/en/leitfaeden/commerce-platforms)
Search this guide
1. [Connect Shopify](https://academy.laioutr.com/en/apps/connect-shopify)10 min
2. [Connect Shopware with the checkout plugin](https://academy.laioutr.com/en/apps/connect-shopware-with-the-checkout-plugin)12 min
3. [Connect VTEX](https://academy.laioutr.com/en/apps/connect-vtex)8 min
4. [Connect Sylius](https://academy.laioutr.com/en/apps/connect-sylius)8 min
5. [Connect JTL-Wawi](https://academy.laioutr.com/en/apps/connect-jtl-wawi)8 min
6. [Connect B2B Sellers for Shopware](https://academy.laioutr.com/en/apps/connect-b2b-sellers-for-shopware)8 min
7. [Connect Magento 2](https://academy.laioutr.com/en/apps/connect-magento-2)10 min In preparation
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/en/apps/connect-shopify",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/apps/connect-shopify"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/en/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "Commerce platforms",
"item": "https://academy.laioutr.com/en/leitfaeden/commerce-platforms",
"position": 3
},
{
"@type": "ListItem",
"name": "Connect Shopify",
"item": "https://academy.laioutr.com/en/apps/connect-shopify",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Does any code need to change in the Shopify store?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. The Headless channel, the Customer Account API and a custom app with Admin API access are all the connection needs.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Which callback URL goes into the Customer Account API?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The URL Laioutr provides for the storefront. It must be identical in Shopify and in the app field redirectUri.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Is the Admin API required?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Products and cart only need the Storefront API. The Admin API token serves the Studio media library and additional data and is part of the full feature set.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-shopify#/schema/question/4",
"@type": "Question",
"inLanguage": "en",
"name": "Are Shopify markets and translations used?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The Shopify app takes Shopify markets and translations into account, so multilingual storefronts show the maintained content.
"
}
}
]
}
```