> For the complete documentation index, see [llms.txt](https://ajuda.iset.com.br/inicio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.iset.com.br/inicio/minha-loja/personalizacao/vitrines/criando-um-elemento-para-sua-vitrine.md). # 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!