> 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-carrossel-de-produtos.md).

# Elemento Carrossel de Produtos

Para saber como criar um elemento Galeria de Produtos e usá-lo em sua loja virtual, siga o tutorial abaixo:

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

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

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

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

 3- Selecione o tipo de elemento a opção **Carrossel de produtos.**

 4- Carrossel de Produtos: ao escolher essa opção, a tela **Novo Elemento de Visualização** abrirá com as configurações.

5- Escolha um título para esse elemento no campo **Título**.

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

6- No campo **Itens visíveis**, você deve estabelecer o limite máximo de itens visíveis no seu novo elemento.

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

7- No campo **Colunas**, você poderá escolher o número de colunas que serão exibidas.

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

 8- **Paginação**, você pode ativar ou desativar estas funcionalidades.

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

 8- Depois, é preciso escolher a **forma de obtenção dos produtos.** Há duas opções:

* **Filtro;**
* **Manual.**

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

* **Limite de registros a serem carregados:** defina o número máximo de itens a serem obtidos aleatoriamente para a visualização;
* **Ordem de registros:** escolha a ordem de exibição dos produtos, como menor preço;
* **Regras:** defina regras para filtrar os produtos.

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

**Manual:** para a obtenção dos produtos de filtro, você pode selecionar manualmente quais produtos deseja adicionar no carrossel.

Para isso, clique em **Adicionar produto(s)** e marque os selecionados.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FxK0ssecsoHkigu9h9Ka1%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%2FLOFIyibETaHwQ8VXyPqS%2F8.jpeg?alt=media)

10- Após escolher a forma de obtenção dos produtos e configurá-las, escolha o template de exibição que deseja usar no carrossel.

![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FNOeUbZGyqXnEApNkhpST%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%2FpzLdxxUzzmhcSWunpF6M%2F10.jpeg?alt=media)

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