Tutorial valid only for Legacy CMS Stores.

The VTEX platform is extremely flexible. In other words, it is common for customers to have several customizations at the front-end of e-commerce. Different tools can handle these customizations, among them Google Tag Manager or even JavaScript files included on the CMS.

Quite often the number of customizations is so great that, over time, the storeowner himself forgets what each of these files does, right?

One way of identifying which JavaScript file is applying a given effect is by using the following path.

Have in mind a text contained in a mouseover effect, for example. When positioning your mouse over the Cart symbol, the following text appears: “You have no products in your shopping cart”. In order to identify the JS responsible for this customization to be able to change it, follow the steps below:

1. With your page open, click on F12 or choose Inspect Page;
2. Open the Network tab;
3. Use the dashboard search filed and enter the phrase “You have no products in your shopping cart”;
4. The list will show the file containing the search string;
5. In the VTEX Admin, access Storefront > Layout > CMS and seacrh for the file on the CMS folder using the following path:

Files Manager > .js > Look for _archive_name_.js

If you want to investigate whether a JavaScript customization is causing a layout error, click here to find out how to identify JavaScript errors.