> 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.**

![](/files/H6CrsdDYIjaMIiJI3lp4)

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

![](/files/5t4EYgXKcu4BiB7Rsh8p)

&#x20;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**.

![](/files/MF9hYlcxW8r4l8QdijXA)

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

![](/files/RsttDzrV0tux0hO4vU3s)

&#x20;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.

![](/files/2DOWD7hNwHS0g9yySHEF)

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

\- Filtro;\
\- Manual.

![](/files/RBi2NUb9TXMUXZUfZLMj)

&#x20;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.

![](/files/4h8vGjHw7UUGibiJGOQF)

**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.

![](/files/UNS39ovxlG21SHOyxOxJ)

&#x20;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.

![](/files/bvOhwTUsK00gI9kjqVfx)

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

![](/files/NyO7PDQBRnoqIttQ0JJD)

&#x20;11- Por fim, clique em **Inserir**.

![](/files/DZCDNc2qiMJt57kMJKbM)

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