Menu
Feedback
Comece aqui


Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Gerenciando placeholders

Os placeholders permitem à loja inserir quatro tipos de elementos na página:

  • Banner
  • Banner DHTML
  • Coleção
  • HTML

Na prática, um placeholder é um trecho de código configurável, que atende a condições definidas pela loja.

Por exemplo, você pode inserir um placeholder na homepage e defini-lo como um banner; e então escolher três imagens diferentes para esse banner, cada uma ativada em uma faixa de datas específica.

Inserindo o placeholder no template

Antes de mais nada, para criar um novo placeholder, é preciso inserir o controle que vai defini-lo no template.

Este é o controle de placeholders: <vtex:contentPlaceHolder id="" />

O que ele faz é criar um elemento configurável no local do código onde for inserido.

É importante inserir um valor de id. Este será o identificador desse placeholder no sistema.

{"base64":"  ","img":{"width":944,"height":668,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":65164,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/gerenciandoplaceholders_1.png"}}

Configurando o placeholder

Agora que o controle de placeholder foi inserido no template, vamos configurá-lo.

Isso é feito nas configurações do layout que usa esse template.

  1. Abra o layout e depois clique na aba Settings. O novo placeholder deve aparecer aí, com o nome igual ao valor do id definido no controle. Por enquanto, esse placeholder está vazio, ou seja, não há nenhum objeto dentro dele.
    {"base64":"  ","img":{"width":1360,"height":642,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59019,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/gerenciandoplaceholders_2.png"}}
  2. Para inserir um objeto, clique em add object.
  3. Em seguida, escolha o tipo de objeto e clique em Adicionar.
  4. Por fim, clique no botão Save Settings, no alto da página.

Agora você já pode editar o objeto inserido no placeholder.

Para isso, clique no lápis dentro do objeto e, em seguida, clique em add content.

{"base64":"  ","img":{"width":2240,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":71389,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/gerenciandoplaceholders_3.png"}}

Agora você pode definir o nome desse objeto, subir imagens para ele e configurar as condições em que ele vai ser renderizado, tais como o período.

Ao final, clique em Add Content List e depois salve o conteúdo.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Associando um template a um layout
« Previous
Páginas
Next »
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback