# Layout

Esta é a maior seção do nosso painel, nela você encontrará diversas opções de personalização como: fonte da loja, diferenciais competitivos rotativos e texto do campo de busca no cabeçalho da sua loja, diferenciais competitivos em grid, vitrine de produtos, depoimentos, notícias, newsletter, integração com o widget de posts do instagram, rodapé, categoria e busca, página do produto.&#x20;

Agora vamos conversar sobre cada uma delas.&#x20;



**Fonte da loja:** Nesta subseção, você poderá definir a fonte da sua loja. \
\
No campo "links da fonte" você deverá adicionar os links de importação da sua fonte. O nosso tema utiliza a fonte "Mulish, sans-serif", esta fonte e muitas outras estão disponíveis no site de fontes do Google ([Google fontes](https://fonts.google.com/)). E no campo "Família da fonte", você deve informar apenas nome e família da fonte, como no print abaixo, **não sendo necessário** o prefixo "font-family:" ou mesmo o sufixo "**;**". Segue o exemplo:

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2F2XdbG04kVwf6NhiXJVyL%2FScreenshot%20from%202024-01-19%2011-30-40.png?alt=media&#x26;token=b2571cdb-f7b7-4b03-a721-3fe0d7f8212d" alt=""><figcaption></figcaption></figure>

**Observação importante:** Caso preenchido de forma incorreta, isso poderá acarretar na quebra dos estilos da sua loja.



**Cabeçalho:** Nesta subseção você poderá ativar a seção de diferenciais competitivos rotativos (em "Exibir diferenciais em slide") em sua loja e adicionar os textos de cada diferencial. É possível cadastrar até 6 diferenciais. Os campos suportam HTML como escrita, dando mais flexibilidade de personalização aos textos dos seus diferenciais. Segue o print abaixo:&#x20;

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2Fuj6UUkBbegI0MZrCrxli%2FScreenshot%20from%202024-01-19%2011-31-12.png?alt=media&#x26;token=6d2e15b9-25be-40fa-8963-d6a54d434b07" alt=""><figcaption></figcaption></figure>

Além disto, é possível alterar o texto padrão do campo de pesquisa em "texto do campo de pesquisa:" e inserir um texto mais divertido. É possível também definir a quantidade de categorias exibidas na versão desktop em "quantidade de categorias a serem exibidas".&#x20;

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FxwmA23o2FzimXYr8rUOl%2Fimage.png?alt=media&#x26;token=4efdb196-9cd3-4c28-b2fa-64d02c784ef9" alt=""><figcaption></figcaption></figure>

**Diferenciais competitivos (em grid):** Nesta subseção você poderá optar pela exibição dos diferenciais competitivos em grid localizados abaixo do banner principal e editar as informações de cada diferencial. A estrutura de campos utilizada para o cadastrado das informações é em linha, o ícone do diferencial fica à esquerda, título e descrição do diferencial à direita. É possível cadastrar até 5 diferenciais competitivos. Como demonstrado na imagem abaixo:

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FUK80HsSGLMRMWRoX8NC6%2FScreenshot%20from%202024-01-19%2011-32-10.png?alt=media&#x26;token=b1f41974-ca8b-41bb-8a24-72037d3f177e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FGTWQFWcOhTZukcMBpR5v%2Fimage.png?alt=media&#x26;token=6918a7ac-2237-4280-9452-9cf1a970deea" alt=""><figcaption><p>Imagem dos diferenciais competitivos em grid.</p></figcaption></figure>

**Vitrine de produtos:** Nesta subseção você pode tornar a listagem de produtos aleatória e também pode tornar opcional a exibição das etiquetas do produto.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FI7n6TeURHj67VqBgfvgu%2FScreenshot%20from%202024-01-19%2011-33-01.png?alt=media&#x26;token=c8c6b3cb-eb51-4058-a5bb-bda566e423fe" alt=""><figcaption></figcaption></figure>

No layout disponibilizamos duas seções de produtos. Você pode escolher um dos segmentos de produto disponibilizados pela Tray (Mais vendidos, Lançamentos, Destaques, Frete Grátis, Promoção) para exibí-los em cada seção e também o layout de exibição e a quantidade de produtos por seção.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FtBGIPHSxj1HInFI9FV1m%2FScreenshot%20from%202024-01-19%2011-33-19.png?alt=media&#x26;token=bac97429-575b-46ff-87cc-7c119708b777" alt=""><figcaption></figcaption></figure>

No print acima estamos exibindo 8 produtos que possuem o selo de lançamento, e o tipo de exibição selecionado é o slide. Abaixo segue o print de exemplificação de todas as opções de exibição.\
\
Nás ú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 0.7/1). 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 acima!

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2Fo9dKASgN6SBbG6oLVoCl%2Fimage.png?alt=media&#x26;token=efe75ab6-3dd6-4072-843e-bf67677446cb" alt=""><figcaption><p>Modo de exibição em slides</p></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FrgELNP1fWgfxoRxo6EoP%2Fimage.png?alt=media&#x26;token=0d1d24a0-6ac6-4ad0-bb36-a61a99c01ef2" alt=""><figcaption><p>Modo de exibição em grid</p></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FVJBwYUds8MP1GkQdWGVV%2Fimage.png?alt=media&#x26;token=a344d9ae-43e5-44fe-9bf7-4172d9fa4a6e" alt=""><figcaption><p>Modo de exibição "grid com botão de carregar mais"</p></figcaption></figure>

\
Na última imagem acima, a opção "grid com botão de carregar mais" está ativada. Após atingir o limite definido no painel o botão "carregar mais" irá redirecionar o cliente para um link que poderá ser definido no painel no campo "Link de redirecionamento para "carregar mais".\
\
**Observação:** caso não seja preenchido, a loja redirecionará o usuário para a página de pesquisa com o resultado de todos os produtos da loja.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FtBGIPHSxj1HInFI9FV1m%2FScreenshot%20from%202024-01-19%2011-33-19.png?alt=media&#x26;token=bac97429-575b-46ff-87cc-7c119708b777" alt=""><figcaption></figcaption></figure>

**Depoimentos:** Nesta subseção você pode optar por exibir o bloco de depoimentos na página inicial em uma seção que antecede a Newsletter.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FKivmYfWncf3kpMEAq9Eo%2FScreenshot%20from%202024-01-19%2011-52-05.png?alt=media&#x26;token=50bacd89-b7ef-4ce1-9388-56d57bff3c0d" alt=""><figcaption></figcaption></figure>

**Notícias:** Nesta subseção, você poderá optar pela exibição da seção de notícias que será exibida na sua página inicial.&#x20;

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FXyiSLkTyNBspNMYY1EAV%2FScreenshot%20from%202024-01-19%2011-52-48.png?alt=media&#x26;token=592bc1d7-57e6-4a06-8770-eef841c8bfeb" alt=""><figcaption></figcaption></figure>

\


<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FtHbYySFLuS5In2wgecvx%2Fimage.png?alt=media&#x26;token=36269846-b9e8-491d-9260-a267a21b7aac" alt=""><figcaption></figcaption></figure>

**Newsletter:** Nesta seção, você poderá ocultar/exibir a seção da newsletter.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FnvkLk7WzJpa7sFiJnilC%2FScreenshot%20from%202024-01-19%2011-53-41.png?alt=media&#x26;token=51648648-506e-4e7f-9604-85fe5a207149" alt=""><figcaption></figcaption></figure>

**Instagram:**&#x20;

Neste tema, utilizamos o [Light Widget](https://lightwidget.com/) para implementarmos a exibição do instagram. Sugerimos este plugin para ativação do seu instagram, mas você poderá ficar à vontade para utilizar outro plugin e inserir o seu código embed nos campos abaixo. Nesta seção, além do campo de exibição opcional, você poderá inserir o título da seção (como: siga-nos no instagram) e também o @meu\_negocio da sua loja. O campo "script de integração com o instagram" deve receber um script, embed, ou código html de integração com o plugin de exibição de posts. Segue o print:\


<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FO4QNtYMZxLmchWy81Zuk%2FScreenshot%20from%202024-01-19%2011-54-09.png?alt=media&#x26;token=e0ad4666-4a9a-4cd9-bb95-163da2e33f22" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FW6RBnI7crMyrxZFifAme%2Fimage.png?alt=media&#x26;token=baf08ac5-a5b2-431d-b41e-0e84101951a1" alt=""><figcaption><p>Implementação do script de integração com instagram</p></figcaption></figure>

\
**Rodapé:** Nesta seção, você poderá personalizar os links de acessos disponíveis no rodapé. Na primeira coluna, ao desativar a opção de personalização da coluna "Institucional", o site irá exibir todas as páginas internas cadastradas no painel da Tray. Ao deixá-lo ativado, você poderá personalizar o título e link das páginas exibidas na coluna Institucional.&#x20;

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2Fst0DoziW5IwiX8tEGmTU%2FScreenshot%20from%202024-01-19%2011-54-34.png?alt=media&#x26;token=dfce365a-bb1d-45c0-8cc5-e6eb6ab79a5e" alt=""><figcaption></figcaption></figure>

Os itens da seção "Links adicionais em Contato", recebem por padrão o telefone, WhatsApp e e-mail cadastrado na seção [Minha Loja](loja), os campos dessa seção, devem ser utilizados caso você queria disponibilizar algum link de contato adicional para os seus clientes. Lembre-se de clicar no botão ao lado do título "Links adicionais em Contato" para ativar essa funcionalidade.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FxKOAu2nPHrIralYo8kff%2FScreenshot%20from%202024-01-19%2011-55-30.png?alt=media&#x26;token=64530d50-a611-42bc-b4ef-0c6c275d52ba" alt=""><figcaption></figcaption></figure>

Abaixo na seção de "Textos informativos", você poderá informar o horário de funcionamento da sua loja e também algumas informações jurídicas sobre o seu negócio.



**Categorias e busca:** Nesta subseção você pode ocultar o filtro inteligente presentes nas páginas de categoria e busca.

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2F9lu8jEVKBSana1YXPUXA%2FScreenshot%20from%202024-01-19%2011-55-59.png?alt=media&#x26;token=43563e26-8502-4234-83ee-e19cbc980f63" alt=""><figcaption></figcaption></figure>

**Página do produto:** Nesta subseção você poderá ocultar ou exibir as seções de produtos relacionados e últimos produtos vistos. Seguem os prints abaixo:

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FzWB9PCx1zCtlDAKq3cnx%2FScreenshot%20from%202024-01-19%2011-56-30.png?alt=media&#x26;token=624c4145-e018-4b41-ab36-238f5d62c521" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FQndzW8x2vQTDOmXobh5l%2Fimage.png?alt=media&#x26;token=514448e9-05da-4ff1-aa10-c288c051291d" alt=""><figcaption><p>Implementação dos produtos relacionados</p></figcaption></figure>

<figure><img src="https://4206773549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYdXrYLkOltMi6hGOMbZ9%2Fuploads%2FqHfIip8XpajPFfXCBGpJ%2Fimage.png?alt=media&#x26;token=d34a1cdd-d8c1-44af-b699-8c74e003e8bc" alt=""><figcaption><p>Implementação da seção de últimos vistos</p></figcaption></figure>
