Documentation
Feedback
Guides
API Reference

Guides
VTEX Sales App
How to customize VTEX Sales App

VTEX Sales App 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.

You can customize the VTEX Sales App experience according to your business needs by editing custom JavaScript and CSS files.

JavaScript customizations

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.

  1. Access https://{{AccountName}}.myvtex.com/admin and following the steps below. Remember to replace {{AccountName}} with your VTEX account name.
  2. In the main menu, click on Checkout.
  3. Click on the store's gear symbol, as shown in the image below.
    {"base64":"  ","img":{"width":3840,"height":1769,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":119044,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/inStore_Customizations_-_1_-_EN.png"}}
  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.
    {"base64":"  ","img":{"width":3840,"height":1703,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":205464,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/inStore_Customizations_-_2_-_EN.png"}}

️ 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.

Edit the JavaScript file

checkout-instore-custom.js is a JavaScript file that accepts a number of functions, variables and objects responsible for changing standard behaviors of the VTEX Sales App application.

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.

Once you are done, click on the Save button, as shown in the image below.

{"base64":"  ","img":{"width":2989,"height":1667,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":291241,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/inStore_Customizations_-_3_-_EN.png"}}

Always follow the customization instructions in this documentation and only make changes as indicated here, or VTEX Sales App may not work as expected.

CSS customizations

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 file. In the Files section, just remember to open checkout-instore-custom.css instead.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAACTpAAAk6QFQJOf4AAAAFklEQVR4nGOYs2Dxg8dPnj1/wS0sDgA3tAdxdJWPHQAAAABJRU5ErkJggg==","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/Enable_product_recommendations_-_1_-_EN.png","width":756,"height":250,"type":"png"}}
Likewise, you can modify the CSS style sheet directly in the edit box.

When you have finished, make sure you click the Save button.

List of customizations

You can make the following customizations on VTEX Sales App:

You can find more information on how to set up each customization on the following guides.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page