Personalizar uma página usando placeholder

Layout

Criar uma descrição para Categoria pode influenciar positivamente no SEO do site. É muito interessante manter o site como um todo bem mapeado para aumentar a relevância dos termos citados em textos como descrição, footer, menu, etc.

Colocando a descrição no site

Para incluir uma descrição no site, siga os passos abaixo:

Entre em CMS > Layout
Entre em Templates de Página
Clique em Categoria
No XHTML do Template, insira o código contendo o placeholder, como no exemplo abaixo
Clique em Salvar Template

Exemplo de código


html
<div class="bloco-de-conteudo"/>
  
    <vtex:contentPlaceHolder id="htmlSeo"/>
  
</div>

Lembrando que o htmlSeo é o nome do controle criado lá em cima. Este controle pode ter outro nome, como por exemplo Banner-Principal.

Exemplos

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFUlEQVR4nGOoqWucNn/FtPkrIuJSASqPBlGsMJceAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_1.png","width":1071,"height":305,"type":"png"}}$

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGNYvHTVtPkrmnqnRsSlAgAujAaPCyYfLQAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_2.png","width":1118,"height":258,"type":"png"}}$

Obs.: A aplicação do placeholder pode ser realizada de outras maneiras até que atenda o local, o formato, ou seja, a necessidade do lojista.

Criando a descrição

Para incluir uma descrição para Categoria, siga os passos abaixo:

Entre em Configurações > Portal
Clique em 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/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_3.png"}}$
Entre na aba Configurações
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPw8vKWV9XWt3Rg5BJmOH/x6tpN21Zt2NLZOxEAZKEKVGXPGrMAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_4.png","width":1010,"height":482,"type":"png"}}$
Clique em Adicionar Controle
Selecione o tipo de controle que deseja, geralmente 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/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_5.png"}}$
Clique em Adicionar
Clique em Salvar Configurações
Clique em Editar
Clique em Adicionar Conteúdo
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGOIT854+enXyYvX7z99DQA04gkgq8CElAAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_6.png","width":1084,"height":243,"type":"png"}}$
Crie o HTML que gostaria que aparecesse no site
Na aba Preview poderá ter uma pré-visualização do HTML
Nos campos Condições de Exibição, configure de acordo com sua necessidade, por exemplo, selecione uma Categoria, onde este conteúdo será disponibilizado.
Clique no checkbox Conteúdo Ativo
Clique em Adicionar na Lista de Conteúdo
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMklEQVR4nAEnANj/ADI+RgAVIBEjL0JSXQCYm5uusbLAwsLj5OQA0tLS7e3t+vv66uvrNGYV+rsezD8AAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/como-personalizar-uma-pagina-usando-placeholder_7.png","width":768,"height":588,"type":"png"}}$
Clique em Salvar Configurações