Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Gerenciando placeholders
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)
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