UI Customization

With vtex.js you can manipulate catalog and checkout data from the client's side, customizing the store template with additional information according to your business needs.


vtex.js depends on jQuery, so make sure it is included in the page before vtex.js.

You may insert all the modules from vtex.js in your store:

<script src="//"></script>

Or you may insert the modules individually:

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

Now you have access to various methods to use VTEX APIs through the objects vtexjs.catalog and vtexjs.checkout.


vtex.js is made up of several modules, which contain functions that are used to communicate with VTEX services.

The modules reside in the global vtexjs object. When you include a module script, an object with all methods is created to access the APIs of that module. For example, by adding the Checkout module, you now have the vtexjs.checkout object, with several methods for accessing the Checkout API.

Checkout module

The Checkout module handles customer purchase data.

Checkout adds different data needed to create an order: client profile data, address, shipping, items data, and others.

The OrderForm is the structure that contains this clustered data. It consists of several sections, each with useful information that can be accessed, manipulated, and (possibly) changed. To learn more, refer to the OrderForm documentation.

Check the complete documentation for all methods of this module here.

Catalog module

The Catalog module gets data related to your store's products.

Read the complete documentation for all methods of this module here.


In order to develop properly, clone the vtex.js repository, install the dependencies, and run the command:

sudo grunt

Now vtex.js can be linked to other repositories for development.

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