Personalizar una página usando placeholder

Layout

Crear una descripción para Categoria puede ser una influencia positiva en el SEO del sitio. Es muy interesante mantener todo el sitio bien mapeado para aumentar la relevancia de los términos citados en textos como descripción, footer, menú, etc.

Colocando la descripción en el sitio

Continuando en el área de edición del Portal...

Entre en Templates de Página
Haga clic en Categoria
En el XHTML del Template, inserte el código que contiene el placeholder
Haga clic en Salvar Template

Recordando que el htmlSeo es el nombre del control creado arriba. Este control puede tener otro nombre, como por ejemplo Banner-Principal.

Ejemplo de código


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

Ejemplos

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFUlEQVR4nGOoqWucNn/FtPkrIuJSASqPBlGsMJceAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/como-personalizar-una-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/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_2.png","width":1118,"height":258,"type":"png"}}$

Obs.: la aplicación del placeholder puede ser realizada de otras maneras hasta que atienda el local, el formato, o sea, la necesidad del dueño de la tienda.

Creando la descripción

Para incluir una descripción para Categoria (Categoria), siga los pasos abajo:

Entre en Configurações > Portal
Haga clic en 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/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_3.png","width":276,"height":561,"type":"png"}}$
Entre en la pestaña Configurações
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAI0lEQVR4nGPw8vKWV9XWt3Rg5BJmOH/x6tpN21Zt2NLZOxEAZKEKVGXPGrMAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_4.png","width":1010,"height":482,"type":"png"}}$
Haga clic en Adicionar Controle
Seleccione el tipo de control que desea, generalmente 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/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_5.png"}}$
Haga clic en Adicionar
Haga clic en Salvar Configurações
Haga clic en Editar
Haga clic en Adicionar Conteúdo
${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAFklEQVR4nGOIT854+enXyYvX7z99DQA04gkgq8CElAAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_6.png","width":1084,"height":243,"type":"png"}}$
Cree el HTML que le gustaría que aparezca en el sitio
En la pestaña Preview podrá tener una visualización previa del HTML
En los campos Condições de Exibição, configure de acuerdo a su necesidad, por ejemplo, seleccione una Categoría en la que este contenido estará disponible.
Haga clic en el checkbox Conteúdo Ativo
Haga clic en 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/es/tutorials/Storefront/Layout/como-personalizar-una-pagina-usando-placeholder_7.png"}}$
Haga clic en Salvar Configurações