Menu
Feedback
Start here
Tutorials


Changing a page's body class

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://images.ctfassets.net/alneenqid6w5/pbQCDMUz3qO0q4SuwYaq4/7ebd6ca8a0af6cbce899535b83cd719a/changeBodyClass1.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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAFUlEQVR4nGNQ09AzMTPsnTTjwtX7ABe1BVNYGof3AAAAAElFTkSuQmCC","img":{"src":"https://images.contentful.com/alneenqid6w5/132c4r8rtGowUkOYe4YUaM/6b4a3bd0a9fc5f65fe1d950484088ba1/changeBodyClass2.jpg","width":694,"height":240,"type":"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
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Controls for displaying the brand name
« Previous
How to turn my store's website into a PWA
Next »
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX community.
Join our community
Request support from VTEX
For personalized assistance, contact our experts.
Open a support ticket
GithubDeveloper portalCommunityFeedback