> For the complete documentation index, see [llms.txt](https://docs.luca.global/boas-vindas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.luca.global/boas-vindas/luca-app/componentes/carrossel-de-produtos.md).

# Carrossel de Produtos

## O que é um Carrossel de Produtos?

Exiba uma variedade de produtos de maneira dinâmica e atrativa com o Carrossel de Produtos. Facilita a descoberta e exploração de itens, incentivando a interação e conversão.

<figure><img src="/files/XDK7sbkBuQ9pI2mvq51A" alt=""><figcaption></figcaption></figure>

<table data-header-hidden data-full-width="false"><thead><tr><th width="207"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Última atualização</strong></td><td>12/07/2024</td><td></td></tr><tr><td><strong>Versão</strong></td><td>1.0</td><td></td></tr><tr><td><strong>Plano</strong></td><td>Grátis</td><td></td></tr></tbody></table>

## Como instalar o Carrossel de Produtos

1. **Instale o componente**
   1. Acesse os Componentes no LUCA App
   2. Busque pelo Carrossel de Produtos
   3. Clique em "Instalar Componente"
2. **Adicione o componente no seu projeto**
   1. Acesse o construtor do Shopify após a instalação
   2. Escolha onde deseja adicionar o componente e clique em "Adicionar Seção"
   3. Busque por “Carrossel de Produtos” e clique no componente

## Configurações da Seção

### Conteúdo

1. **Selecionar coleção**
   * Defina a coleção de produtos que deseja exibir no carrossel.

### **Cabeçalho**

1. **Escala de tamanho do título**
   * Ajuste a escala do título (inicialmente 100%, referente ao tamanho definido na configuração geral do app ou tema).<br>
2. **Selecionar tag do título**
   * Defina a tag para sua estratégia de SEO.<br>
3. **Escrever título**
   * Escreva o título do banner ou deixe o campo vazio se não quiser um título.<br>
4. **Escala do tamanho do texto**
   * Ajuste a escala do texto (inicialmente 100%).<br>
5. **Escrever o texto**
   * Escreva o texto desejado ou deixe o campo vazio se não quiser texto.

### **Botão**

1. **Selecionar tamanho do botão**
   * Escolha o tamanho do botão (grande, médio ou pequeno). Essa escolha se aplicará a ambos os botões.<br>
2. **Selecionar estilo do botão**
   * Escolha o estilo visual do botão (Preenchido, Delineado, Vazio, Sublinhado).<br>
3. **Escrever texto do botão**
   * Escreva o texto do botão primário ou deixe o campo vazio.<br>
4. **Definir link do botão**
   * Escolha o destino do usuário ao clicar no botão.

### Comportamento

1. **Selecionar o comportamento de clique do cartão ou botão de compra**
   * Defina se ao clicar no cartão ou no botão dos cartões de produto dentro do carrossel, o usuário irá para a página de detalhe do produto ou se irá adicionar o produto diretamente no carrinho.

### **Navegação**

1. **Selecionar posição da navegação**
   * Defina se deseja que a navegão esteja na posição "Padrão" sobrepondo o banner, ou selecione "Em baixo" se  desejar que a navegação fique abaixo do banner.

{% tabs %}
{% tab title="Padrão" %}

<figure><img src="/files/1K81v66WJXqRckeg8tLD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Em baixo" %}

<figure><img src="/files/Io6BqgN4iJnb1yzDfhti" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Aparência**

1. **Selecionar proporção da mídia**
   * Defina qual será a proporção das mídias dos cartões de produto. As opções são:

<table><thead><tr><th width="204">Opção</th><th>Valor</th></tr></thead><tbody><tr><td><strong>Padrão</strong></td><td>Usará a proporção definida na configuração geral do tema ou app.</td></tr><tr><td><strong>Quadrado (1:1)</strong></td><td>Formato simples. Tamanho de referência: 1000x1000 pixels.</td></tr><tr><td><strong>Retrato (3:4)</strong></td><td>Formato mais usado em lojas virtuais, também chamado de retângulo vertical. Tamanho de referência: 750x1000 pixels.</td></tr><tr><td><strong>Paisagem (4:3)</strong></td><td>Formato pouco comum, também chamado de retângulo horizontal. Tamanho de referência: 1000x750 pixels.</td></tr><tr><td><strong>Panorâmico (16:9)</strong></td><td>Formato muito comum para vídeos. Tamanho de referência: 2160x1215 pixels.</td></tr><tr><td><strong>Panorâmico (9:16)</strong></td><td>Formato comum para vídeos verticais, ótimo para exibição em tela cheia em smartphones. Tamanho de referência: 1215x2160 pixels.</td></tr><tr><td><strong>Adaptar à mídia</strong></td><td>A mídia será exibida na proporção que foi criada. </td></tr></tbody></table>

{% hint style="warning" %}
**Atenção:** Na opção "Adaptar à mídia", as mídias com proporções diferentes podem causar inconsistências no visual dos cartões de produto.
{% endhint %}

2. **Selecionar largura**
   * Escolha entre "Padrão" e "Página toda". "Padrão" respeita a largura definida nas configurações gerais dos componentes ou tema. "Página toda" ignora margens e ocupa todo o espaço disponível

{% tabs %}
{% tab title="Padrão" %}

<figure><img src="/files/Glm8P2W3P810C6LDjqAr" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Página toda" %}

<figure><img src="/files/8WM4U2UVO2gHcmAnuu8L" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

3. **Selecionar espaçamento entre os cartões**
   * Defina se deseja que os cartões tenham espaçamento entre eles (Padrão), ou se deseja que os cartões fiquem colados sem espaçamento entre eles (Nenhum).

{% tabs %}
{% tab title="Padrão" %}

<figure><img src="/files/2WVt4n2J60jGtKKmNZw9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Nenhum" %}

<figure><img src="/files/A4JO9gw8xn05XAxmj8AZ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

4. **Selecionar espaçamento vertical**
   * Defina o espaçamento entre o Carrossel de Produtos e o componente acima e abaixo dele.

<table><thead><tr><th width="210">Opção</th><th>Descrição</th></tr></thead><tbody><tr><td><strong>Padrão</strong></td><td>Respeita a configuração global do aplicativo ou tema.</td></tr><tr><td><strong>Remover</strong></td><td>Sem espaçamento entre o Banner Padrão e os componentes acima e abaixo dele.</td></tr><tr><td><strong>Remover superior</strong></td><td>Sem espaçamento entre o Banner Padrão e o componente acima dele.</td></tr><tr><td><strong>Remover inferior</strong></td><td>Sem espaçamento entre o Banner Padrão e o componente abaixo dele.</td></tr></tbody></table>

5. **Selecionar alinhamento dos textos**
   * Defina o alinhamento do cabeçalho do carrossel. (esquerda, centro ou direita).<br>
6. **Selecionar quantidade de cartões visíveis**
   * Defina quantos cartões de produto você deseja que sejam visíveis tanto no Desktop quanto no Mobile. Lembrando que quanto mais cartões visíveis, menor será o seu tamanho, e quanto menos cartões, maior será o seu tamanho.

{% tabs %}
{% tab title="\[Desktop] 4 cartões" %}

<figure><img src="/files/St0FeVHwctEPincioIB0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="\[Desktop] 3 cartões" %}

<figure><img src="/files/A4JO9gw8xn05XAxmj8AZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="\[Mobile] 2 cartões" %}

<figure><img src="/files/mXo9Lr4gZOoawhkCzuNb" alt="" width="180"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="\[Mobile] 1 cartão" %}

<figure><img src="/files/AwKSbZqRDY3e8hHrfqB6" alt="" width="180"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

6. **Selecionar imagem de fundo geral:**&#x20;
   * Configuração opcional para adicionar uma textura ou imagem ao fundo.<br>
7. **Ativar efeito parallax**
   * Proporcione uma experiência de movimentação no seu carrossel, onde a imagem de fundo se move de acordo com a rolagem da página.<br>
8. **Esquema de cores**
   * Defina o esquema de cores dos elementos do Carrossel de Produtos.

{% hint style="info" %}

#### Não encontrou a informação que procurava?

Entre em contato conosco via [Discord](https://discord.com/invite/Mgq9GkgawF), ou [envie um e-mail](mailto:suporte@luca.global) com sua dúvida que nosso time de suporte irá lhe atender assim que possível.
{% endhint %}