How to customize a page using placeholders

Layout

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...

Go to Templates de Página
Click on Categoria
In the Template’s XHTML, enter the code that includes the placeholder
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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGNYvHTVtPkrmnqnRsSlAgAujAaPCyYfLQAAAABJRU5ErkJggg==","img":{"src":"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","width":1118,"height":258,"type":"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:

Go to Configurações > Portal
Click on Portal > Web-sites > [nomedaloja] > / > categoria > @categoria@ > categoria
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAIAAAArjXluAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAJUlEQVR4nGNwsbJ48/oNgwwH25J58xj+//k+Y0I/w80rlyqLigC1fg4JJiofoAAAAABJRU5ErkJggg==","img":{"src":"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","width":276,"height":561,"type":"png"}}$
Go to the Configurações tab
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPw8vKWV9XWt3Rg5BJmOH/x6tpN21Zt2NLZOxEAZKEKVGXPGrMAAAAASUVORK5CYII=","img":{"src":"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","width":1010,"height":482,"type":"png"}}$
Click on Adicionar Controle
Choose the type of control of your preference, in general, HTML.
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPgE5PmE5JMLajQt3FmWLJq3aZtu5+9fj9nySoAZGILPdknYKkAAAAASUVORK5CYII=","img":{"src":"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","width":547,"height":317,"type":"png"}}$
Click on Adicionar
Click on Salvar Configurações
Click on Editar
Click on Adicionar Conteúdo
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGOIT854+enXyYvX7z99DQA04gkgq8CElAAAAABJRU5ErkJggg==","img":{"src":"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","width":1084,"height":243,"type":"png"}}$
Create the HTML that you want to be seen on the website.
In the Preview tab, you can see a preview of the HTML.
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.
Click on the Conteúdo Ativo checkbox
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"}}$
Click on Salvar Configurações