You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
excerpt: "Learn how to customize the VTEX Sales App."
4
5
hidden: false
5
6
createdAt: "2021-08-11T17:17:40.610Z"
6
-
updatedAt: "2022-02-24T20:32:46.010Z"
7
+
updatedAt: "2025-09-29T17:32:46.010Z"
7
8
---
8
9
9
-
[VTEX Sales App](https://help.vtex.com/en/tracks/vtex-sales-app-getting-started-and-setting-up--zav76TFEZlAjnyBVL5tRc) is VTEX's main product for Unified Commerce operations. It’s an app that enables your store to provide a true omnichannel experience, seamlessly integrating your online and physical channels, and placing your customers at the business core.
10
+
[VTEX Sales App](https://help.vtex.com/en/tracks/vtex-sales-app-getting-started-and-setting-up--zav76TFEZlAjnyBVL5tRc) is VTEX's main product for Unified Commerce operations. It’s an app that enables your store to provide a true omnichannel experience, seamlessly integrating your online and physical channels, and placing your customers at the core of the business.
10
11
11
12
You can customize the VTEX Sales App experience according to your business needs by editing custom [JavaScript](#javascript-customizations) and [CSS](#css-customizations) files.
12
13
13
14
## JavaScript customizations
14
15
15
-
You can perform JavaScript customizations on the `checkout-instore-custom.js` file, which you must access from the VTEX Admin home, following the steps below.
16
+
You can perform JavaScript customizations on the `checkout-instore-custom.js` file, which you must access from the VTEX Admin homepage, following the steps below.
16
17
17
-
1. Access `https://{{AccountName}}.myvtex.com/admin` and following the steps below. Remember to replace `{{AccountName}}` with your VTEX account name.
18
+
1. Access `https://{{AccountName}}.myvtex.com/admin` and follow the steps below. Remember to replace `{{AccountName}}` with your VTEX account name.
18
19
2. In the main menu, click on **Checkout**.
19
-
3. Click on the store's gear symbol, as shown in the image below.
4. Click on the **Code** tab and finally on the `checkout-instore-custom.js` file, which is in the **Files** list on the right-hand side of the screen, as illustrated in the image below.
4. Click on the **Code** tab and then click on the `checkout-instore-custom.js` file, which is in the **Files** list on the right side of the screen, as illustrated in the image below.
> ℹ️️ If you want to access the `checkout-instore-custom.js` file directly, you can enter the following URL in your browser: `https://{{AccountName}}.myvtex.com/admin/portal#/sites/default/code/files/checkout-instore-custom.js`. Make sure you replace `{{AccountName}}` with your VTEX account name.
25
26
@@ -30,31 +31,35 @@ You can perform JavaScript customizations on the `checkout-instore-custom.js` f
30
31
To make any changes to the file, simply add or modify the lines of code directly in the file edit box. Check out our list of possible customizations to learn more.
31
32
32
33
Once you are done, click on the `Save` button, as shown in the image below.
>⚠️ Always follow the customization instructions in this documentation and only make changes as indicated here, or VTEX Sales App may not work as expected.
36
+
>⚠️ Always follow the customization instructions in this documentation and only make changes as indicated here, otherwise, VTEX Sales App may not work as expected.
36
37
37
38
## CSS customizations
38
39
39
-
For CSS customizations, you need to edit the `checkout-instore-custom.css` file, which you can access by following the same steps as to open the [JavaScript customizations](#javascript-customizations) file. In the **Files** section, just remember to open `checkout-instore-custom.css` instead.
40
+
For CSS customizations, you need to edit the `checkout-instore-custom.css` file, which you can access by following the same steps as to open the [JavaScript customizations](#javascript-customizations) file. In the **Files** section, remember to open `checkout-instore-custom.css` instead.
0 commit comments