Langshop via App Builder can be used for both PaaS and SaaS environments. The installation process differs slightly depending on your platform, so please follow the appropriate instructions for your setup.

On this page:

• Langshop Installation Guide for PaaS
• Langshop Installation Guide for SaaS
• Additional Resources

Langshop Installation Guide for PaaS

Prerequisites

Before proceeding with the installation, ensure that the following requirements are met:

• Magento_CommerceBackendUix module v.3.1 or higher should be enabled. 

Step 1: Adobe Account

1. Create Adobe Account and become a member of Organization. 

2. Ensure you have access to App Builder. Follow this guide for more details: How to get access to App Builder

Step 2: Adobe Commerce

1. Prepare Adobe Commerce on Cloud or on-premise instance with external access (ngrok for localhost).

2. Create an admin user with the same email address as you use for Adobe Account in the first step. 

3. Integrate Adobe Identity Management Service (IMS) with your Adobe Commerce instance. Follow this guide: Install Adobe Commerce Admin UI SDK

When configured correctly, you will see a new login form in the Admin Panel. Sign in with your Adobe Account to confirm the setup.

Step 3: App Builder application

1. Install aio CLI: Setting up the aio CLI

2. Create App Builder project

• Go to Adobe Developer Console
• Click on Create a new project from template
• Select App Builder
• Choose name and title, then Save it.

3. Download the application and unzip the package.

4. Install the npm dependencies using the command: npm install

5. Copy the .env file: cp env.dist .env

6. Sync your local project with a project created in the Adobe Developer Console with the following commands:

• login to aio cli: aio login
• select organization: aio console org select
• select project: aio console project select  (select project you created in Adobe Developer Console)
• select production workspace: aio console workspace select
• execute: aio app use --merge and confirm selected project

7. Create Adobe Commerce Integration

• In Adobe Commerce Admin, go to System → Extensions → Integrations and click Add New Integration.
• In the Integration Info section, enter the Integration name. Leave the rest of the fields blank.

• In the API section, set the Resource Access to All.

• Go back to the Integration Info section and enter the admin password in the Your Password field, then click Save.

• To activate the integration, at the Integration Page click the Activate link, then click the Allow button to view the tokens.

• Copy the Integration Tokens (Consumer Key, Consumer Secret, Access Token, Access Token Secret) as you’ll need them to configure the app later.

• Click Done.

8. Fill in all required configs in .env file as per the comments:

#LangShop application domain to connect

LANGSHOP_APPLICATION_DOMAIN=https://app.langshop.io/

#General Commerce configuration

COMMERCE_BASE_URL= https://yourstore.com/rest/

COMMERCE_PUBLIC_MEDIA_URL= https://yourstore.com/media

COMMERCE_CONSUMER_KEY=f***

COMMERCE_CONSUMER_SECRET=z***

COMMERCE_ACCESS_TOKEN=w***

COMMERCE_ACCESS_TOKEN_SECRET=9***

Where:

LANGSHOP_APPLICATION_DOMAIN - production domain to connect to Langshop

COMMERCE_BASE_URL - base URL to your Adobe Commerce store

COMMERCE_PUBLIC_MEDIA_URL - URL to public media of your Adobe Commerce store

Integration tokens can be found in Adobe Commerce admin panel (see Step 3, point 7)

9. In application terminal execute onboarding command with your billing email:

npm run onboard email=your_billing_email@example.com

10. Build and deploy application: aio app deploy

Step 4: Connect Langshop App with IMS

1. Go to the Adobe Developer Console and create a new project.

2. Click Add API and select Adobe Commerce with Adobe ID.

3. Choose OAuth Web App as the authentication type and set the Redirect URI to match your deployed app URL.

4. Copy the Client ID and Client Secret keys from the created OAuth Web App.

5. Fill in all required configs in  .env file:

CLIENT_ID=7*******

CLIENT_SECRET=p*******

AUTH_URL=https://ims-na1.adobelogin.com/ims/authorize/v2 

TOKEN_URL=https://ims-na1.adobelogin.com/ims/token 

6. Execute redeploy using the following command:

aio app deploy --force-build --force-deploy

You should now be able to log in with your Adobe Account and see Langshop content.

Step 5: Access the application in Adobe Commerce. 

1. Go to Adobe Commerce: Stores -> Configuration -> Adobe Services -> Admin UI SDK -> Enable Admin UI SDK.

2. Click Configure extensions and select your deployed application from the list and Save it.

Step 6: Langshop Management (Onboarding, Subscription & Configuration)

Complete the Langshop activation process, including subscription setup. The subscription page will be opened in a separate browser window: 

1. Select a subscription plan when you first open Langshop after installation:

• On the main page, you can choose Standard Plan.
• Click Choose another plan to see all available options: Free, Basic, Standard, Advanced, Pro, Enterprise, Unlimited. Each plan includes a 7-day free trial.
• Once the plan is activated, you can start using Langshop.

2. Once you complete subscription, close the window and reload the application by refreshing the page

3. Access Langshop in Adobe Commerce:

• In the Admin sidebar menu, go to Content > Langshop
• The Langshop dashboard will open, where you can manage products, translations, glossary, and settings.

4. The following resources provide detailed instructions and examples for translating products, categories, and product attributes:

• Demo Video – showcasing the full range of Langshop features
• User Guides – step-by-step documentation and tutorials

Langshop installation guide for SaaS

Step 1: Adobe Account

1. Create Adobe Account and become a member of Organization 

2. Ensure you have access to App Builder. Follow this guide for more details: How to get access to App Builder 

Step 2: Adobe Commerce

1. Get access to Adobe Commerce as a Cloud Service instance: https://na1-sandbox.admin.commerce.adobe.com/<instance_id>

Step 3: App Builder application

1. Install aio CLI: Setting up the aio CL

2. Create app builder project

• Go to Adobe Developer Console
• Click on Create a new project from template
• Select App Builder
• Choose name and title, then Save it.

3. Add Adobe Commerce as a Cloud Service to the production workspace.

• Open the project in the Console.
• Add Adobe Commerce as a Cloud Service to the Production workspace.
• Select available product profiles and Save.

4. Download the application and unzip the package.

5. Install the npm dependencies using the command: npm install

6. Copy the .env file: cp env.dist .env

7. Sync your local project with a project created in the Adobe Developer Console with the following commands:

• login to aio cli: aio login
• select organization: aio console org select
• select project: aio console project select  (select project you created in Adobe Developer Console)
• select production workspace: aio console workspace select
• execute: aio app use --merge and confirm selected project

8. Open OAuth Server-to-Server credentials you added before (see Step 3, point 3)

9. Fill in all required configs in .env file as per the comments:

#LangShop application domain to connect

LANGSHOP_APPLICATION_DOMAIN=https://app.langshop.io/

#General Commerce configuration

COMMERCE_BASE_URL= https://na1-sandbox.api.commerce.adobe.com/<instance_id>/

COMMERCE_PUBLIC_MEDIA_URL= https://na1-static-sandbox.api.commerce.adobe.com/<instance_id>/media/

OAUTH_CLIENT_ID=f____w

OAUTH_CLIENT_SECRET=f_w

OAUTH_TECHNICAL_ACCOUNT_ID=f***w

OAUTH_TECHNICAL_ACCOUNT_EMAIL=f*******w

OAUTH_ORG_ID=f**w

OAUTH_SCOPES=AdobeID,openid,read_organizations,additional_info.projectedProductContext,additional_info.roles,adobeio_api,read_client_secret,manage_client_secrets,event_receiver_api,org.read,profile,email,commerce.accs

Where:

LANGSHOP_APPLICATION_DOMAIN - production domain to connect to Langshop

COMMERCE_BASE_URL - base URL to your Adobe Commerce as a Cloud Service instance

COMMERCE_PUBLIC_MEDIA_URL - URL to public media of your Adobe Commerce as a Cloud Service instance

OAUTH_* - credentials from OAuth Server-to-Server configuration

OAUTH_SCOPES - required list of scopes

10. In application terminal execute onboarding command with your billing email:

npm run onboard -- email=your_billing_email@example.com

11. Build and deploy application: aio app deploy

Step 4: Connect Langshop App with IMS.

1. Go to the Adobe Developer Console and create new project

2. Click Add API and select Adobe Commerce with Adobe ID.

3. Select OAuth Web App as the authentication type and set the Redirect URI to match your deployed app URL.

4. Copy the Client ID and Client Secret keys from the created OAuth Web App.

5. Fill in all required config in .env file:

CLIENT_ID=7**c

CLIENT_SECRET=p***z

AUTH_URL=https://ims-na1.adobelogin.com/ims/authorize/v2 

TOKEN_URL=https://ims-na1.adobelogin.com/ims/token 

6. Execute redeploy using the following command:

aio app deploy --force-build --force-deploy

You should now be able to log in with your Adobe Account and see Langshop content.

Step 5: Access the application in Adobe Commerce. 

1. Go to Adobe Commerce as SaaS: Stores -> Configuration -> Adobe Services -> Admin UI SDK -> Enable Admin UI SDK.

2. Click Configure extensions and select your deployed application from the list and Save it.

Step 6: Langshop Management (Onboarding, Subscription & Configuration)

Complete the Langshop activation process, including subscription setup. The subscription page will be opened in a separate browser window: 

1. Select a subscription plan when you first open Langshop after installation:

• On the main page, you can choose Standard Plan.
• Click Choose another plan to see all available options: Free, Basic, Standard, Advanced, Pro, Enterprise, Unlimited. Each plan includes a 7-day free trial.
• Once the plan is activated, you can start using Langshop.

2. Once you complete subscription, close the window and reload the application by refreshing the page

3. Access Langshop in Adobe Commerce:

• In the Admin sidebar menu, go to Content > Langshop
• The Langshop dashboard will open, where you can manage products, translations, glossary, and settings.

4. The following resources provide detailed instructions and examples for translating products, categories, and product attributes (links will be added later):

• Demo Video – showcasing the main Langshop feature (full scope of Langshop features can be viewed in this video).
• User Guides – step-by-step documentation and tutorials

Additional Resources

For more information on using the Langshop app, refer to the following documentation:

• Langshop - Help Docs

Updated on: 07/10/2025