# 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="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2Fy3Q25HzFXPygcdYP0bjl%2Fimage.png?alt=media&#x26;token=9b6117c5-e3fa-49d6-9462-de789748efe1" 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="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FJUnJUes87LHVOZZSJB3X%2Fimage.png?alt=media&#x26;token=6ae4ff40-f721-44b1-a0ad-e303f128431e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Em baixo" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2Feobsa10b6M2HH4Upi8Bc%2Fimage.png?alt=media&#x26;token=f94479d9-bb63-448c-bd03-4e9e9d5f4f08" 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="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2Fn4bCDOHKDTmKQNlBwlOp%2Fimage.png?alt=media&#x26;token=dac6e6a2-848e-4588-99c3-98d8246faba8" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FYuyGeRsZJfyO6BFIjiEC%2Fimage.png?alt=media&#x26;token=a0fa2d37-307a-4acf-b100-b81adfa88789" 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="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FWFmN3RZAOLwpKra0d9l7%2Fimage.png?alt=media&#x26;token=17ea0999-d4b9-44f4-bea8-14ec14af14ff" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Nenhum" %}

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FMQDpzj0CoN4S7P2B8BNv%2Fimage.png?alt=media&#x26;token=124c4519-3ddc-425b-9172-196dd4f77e77" 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="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2Fw3NoVCcJux1MBjwQaxrY%2Fimage.png?alt=media&#x26;token=d779c93d-e815-471a-8103-7d3818e1715f" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FMQDpzj0CoN4S7P2B8BNv%2Fimage.png?alt=media&#x26;token=124c4519-3ddc-425b-9172-196dd4f77e77" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2FEPCe0kufSCaVn8TpDXxh%2Fimage.png?alt=media&#x26;token=9ac974e6-3d62-4dd5-be0a-d398d2a80372" alt="" width="180"><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2941734035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmZLdlCcL2gjzB3oisYTc%2Fuploads%2F8shsaOJ029MLuMO3u6X7%2Fimage.png?alt=media&#x26;token=f66f8e93-83f0-4014-80eb-188c698a6f75" 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 %}