How do I know what page of the system is being rendered on the site?

1 min read

Tutorial valid only for Legacy CMS Stores.

When a site page is rendered, the source code always carries a comment that indicates which CMS folder the page layout is related to.

Say, for example, you're on a department page. In this case, if the department page folder is called @department@, the following code will be in the source code:

To find this line of code, go to the front-end of your store, enter the browser's developer tools (F12 on Windows or Cmd + Option + I on Mac if you're using Google Chrome) and do search for CommerceContext (Ctrl + Shift + F in Windows or Cmd + Shift + F on Mac).

See below the relationship between the folder in the CMS and the store's source code.

${"base64":" ","img":{"width":1359,"height":914,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":223917,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/como-saber-qual-pagina-do-sistema-esta-sendo-renderizada-no-site_1.png"}}$

This line of code is always commented out. Therefore, it has only informative function. That is, it does not take any action.

This information is useful, for example, to know which folder the search for a certain term is returning in your store.