> For the complete documentation index, see [llms.txt](https://manuais-temas.netzee.com.br/tray-netstore-geek/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manuais-temas.netzee.com.br/tray-netstore-geek/painel-do-tema/carrossel-de-marcas.md).

# Carrossel de Marcas

O carrossel de marcas é um recurso muito bacana que disponibilizamos junto com o tema. Com ele, uma faixa com todas as marcas disponíveis na sua loja, será apresentada na página inicial, logo após os banners principais. Desse modo, você cria um fluxo direto para o produto que o cliente procura através da marca.

{% hint style="danger" %}
**Atenção!**

Os passos abaixo **não** podem ser feitos com o tema já publicado. Caso o tema já esteja publicado, será necessário duplicar o tema. Para isso vá em ***Minha Loja > Design da Loja***, encontre o tema Netstore Geek, clique na setinha apontando para baixo e clique em Duplicar.
{% endhint %}

Para que o carrossel de marcas funcione corretamente é preciso ficar atento a vários pontos. Vamos começar com o cadastro das marcas no painel administrativo. Para isso acesse Produtos > Marcas e Fabricantes. Cadastre as marcas com as quais você irá trabalhar, incluindo o nome e o caminho pelo qual ela será acessada na sa sua loja.[ Saiba mais.](https://atendimento.tray.com.br/hc/pt-br/articles/211173958-Marcas-e-Fabricantes)

**Fique atento como colocou o nome da marca.** Isso será importante mais para frente.

![](https://685175373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mih0-EQb_5GUB4LPlrA%2F-Mih08Jp0npJ6YV22cPQ%2F-Mih8k_LZySFNtzRU9o_%2Fimage.png?alt=media\&token=bcab1007-eb18-437f-94ef-3bf0b2a3b995)

Após cadastrar as marcas dentro do painel administrativo, precisamos cadastrar as logos referente a cada marca. A Tray, infelizmente, não disponibiliza enviar uma imagem ao cadastrar uma marca. Para que tudo fique funcional e atraente, nós iremos cadastrar as marcas como arquivos do tema. Para isso siga os passos abaixo:

* Acesse ***Minha Loja > Design da Loja***;
* Encontre o tema Netstore Geek Game e clique no botão **Editar HTML**;
* Na janela que abrir, clique na opção **Upload de Arquivos**;
* Na janela que abrir, selecione a pasta **img** para fazer o upload das imagens das marcas;
* Selecione as imagens das logos das marcas que deseja enviar e aguarde o término do processo.

![](https://685175373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mih0-EQb_5GUB4LPlrA%2F-Mih08Jp0npJ6YV22cPQ%2F-Mih8x_3PlDqK5yvgt1q%2Fimage.png?alt=media\&token=cdfc0fe6-d917-48a5-acfa-04615385d9de)

Após esse procedimento as imagens serão carregadas automaticamente no carrossel de marcas.

{% hint style="info" %}
**Considerações Importantes**

* As imagens precisam ser no formato `.png` com fundo transparente para melhor visualização
* As imagens devem ter tamanho exato de 200x60 pixels
* As imagens precisam ter o mesmo nome das marcas, seguindo a seguinte regra:
  * Todas as letras devem ser minúsculas;
  * Caso a marca tenha só uma palavra, como por exemplo a marca Nike, o nome da imagem deverá ficar como `nike.png`;
  * Caso o marca seja composta de duas ou mais palavras, como por exemplo a marca Calvin Klein, o nome da imagem deverá ficar como `calvin-klein.png`;
  * Caso a marca possua letras com acentuação, elas deverão ter o acento removido, como por exemplo a marca Nestlé, o nome da imagem deverá ficar `nestle.png`;
  * Caso a marca possua caracteres especiais, como `ç`, deverá ser trocado pela letra equivalente. No caso do `ç`, o `c`;
  * Caso a marca possua outros caracteres especiais, como `&` ou `'`, eles deverão ser trocados por um hífen. Por exemplo a marca Dolce & Gabbana, o nome da imagem deverá ficar como `dolce-gabbana.png`.
  * Ao salvar a imagem, verifique se ficou como `.png` minúsculo e não `.PNG` maiúsculo, pois a plataforma não reconhece o segundo caso.

Caso tenha dúvida, clique [aqui](https://textedit.tools/slugify) e utilize a ferramenta **Text Edit Slugify** (em inglês) para ajudá-lo.
{% endhint %}