# Layout

Nesta seção você poderá fazer algumas escolhas relativas ao layout da sua loja. Você encontrará seções como:

**Diferenciais em carrossel:** Exibição do carrossel de diferenciais (elemento acima do menu principal, que exibe os diferenciais como carrossel, com efeito slide). Você pode adicionar até 06 diferenciais. Para adicioná-los, basta preencher o campo e clicar em “salvar” logo no fim da rolagem da página.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2F59OIOeUEVcuz0YsmXV6G%2Fdiferenciais.png?alt=media&#x26;token=40ac78f5-f02e-4268-83a9-867b30b04959" alt=""><figcaption></figcaption></figure>

**Diferenciais em grid:** Os diferenciais em grid são os elementos que estão posicionados abaixo do banner principal. Neste caso, possibilitamos a inserção de 4 diferenciais para a sua loja.

Nos campos na imagem ao lado temos os títulos dos diferenciais em HTML. Os ícones de cada diferencial podem ser alterados no painel de cadastros de banners da tray ([cadastro de banners tray](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners)).&#x20;

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FM3008i5iZfA5QQaAbv6e%2Fdiferenciais%20em%20grid.png?alt=media&#x26;token=162a88be-7543-4cc4-8fc9-73cfb91a1e2d" alt=""><figcaption></figcaption></figure>

**Observação importante:** Os ícones dos diferenciais são cadastrados em localizações específicas no painel de banners. Na seguinte ordem:\
\-  **Diferencial 1:** Banner extra 3;\
\-  **Diferencial 2:** Banner extra 4;\
\-  **Diferencial 3:** Banner extra 5;\
\-  **Diferencial 4:** Banner extra 6;

Veja o nosso [gabarito de banners](../../../banners/gabarito-de-banners) e também como [cadastrar banners](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners) no painel da Tray.

**Proporção de imagem do produto na vitrine:** Nas últimas atualizações, implementamos a funcionalidade que permite a alteração da proporção das imagens dos produtos exibidos na vitrine. Ao selecionar uma das opções: Exibição quadrada. (Proporção 1x1) ou exibição retangular (proporção 1x1.65). O preview de produto ao lado das opções fará a simulação da alteração da imagem de produto na vitrine. Veja o print abaixo!

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FX3PUEDpY0dI4RALnNJ9K%2Fimage.png?alt=media&#x26;token=7f21c54a-b18a-4288-8a06-8a2f85bfdd8d" alt=""><figcaption></figcaption></figure>

**Título da Newsletter:** Você pode inserir um título amigável para que os seus clientes realizem o cadastro na sua newsletter.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FOSmnqjvfPOMln5aTcqtW%2Ftitulo%20newsletter.png?alt=media&#x26;token=e9c32c2e-4a31-439a-9761-b0f3e754ad6b" alt=""><figcaption></figcaption></figure>

**Integração com o Instagram:** Neste tema, utilizamos o [Light Widget](https://lightwidget.com/) para implementarmos a exibição do instagram. Sugerimos ele para ativação do seu instagram, mas você poderá ficar à vontade para utilizar outro plugin e inserir o seu código embed nos campos acima. No campo “Insira o título da seção do instagram”, você poderá inserir o “@” do instagram da sua empresa, e no campo “Insira o código html do plugin do instagram”, você poderá colar o embed que o plugin que você está utilizando irá fornecer.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FSWzuw5zrIEf8QprGlOlA%2Finstagram.png?alt=media&#x26;token=fa983b5e-ad0d-4942-8797-6e3651ff1d5d" alt=""><figcaption></figcaption></figure>

Veja o nosso [gabarito de banners](../../../banners/gabarito-de-banners) e também como [cadastrar banners](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners) no painel da Tray.



**Links do rodapé:** Nesta seção, você encontrará os campos relativos às colunas listadas no rodapé da sua loja, como: “Institucional”, “Minha conta”, “Ajuda e suporte”, “Contato”, “Formas de pagamento” e “Siga-nos”.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2F5nN2GqOLvO3HWOHu7zci%2FCaptura%20de%20tela%202023-10-26%20083634.png?alt=media&#x26;token=7e57da5c-1a25-468b-a876-4f5b64ad3c31" alt=""><figcaption></figcaption></figure>

**Institucional:** Nesta seção, você poderá optar se deseja personalizar a coluna “Institucional”.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FoDBWYYkIq00ovZqZBLAy%2FCaptura%20de%20tela%202023-10-26%20084231.png?alt=media&#x26;token=89236226-0c36-4e68-b0d9-7f08f5b279af" alt=""><figcaption></figcaption></figure>

Caso não opte pela personalização da seção, o tema irá exibir todas as páginas extras criadas no seu painel.

Você também poderá personalizar a coluna de “Minha conta”, inserindo o nome da página e o link posteriormente na mesma linha. Você poderá inserir até 5 páginas na coluna “Minha conta”.

**Ajuda e suporte:** Você pode inserir os links da coluna “Ajuda e suporte”. As informações devem ser inseridas da mesma maneira que são inseridas nos campos da coluna de “Minha conta”.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FEyZLevLN7WwOm2s78uUo%2FCaptura%20de%20tela%202023-10-26%20084846.png?alt=media&#x26;token=1a5e9c52-e1db-4366-ae66-e0b245c1bdc1" alt=""><figcaption></figcaption></figure>

**Contato:** Nos campos da coluna de “Contato”, você poderá inserir páginas e links personalizados. Os links ficarão abaixo das informações de contato fornecidas anteriormente na seção de contato. Segue um exemplo:

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FTBqJ7NfA0LzcQzpscHXO%2FCaptura%20de%20tela%202023-10-26%20085043.png?alt=media&#x26;token=a9432fbe-9d1e-452e-91b2-3c07b08c2c2e" alt=""><figcaption></figcaption></figure>

**Textos personalizados:** Nesta seção você poderá inserir um texto para informar aos seus clientes o seu horário de atendimento e também um campo específico para a inserção de dados jurídicos, autorais, ou dados relativos ao seu negócio.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2F0JFuZGwQrJsrGlp8kDzG%2FCaptura%20de%20tela%202023-10-26%20085501.png?alt=media&#x26;token=cc19db33-66f5-4f4b-b9fe-1501267c3ca0" alt=""><figcaption></figcaption></figure>

Como também, caso tenha queria personalizar o texto do popup de cookies e o link da página de privacidade e segurança, é possível inserir as novas informações que serão utilizadas pelo popup de cookies para informar aos seus clientes sobre as políticas de privacidade e segurança da sua empresa.

**CSS e Javascript personalizado:** Nestes campos, você poderá inserir as customizações que você desejar implementar em seu tema.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FJPa3eX7pId8MDc7FCVS0%2FCaptura%20de%20tela%202023-10-26%20090035.png?alt=media&#x26;token=b895a007-e472-4761-aeda-c4a53a3b3bd4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2F1E4T3IRg6kTtvWbo2fOT%2FCaptura%20de%20tela%202023-10-26%20090219.png?alt=media&#x26;token=caf7a8f3-5554-469b-bc9e-45ee46a648c7" alt=""><figcaption></figcaption></figure>

**Obs:** Os códigos inseridos nestes campos serão aplicados em todas as páginas do projeto. Não realize a inserção de códigos se você não tiver o conhecimento técnico mínimo para tal. Isso poderá acarretar na quebra do seu site, ou mesmo no bom funcionamento da sua loja.



**Imagens padrão:** Alguns elementos presentes no layout devem ser vinculados através da plataforma. Para personalizar tais imagens é muito simples, basta acessar Minha Loja > Aparência da loja > Editar Imagens Padrões. Esta opção está disponível somente para o tema publicado.&#x20;

Através dele, é possível inserir ou alterar imagens como o logo que será exibido no checkout, favicon, selos de destaque, lançamento, adicional, frete grátis entre outros.

Ao acessar o caminho mencionado você visualiza a tela abaixo.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2FLmlVw05WpkHV3utUFlAU%2FCaptura%20de%20tela%202023-10-26%20091300.png?alt=media&#x26;token=37dd637c-92d9-47e2-9e70-b182ab4d4b5b" alt=""><figcaption></figcaption></figure>

**Na imagem acima, temos:**

Nome da imagem;                                                                                                            Descrição do local onde é utilizado;                                                                                         Prévia da imagem inserida;                                                                                               Botões de ação;                                                                                                                          O botão com um lápis serve para editar ou inserir uma imagem para aquele determinado local;                                                                                                                       O botão com um x permite remover a imagem padrão ou previamente cadastrada;                                                                                                                                     A logo cadastrada nesta área de imagens padrões, será exibida nas páginas de checkout.



**Imagens das vitrines:** Nosso tema utiliza imagens em uma proporção mais vertical, inspirando moda e inovação. Para as imagens do produto recomendamos o uso das proporções: **1000X1600 píxels.**



**Vídeo do produto:** O nosso tema disponibiliza a integração com youtube e vimeo para a exibição do vídeo do seu produto. Caso queria exibir, basta [adicionar vídeo ao produto](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6734142156699-Imagens-e-V%C3%ADdeos). Ele será disponibilizado como primeira opção nas thumbs do produto.



**Selo dos produtos:** Com a opção de exibição dos selos habilitada via painel de edição do tema, serão mostrados junto a imagem do produto nas vitrines os selos de % de desconto, destaque, lançamento (novidade), frete grátis, e adicional.

<figure><img src="https://300602575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F19HBZJqunHQywn4yX0aU%2Fuploads%2Fu9JKvoTSu2NPLzYE58r1%2FCaptura%20de%20tela%202023-10-27%20165648.png?alt=media&#x26;token=a33396d1-22ba-4c67-a4cc-3179017b7688" alt=""><figcaption></figcaption></figure>
