> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/visao-geral/estrutura-do-tema.md).

# 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 %}