# Estrutura do Tema

Depois de criado o tema, ele tem a estrutura de pastas abaixo:

```
├─ configs/ 
├─ css/ 
├─ elements/ 
├─ img/ 
├─ js/
├─ layouts/ 
└─ pages/
```

## configs

Pasta **obrigatória** que deve conter os arquivos responsáveis por tornar o tema customizável, possibilitando assim a alteração do estilo do tema de forma dinâmica.

```
└── configs/
   ├─ settings.html
   └─ settings.json
```

### Conteúdo

`settings.html` <mark style="color:green;">**¹**</mark> - arquivo com campos que aparecerão na tela de customização do tema.

`settings.json` <mark style="color:green;">**¹**</mark> - arquivo com as variáveis que serão utilizadas na customização do tema.

## css <a href="#ir-para-css" id="ir-para-css"></a>

Pasta **obrigatória** que contém os arquivos de estilização do tema, como fontes de texto e folhas de estilos.

```
└── css/
   ├─ bootstrap/
   |  ├─ bootstrap.min.css
   |  └─ config.json
   |
   ├─ fonts/
   |  ├─ fonte-do-tema.eot
   |  ├─ fonte-do-tema.svg
   |  ├─ fonte-do-tema.ttf
   |  └─ fonte-do-tema.woff
   |
   ├─ sass/
   |  ├─ address.scss
   |  ├─ banners.scss
   |  ├─ base.scss
   |  ├─ footer.scss
   |  ├─ header.scss
   |  └─ theme.min.scss
   |
   ├─ custom.css.html
   └─ theme.min.css
```

### **bootstrap**

Pasta opcional que pode conter a estrutura básica do tema com o uso do Framework Bootstrap, caso o utilize.

### **fonts**

Pasta **obrigatória** que contém as fontes utilizadas no tema, todas as fontes aqui armazenadas são carregadas automaticamente. Estas devem ter os formatos compatíveis que podem ser consultados em [Extensões de arquivos](/themes/construindo-seu-template/visao-geral/extensoes-de-arquivos.md).

### **sass**

Pasta opcional que contém todos os arquivos em **SASS&#x20;**<mark style="color:blue;">**¹**</mark> que são os arquivos de extensão **`.sass`** ou **`.scss`** caso o seu tema os utilize.

{% hint style="info" %} <mark style="color:blue;">**¹**</mark> O SASS é um pré-processador CSS com algumas funcionalidades que tornam a tarefa de escrever folhas de estilo mais fácil. E no tema deve vir sempre importado nas páginas HTML apenas o arquivo CSS que o SASS gera. Para saber mais sobre esse pré-processador acesse: [SASS](https://sass-lang.com/)
{% endhint %}

Caso desejado, pode ser utilizada a pasta SASS fora da estrutura do tema, ou seja, fora da pasta theme, e ao realizar o processamento o mesmo poderá ter somente o arquivo final de CSS dentro da pasta CSS. Por exemplo, na pasta CSS ter o arquivo final `theme.min.css`

## Elements <a href="#ir-para-elements" id="ir-para-elements"></a>

Pasta **obrigatória** que contém todos os arquivos que são `elements` utilizados pelo layout como: footer, header entre outros.

```
└── elements/
   ├─ snippets/
   |  ├─ showcase.html
   |  ├─ newsletter.html
   |  └─ product.html
   |    
   ├─ header.html
   └─ footer.html 
```

### **snippets**

Pasta **obrigatória** que contem todos os `snippets`, que são pequenos fragmentos de código que podem ser usados em um ou mais lugares de acordo com a necessidade.

## img <a href="#ir-para-img" id="ir-para-img"></a>

Pasta **obrigatória** que contém todas as imagens utilizadas no tema. Para referenciar o caminho de uma imagem que esteja nessa pasta, no código HTML pode-se usar o trecho de código a seguir:

`<img src="{{ themePath }}img/imagem.png" alt="texto alternativo">`

## js <a href="#ir-para-js" id="ir-para-js"></a>

Pasta **obrigatória** que contém os arquivos JavaScript utilizados no tema.

```
└── js/
   ├─ modules/
   |  ├─ showcase.js
   |  ├─ newsletter.js
   |  └─ product.js
   |    
   ├─ theme.js
   └─ theme.min.js 
```

#### **Modules**

Pasta opcional que contém componentes de códigos JavaScript do tipo módulo, se forem utilizados no tema.

## layouts <a href="#ir-para-layouts" id="ir-para-layouts"></a>

Contém os arquivos de layout da pagina, que geralmente são chamados em todas as páginas, e são os arquivos principais do tema já que são neles que estão todas as chamadas das outras páginas.

```html
└── layouts/
   ├─ ajax.html
   ├─ default.html
   └─ error.html 
```

### &#x20;Conteúdo

`ajax.html` <mark style="color:red;">**²**</mark> - necessário para exibição do conteúdo da loja, cujo html vem com um padrão que não pode ser modificado.

`default.html` <mark style="color:green;">**¹**</mark> - página padrão do site, onde são inseridas todas importações de elements de acordo com a pagina que estiver sendo acessada.

`error.html` <mark style="color:green;">**¹**</mark> - página de erro, exibida quando ocorrer alguma falha de carregamento.

## pages <a href="#ir-para-pages" id="ir-para-pages"></a>

Contém os arquivos de layout de paginas especificas, como por exemplo a `home`, `product` e a `search`.

```html
└── pages/
   ├─ catalog.html
   ├─ home.html
   ├─ search.html
   └─ product.html
```

### Conteúdo

`catalog.html` <mark style="color:green;">**¹**</mark> - página de categoria, geralmente possui informações da categoria, filtro de produtos e os produtos disponíveis nela.&#x20;

`home.html` <mark style="color:green;">**¹**</mark> - página inicial, onde são carregados os banners, vitrines, entre outros.

`search.html` <mark style="color:green;">**¹**</mark> - página de busca, que é exibida ao pesquisar por algum termo na barra de pesquisa da loja.

`product.html` <mark style="color:green;">**¹**</mark> - página de produto, exibida ao acessar algum produto da loja.

{% hint style="warning" %} <mark style="color:green;">**¹**</mark> Página <mark style="background-color:green;">**disponível**</mark> para edição seguindo padrão para correto funcionamento.\ <mark style="color:red;">**²**</mark> Página totalmente <mark style="background-color:red;">**indisponível**</mark> para edição.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/visao-geral/estrutura-do-tema.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.