> 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/elemento-galeria-de-produtos.md).

# Elemento Galeria de Produtos

Para aprender a criar e usar um elemento de Galeria de Produtos na sua loja virtual, siga o tutorial abaixo:

1- Acesse o painel administrativo da sua loja virtual e, no menu lateral esquerdo, clique em **Personalização** >> **Vitrines** >> **Elementos.**

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FiMcJAVLKlVBtAd1GSwTO%2F0.jpeg?alt=media)

 2\. Na tela **Elementos**, clique em **Novo elemento** para criar um novo elemento para a sua vitrine.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FAWeryrbpw9XnTwjm0Lam%2F1.jpeg?alt=media)

 3- Ao selecionar a opção **Galeria de Produtos**, a tela **Novo Elemento de Visualização** será aberta com as configurações.

4- Digite um título para essa caixa na opção **Título**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FXvA1fznMFs55gz7sQHWD%2F2.jpeg?alt=media)

 5- No próximo campo **Itens visíveis**, você deverá escolher qual o número máximo de itens que ficarão visíveis.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FnJ6ecqUH0sUUegdrUmhI%2F3.jpeg?alt=media)

 6- Em seguida no campo **Colunas**, escolha o número máximo de colunas para a galeria de produtos. Decida também se deseja utilizar a **Paginação** ou não.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FtFwUNQRP2tMzRCihMt9a%2F4.jpeg?alt=media)

 7- Em seguida, você precisa escolher como obter os produtos. Existem duas opções disponíveis:

\- Filtro;\
\- Manual.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FohlT8Yj7Pg3JKWyOxHxo%2F5.jpeg?alt=media)

 8- **Filtro:** com a forma de obtenção dos produtos de filtro, você terá as seguintes configurações:

* **Limite de registros a ser carregado:** defina o número máximo de itens a serem obtidos de forma aleatória para a visualização.
* **Ordem de registros:** você pode escolher qual a ordem de exibição dos produtos, como menor preço.
* **Regras:** você pode definir regras para filtrar os produtos.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FyVWYa6d0o6T2PgMvjWgT%2F6.jpeg?alt=media)

**Manual**: com a forma de obtenção dos produtos de filtro, você pode selecionar manualmente quais produtos deseja adicionar no carrossel. Para isso, basta clicar em **Adicionar produto(s)** e marcar os escolhidos.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FdAKdrgaDQwHY6BWOPhFH%2F7.jpeg?alt=media)

 9- 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%2Fk5rv7cePuRcpavwNO6Ot%2F8.jpeg?alt=media)

 10- Depois de selecionar a forma de obtenção dos produtos e configurá-la, escolha o **template de exibição** que deseja usar.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FSmEUlxC169QuX6jST58M%2F9.jpeg?alt=media)

 11- Por fim, clique em **Inserir**.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FZnk2I4vs9ScmXUvMPDAZ%2F10.jpeg?alt=media)

 Ficou com alguma dúvida? Entre em contato com o nosso suporte via chat online.