> 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.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FvUnlBG6qZ00m50KCVNJs%2F0.jpeg?alt=media) 2- Na página **Elementos** clique em **Novo Elemento.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F20Zmzt3xReOPnHJU5ktW%2F1.jpeg?alt=media) 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FoFphIgCN827CqDgTT8sI%2F2.jpeg?alt=media) 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.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FNS44TpQ8tr0T8sarm1JV%2F3.jpeg?alt=media) 6- Na página **Novo Elemento de Visualização,** basta colar o código no espaço separado. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F8ZBOwhW8J9yxtNrFJaBr%2F4.jpeg?alt=media) 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FPHKRck6nphMYZ2EiE2H2%2F5.jpeg?alt=media) 8- Pronto, para aplicar é só clicar no botão **Inserir.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FPFgsgV0AQX6T509Wkbte%2F6.jpeg?alt=media) 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FtURLaK05LlTtSGMAbYO4%2F7.jpeg?alt=media) 4.8- No campo **Itens visíveis,** você deve escolher o número máximo de produtos que podem ficar visíveis. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FcX39KmjRudghtP6WXAHR%2F8.jpeg?alt=media) 4.9- No campo **Pontos de navegação,** você pode ativar ou inativar os pontos de navegação do seu carrossel. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F8x7IIcEThc69non257xC%2F9.jpeg?alt=media) Os pontos de navegação são inseridas abaixo do banner. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FTZFBCOLXP0vqc76RBe7D%2F10.jpeg?alt=media) 4.1.1- Para ativar ou desativar esses pontos basta escolher a opção desejada. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FRVwP2PsIayEvyfmd7TY5%2F11.jpeg?alt=media) 4.1.2- No campo **Setas de navegação** você pode ativar ou desativar as setas de navegação do seu carrossel. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FHm3hBMmDDHf3JPSr2H7g%2F12.jpeg?alt=media) As setas de navegação são inseridas nas laterais do banner. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FMSul64iQV6FwVqeMVf43%2F13.jpeg?alt=media) 4.1.3- Para ativar ou desativar as setas, basta escolher a opção desejada. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FIwTHE85b5EAb51KYu89u%2F14.jpeg?alt=media) 4.1.4- No campo **Filtro** você pode escolher o **Limite de produtos a serem carregados.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fs41cUQ67yct7upmyMVsh%2F15.jpeg?alt=media) 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F1Z6CXA2Ys9czRt7Ds6u6%2F16.jpeg?alt=media) 4.1.6- No campo **E/OU** é possível criar uma nova regra ou um novo grupo. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FkjNvnkmrUg6duj54RTsJ%2F17.jpeg?alt=media) 4.1.7- Para criar uma regra clique no botão **+ Nova Regra.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FKByAwvk3sA6YC5xcKPwE%2F18.jpeg?alt=media) 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FZuPetB6tcEnVYqlQShVW%2F19.jpeg?alt=media) 4.1.9- Para criar um novo grupo basta clicar em **+ Novo Grupo.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F6gQhGyZjag4SKirhXNBv%2F20.jpeg?alt=media) 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!