Estrutura do Tema

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