All VTEX stores have a native Checkout UI available from the start of their operations on the platform. However, if the merchant wants to modify certain features of this UI, VTEX also offers the option to customize Checkout. This functionality can be performed in two ways: by VTEX Admin or Apps.

In the Checkout section, located in the VTEX Admin side menu, you can access one or more websites (stores) registered in your account and perform checkout settings, including UI customization.

By clicking the blue gear button on the chosen website and selecting the Code tab, you will see a list of files and templates where you can edit or import HTML.

The same files shown in the Code tab are publicly available in the route https://{accountName}.myvtex.com/files/.

To edit Checkout UI information, access the following files/templates:

• HTML Header: template checkout-header
• HTML Footer: template checkout-footer
• CSS: file checkout6-custom.css
• JS: file checkout6-custom.js

You can't edit information in the HTML body of the page.

You can import additional information and files by clicking the New button, then selecting File upload, located in the Code tab.

Importing information is not recommended for CSS files and is not supported for JS files. Using non-standard files can cause side effects, such as breaking your store or disrupting sales.

For more information, see configuring template in the SmartCheckout.

In stores using the CMS Portal (Legacy), files are managed by the Files Manager. The CSS and JS files are located at the route https://{accountName}.myvtex.com/arquivos/ and are named checkout-custom.css and checkout-custom.js, respectively.

Modifications made to CMS Portal (Legacy) files will be applied to all websites (stores) of your account at the same time.

For more information, see View the contents of the store's CSS files.

VTEX doesn't support the use of custom scripts and isn't responsible for any damages that their use may cause. Using custom scripts can break your store or stop sales.

In addition to VTEX Admin, you can use two apps to customize your store’s Checkout UI: Checkout UI Settings and Checkout UI Custom.

If you want to use the Checkout UI Settings app, any script changes made through it will override HTML, CSS, and JS information made through VTEX Admin.

The Checkout UI Settings app allows you to customize your store's Checkout UI through the terminal and the VTEX IO CLI. Compared to the VTEX Admin method, this app provides:

• Perform A/B testing
• Easily track all changes made to the UI (through app versions)
• Apply quick rollbacks to a previous version, if needed.

We highly recommend that you have prior experience using IO apps (VTEX Store Framework) before choosing this checkout UI configuration option.

For more information, see the Checkout UI Settings Guide.

The Checkout UI Custom app can be used to quickly apply predefined customization options (for example, show item unit prices, text sizes, and colors) that have already been approved by VTEX. For more information, see the Checkout UI Custom Guide.