# Criando um elemento para sua vitrine Nesse tutorial, você irá aprender o passo a passo completo para criar um elemento para sua vitrine. ### **Como cria um elemento para sua vitrine** \ 1- Na aba **Vitrines** clique em **Elementos.** ![](/files/FvIcyO1JwtmYScCLPaJY) 2- Na página **Elementos** clique em **Novo Elemento.** ![](/files/3o7mzjIa2Ji3eBcGRnmr) 3- Após clicar em **Novo Elemento,** será carregada a página **Novo Elemento de Visualização,** nessa página é possível selecionar o tipo de elemento que será criado. ![](/files/ZrflCrPR9mZoZoBIROkT) Os tipos de elementos disponíveis são: * Bloco HTML; * Carrossel de Produtos; * Galeria de Produtos. 4- Tipo **Bloco HTML :** nesse tipo é possível inserir um bloco HTML utilizando o editor. 5- Para isso, basta clicar no botão **Bloco HTML.** ![](/files/eVjb4Tgpl11SqScJxOzu) 6- Na página **Novo Elemento de Visualização,** basta colar o código no espaço separado. ![](/files/ZwGpcQls43Ssx2B9kpb9) 7- Na área **Referenciamento do elemento** você pode adicionar uma Tag para auxiliar na personalização do seu elemento. \ Caso você queira exibir um elemento só em determinado aparelho, é possível utilizar uma tag para fazer isso de forma simples. \ Como por exemplo, você quer exibir um elemento apenas para o visitante que está acessando pelo computador, basta adicionar a Tag **desktop** e pronto! Seu elemento não será exibido para mobile. \ Além disso, a tag criada irá para o código da sua loja virtual, oferecendo mais liberdade e amplitude para suas personalizações. ![](/files/GdE5eAB1Im1IaHQWhABy) 8- Pronto, para aplicar é só clicar no botão **Inserir.** ![](/files/ImeOFWHv2OkAfcuEbSRW) 4.4- Tipo **Carrossel de produtos:** nesse tipo é possível carregar produtos conforme parametrização de filtros definidos. 4.5- Para isso basta clicar em **Carrossel de produtos.** 4.6- Na página **Novo Elemento de Visualização,** você deve preencher com as informações do seu **Carrossel de produtos.** 4.7- No campo **Título** escreva o título que você definiu para o carrossel de produtos. ![](/files/cg8ikyn4XWHQq2VOCG16) 4.8- No campo **Itens visíveis,** você deve escolher o número máximo de produtos que podem ficar visíveis. ![](/files/2josXQrAVkfL195APyr7) 4.9- No campo **Pontos de navegação,** você pode ativar ou inativar os pontos de navegação do seu carrossel. ![](/files/188haTl6jfq6VsC00zBL) Os pontos de navegação são inseridas abaixo do banner. ![](/files/2sF93tA3rC3nZuXsI5cN) 4.1.1- Para ativar ou desativar esses pontos basta escolher a opção desejada. ![](/files/2iM1fPj8x9aEchlsWrrG) 4.1.2- No campo **Setas de navegação** você pode ativar ou desativar as setas de navegação do seu carrossel. ![](/files/nu8fazosIeMiS2uGleq0) As setas de navegação são inseridas nas laterais do banner. ![](/files/ZSErOjw2RK6XReDRTHty) 4.1.3- Para ativar ou desativar as setas, basta escolher a opção desejada. ![](/files/6yNF4vGx5cmFaz52DMVl) 4.1.4- No campo **Filtro** você pode escolher o **Limite de produtos a serem carregados.** ![](/files/f1BR8mf8JXzoHTtID3dm) 4.1.5- No campo **Ordem dos registros** você pode escolher a ordem dos registros, seja pelo menor preço, maior desconto, lançamentos, etc. ![](/files/7lhLl532D7fhq2702xkc) 4.1.6- No campo **E/OU** é possível criar uma nova regra ou um novo grupo. ![](/files/9Kd7ZnUSIasfeuE03WwW) 4.1.7- Para criar uma regra clique no botão **+ Nova Regra.** ![](/files/9LTZ5TCIp383fUg25hKh) 4.1.8- Sua nova regra poderá ser baseada em nome, quantidade, promoção, lançamento, etc. Basta escolher o que melhor se encaixa com sua necessidade. ![](/files/wzRGEfnULsgs7fNhjg82) 4.1.9- Para criar um novo grupo basta clicar em **+ Novo Grupo.** ![](/files/FxSt3S23jnXezjBzSF5s) 4.2.0- Na aba **Referenciamento do elemento** você pode adicionar uma Tag para auxiliar na personalização do seu elemento. \ Caso você queira exibir um elemento só em determinado aparelho, é possível utilizar uma tag para fazer isso de forma simples. \ Como por exemplo, você quer exibir um elemento apenas para o visitante que está acessando pelo computador, basta adicionar a Tag **desktop** e pronto! Seu elemento não será exibido para mobile. \ Além disso, a tag criada irá para o código da sua loja virtual, oferecendo mais liberdade e amplitude para suas personalizações. 4.2.1- Na aba **Template de Exibição** é possível escolher o template de exibição do seu carrossel. 4.2.2- Basta clicar sobre o botão e definir o template que você prefere. 4.2.3- Para salvar suas escolhas basta clicar no botão **Inserir.** 5- Já na aba **Manual** é possível cadastrar seus produtos de forma manual. 5.1- Para isso basta clicar no botão **Adicionar Produtos.** 5.1.1- Na página **Selecione os produtos desejados** é possível escolher os produtos de forma manual. 5.1.2- Além disso, também é possível escolher os produtos a partir de sua categoria. 5.1.3- Após preencher a opção referente os produtos desejados. 5.1.4- Basta clicar no botão **Definir Produtos Selecionados.** 5.1.5- Após selecionar seus produtos de forma manual, você pode escolher qual seu template de exibição. Para isso, clique no botão na aba **Template de exibição.** 5.1.6- Escolha o seu template de exibição. 5.1.7- Para salvar clique no botão **Inserir.** 6- Tipo **Galeria de Produtos :** nesse tipo é possível editar os produtos em modo gallery com a possibilidade de paginação. 6.1- Para isso basta clicar na opção **Galeria de Produtos.** 6.2- Na página **Novo Elemento de Visualização** você deve preencher com as informações da sua **Galeria de produtos.** 6.3- No campo **Título** escreva o título que você definiu para sua galeria de produtos. 6.4- No campo **Itens visíveis** você deve escolher o número máximo de produtos que podem ficar visíveis. 6.5- No campo **Colunas** você deve escolher quantas colunas você deseja que seja exibido a galeria. 6.6- No campo **Paginação** você pode ativar ou desativar a opção de paginação 6.7- No campo **Filtro** você escolher o **Limite de produtos a serem carregados.** 6.8- No campo **Ordem dos registros** você escolher a ordem dos registros, seja pelo menor preço, maior desconto, lançamentos, etc. 6.9- No campo **E/OU** é possível criar uma nova regra ou um novo grupo. 6.1.1- Para criar uma regra clique no botão **+ Nova Regra.** 6.1.2- Sua nova regra poderá ser baseada em nome, quantidade, promoção, lançamento, etc. Basta escolher o que melhor se encaixa com sua necessidade. 6.1.3- Para criar um novo grupo basta criar em **+ Novo Grupo.** 6.1.4- Na aba **Template de Exibição** é possível escolher o template de exibição do seu carrossel. 6.1.5- Basta clicar sobre o botão e definir o template que você prefere. 6.1.6- Para salvar suas escolhas basta clicar no botão **Inserir.** 6.1.7- Já na aba **Manual** é possível selecionar seus produtos de forma manual. 6.1.8- Para isso basta clicar no botão **Adicionar Produtos.** 6.1.9- Na página **Selecione os produtos desejados** é possível escolher os produtos de forma manual. 6.2- Além disso, também é possível selecionar os produtos a partir de sua categoria. 6.2.1- Após preencher a opção referente os produtos desejados. 6.2.2- Basta clicar no botão **Definir Produtos Selecionados.** 6.2.3- Após preencher a opção referente os produtos desejados. 6.2.4- Basta clicar no botão **Definir Produtos Selecionados.** 6.2.5- Após selecionar seus produtos de forma manual, você pode escolher qual seu template de exibição. Para isso, clique no botão na aba **Template de exibição.** 6.2.6- Escolha o seu template de exibição. 6.2.7- Para salvar clique no botão **Inserir.** 6.2.8- Agora é só preencher com o nome do elemento a ser criado. 6.2.9- Por fim clique no botão **OK.** Pronto, agora você já sabe como criar um **Elemento** para sua loja virtual. Ficou com alguma dúvida? Entre em contato conosco! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/vitrines/criando-um-elemento-para-sua-vitrine.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.