Depois de criado o tema ele tem a estrutura a baixo:
config/
css/
elements/
img/
js/
layouts/
pages/Configs
Contém os arquivos responsáveis por tornar o tema customizável, é através do arquivo settings.json que são setadas as variáveis de customização, possibilitando assim a alteração do estilo do tema de forma dinâmica.
configs/
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
Contém os arquivos de estilização do tema, como fontes de texto e folhas de estilos.
bootstrap
Contém a estrutura básica do tema.
fonts
Contém as fontes utilizadas no tema, todas as fontes aqui armazenadas são carregadas automaticamente.
sass
Contém todos os arquivos em SASS 1 que são os arquivos .scss
css/
bootstrap/
bootstrap.min.css
config.json
fontes/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
sass/
address.scss
banners.scss
base.scss
footer.scss
header.scss
theme.min.scss
1 O SASS é um pré-processador. A ideia de usar o SASS é justamente estender o CSS com algumas funcionalidades que tornem a tarefa de escrever folhas de estilo mais fácil. A parte mais importante do SASS é que ele não existe como um substituto do CSS. Dessa forma, você nunca vai incluir um arquivo de código SASS em suas páginas. A ideia do SASS é outra: ele te fornece uma sintaxe na qual você escreve suas folhas de estilo com as funcionalidades adicionais. Após isso, um pré-processador faz o trabalho de "traduzir" tudo isso para CSS convencional que finalmente pode ser incluído nas suas páginas HTML. para saber mais acesse o link a seguir: SASS
Elements
Contém todos as elements utilizados pelo layout como: footer, header entre outros.
Snippets
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.
elements/
snippets/
showcase.html
newsletter.html
product.html
header.html
footer.html img
Contém todas as imagens utilizadas no tema, para referenciar uma imagem que esteja nessa pasta pode-se usar o trecho de código a seguir:
<img src="{ { themePath } }img/imagem.png" alt="texto alternativo">
js
Contém os arquivos javascript utilizados no tema.
Modules
Contém componentes em java scripts utilizados no tema
js/
modules/
theme.js
theme.min.js Layouts
Contém os arquivos de layout de layout da pagina, esses arquivos 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.
layout/
ajax.html
default.html
error.html
Pages
Contém os arquivos de layout de paginas especificas, como por exemplo a home,product e a search
pages/
catalog.html -> página de categoria
home.html -> página inicial
map.html -> mapa do site
search.html -> página de busca
product.html -> página de produto
Comentários