Menu
Feedback
Start here
Tutorials
Developer portal

Known Issues
Support Rules
Troubleshooting

Frequently Asked Questions
Announcements
Tutorials
Tutorials
Explore in-depth tutorials for operating your VTEX store.
Tutorials
Storefront
Layout
How to customize a page using placeholders
How to customize a page using placeholders

Creating a description for the Category (Categoria) may have a positive influence on the site SEO. We recommend maintaining the website well mapped as a whole in order to increase the relevance of the terms mentioned in texts such as the description, footer, menu etc.

Placing the description on the website 

Still on the Portal’s edit area...

  1. Go to Templates de Página
  2. Click on Categoria
  3. In the Template’s XHTML, enter the code that includes the placeholder
  4. Click on Salvar Template

Code example


<div class="content-block"/>
<vtex:contentPlaceHolder id="htmlSeo"/>
</div>

Please remember that htmlSeo is the name of the control created above. This control may have another name, such as Banner-Principal.

Examples

{"base64":"  ","img":{"width":1071,"height":305,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18178,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_1.png"}}

{"base64":"  ","img":{"width":1118,"height":258,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":14638,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_2.png"}}

Note.: Placeholders can be applied in different manners, as long as they comply with the place and the format, that is, the store owner’s needs.

Creating a Description

To include a description for the Category (Categoria), follow the steps below:

  1. Go to Configurações > Portal
  2. Click on Portal > Web-sites > [nomedaloja] > / > categoria > @categoria@ > categoria
    {"base64":"  ","img":{"width":276,"height":561,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42523,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_3.png"}}
  3. Go to the Configurações tab
    {"base64":"  ","img":{"width":1010,"height":482,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21503,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_4.png"}}
  4. Click on Adicionar Controle
  5. Choose the type of control of your preference, in general, HTML.
    {"base64":"  ","img":{"width":547,"height":317,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17205,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_5.png"}}
  6. Click on Adicionar
  7. Click on Salvar Configurações
  8. Click on Editar
  9. Click on Adicionar Conteúdo
    {"base64":"  ","img":{"width":1084,"height":243,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19485,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_6.png"}}
  10. Create the HTML that you want to be seen on the website.
  11. In the Preview tab, you can see a preview of the HTML.
  12. The Condições de Exibição fields can be set up according to your needs, for example, select a Category in which the contents will be made available.
  13. Click on the Conteúdo Ativo checkbox
  14. Click on Adicionar na Lista de Conteúdo
    {"base64":"  ","img":{"width":768,"height":588,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":98713,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/how-to-customize-a-page-using-placeholders_7.png"}}
  15. Click on Salvar Configurações
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 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