Menu
Feedback
Comece aqui


Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Storefront
Layout
Para que serve o Controle Customizado?

Em diversos projetos existe a necessidade de criar um banner, uma vitrine ou até mesmo um código HTML que será utilizado em várias páginas do site. Um exemplo é o banner de frete grátis e descontos, normalmente localizado no header, logo abaixo do menu.

Para evitar o trabalho de adicionar manualmente o mesmo conteúdo várias vezes em cada página, temos a área de Controles Customizados (Custom Elements).

Os controles customizados são muito úteis no desenvolvimento e facilitam a atualização do conteúdo. Podem ser usados em templates e subtemplates.

Criando um controle customizado

Para criar um controle customizado, acesse o Admin e entre no menu Storefront. Clique em Layout, depois na pasta CMS e em Custom Elements.

Dentro da área de Controles Customizados, podemos criar até quatro tipos de características para personalizar cada tag.

Os tipos são:

  • Banner
  • BannerDHTML
  • Coleção
  • HTML

Para criar uma tag personalizada de controle customizado, basta clicar em Add e cadastrar um nome e uma tag, e então selecionar o tipo.

{"base64":"  ","img":{"width":1176,"height":635,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":50410,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Storefront/Layout/para-que-serve-o-controle-customizado_1.png"}}

Atenção: não crie um controle do tipo HTML com um elemento title. Isso pode interferir no funcionamento correto da sua loja.

Aplicando um controle customizado a um template de página

A aplicação da tag de um controle customizado é semelhante ao uso de outros elementos como controles normais e subtemplates. A tag deve ser colocada no local onde queremos que o conteúdo seja carregado.

Para identificar o controle customizado a ser usado, inserimos o nome da tag cadastrada na sintaxe do controle.

Abaixo, seguem as sintaxes para cada tipo de controle:

  1. Tipo Banner: <vtex:nomedatag />
  2. Tipo HTML: <vtex.cmc:nomedatag />
  3. Tipo Coleção: <vtex.cmc:nomedatag />
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Configurar marketplace para multiloja
« Previous
Incluir uma coleção de produtos na vitrine da loja
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