Menu
Feedback
Start here
Tutorials


Tutorials
Layout
Changing a page's body class
1 min read

Tutorial valid only for Legacy CMS Stores.

The templates used by store layouts, by default, don't carry any class in their <body> element.

See, for example, the Department template code.

{"base64":"  ","img":{"width":1360,"height":668,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":174357,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/changing-a-pages-body-class_1.jpg"}}

It has an id, but not a class.

However, when loading a layout that uses this template, we note that the departmento class has been added to the body of the page.

{"base64":"  ","img":{"width":694,"height":240,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":93529,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/changing-a-pages-body-class_2.jpg"}}

That is, the system inserts this class automatically.

You can set the value of this class in the CMS. To do this, follow the steps below:

  1. In the VTEX Admin, access Storefront > Layout > CMS.

  2. Click Sites and Channels folder and enter the layout whose class you want to change.

  3. Change the value of the Body Class field.

  4. Click the Save Layout button.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Changing a banner
« Previous
Changing the pages of the site to HTTPS protocol
Next »
Contributors
1
Photo of the contributor
+ 1 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX Community
Join our community
Request VTEX support
For personalized assistance, contact our experts
Open a support ticket
GitHubDeveloper PortalCommunityFeedback