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 ¹ - arquivo com campos que aparecerão na tela de customização do tema.

settings.json ¹ - arquivo com as variáveis que serão utilizadas na customização do tema.

css

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.

sass

Pasta opcional que contém todos os arquivos em SASS ¹ que são os arquivos de extensão .sass ou .scss caso o seu tema os utilize.

¹ 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

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

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

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

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

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.

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

Conteúdo

ajax.html ² - 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 ¹ - 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 ¹ - página de erro, exibida quando ocorrer alguma falha de carregamento.

pages

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

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

Conteúdo

catalog.html ¹ - página de categoria, geralmente possui informações da categoria, filtro de produtos e os produtos disponíveis nela.

home.html ¹ - página inicial, onde são carregados os banners, vitrines, entre outros.

search.html ¹ - página de busca, que é exibida ao pesquisar por algum termo na barra de pesquisa da loja.

product.html ¹ - página de produto, exibida ao acessar algum produto da loja.

¹ Página disponível para edição seguindo padrão para correto funcionamento. ² Página totalmente indisponível para edição.