Meu primeiro tema

Você está pronto para criar um novo tema e está se perguntando como configurar rapidamente seu ambiente de desenvolvimento e começar a codificar? Neste tutorial, te mostrarei o que você precisa!

O que você vai aprender

Depois de terminar este tutorial, você conseguirá realizar o seguinte:

  • Configurar seu ambiente de desenvolvimento local

  • Criar um novo tema sincronizado entre o seu ambiente de desenvolvimento e a plataforma.

  • Personalizar o seu tema com o Tray CLI em execução no terminal

Antes de começar

Antes de começar a desenvolver temas, faça o seguinte:

  • Para obter uma loja de desenvolvimento e criar um tema, você precisará se tornar um Parceiro Tray, começando pelo preenchimento do formulário no site: Quero ser Parceiro

  • Com o cadastro aprovado crie sua loja na plataforma.

  • Depois entre em contato com o suporte a parceiros para que eles desabilitem o faturamento da loja e ela não seja bloqueada por falta de pagamento.

Atenção: Essa loja não poderá receber pedidos reais. Caso isso aconteça, ela será desabilitada.

Passo 1: Instale o Tray CLI

Para desenvolver nossos temas e fazer a conexão da nossa plataforma com seu ambiente de desenvolvimento você precisará utilizar nossa interface de linha de comando disponibilizada.

O nome dessa interface é o Tray CLI, para saber mais sobre como instala-la e utilizá-la acesse o link abaixo:

Passo 2: Gere as chaves

1. Faça o login no painel administrativo pela URL da sua loja.

2. Acesse a aba Minha Loja > Design Da Loja ou Minha Loja > Aparência da Loja (de acordo com o painel da sua loja)

3. Acesse a Lista de desenvolvedores

4. Clique em Incluir Desenvolvedor

5. Insira um Nome da agencia e E-mail, depois clique em Salvar que a chave de acesso será gerada automaticamente.

6. Copie o código exibido para Key e Password elas são importantes para sincronizar o seu ambiente de desenvolvimento com a plataforma. Salve elas em um arquivo de fácil acesso que a utilizaremos nos próximos passos.

Passo 3: Crie um novo tema

  1. No seu computador de desenvolvimento crie uma nova pasta para o tema que será desenvolvido.

2. Na pasta abra o terminal para utilizar o Tray CLI

Recomendamos o uso do Visual Studio Code com o terminal Bash instalado, devido a facilidade de manuseio do mesmo para o desenvolvimento.

3. Digite o comando para criar um novo tema baseado do tema padrão da Tray com as chaves de acesso geradas e o Nome do tema que preferir da seguinte forma:

tray create [options] [key] [password] [theme-name] [theme-base]

Para mais informações sobre o uso do comando acesse o link: download.

Quando o comando for concluído, na pasta do seu computador será gerado um arquivo config.yml com as informações necessárias para sincronizar seu ambiente, e na plataforma um novo tema será exibido com o nome que foi definido por você no comando.

O arquivo config.yml só existirá no seu computador, para que ele faça a conexão do seu ambiente de desenvolvimento com a plataforma. Não modifique este arquivo para não prejudicar o funcionamento do Tray CLI. Saiba mais no link: Arquivo de configuração.

Passo 4: Personalize o layout do tema

Com a pasta no seu computador configurado, você precisará baixar o tema Padrão criado na plataforma para começar a editá-lo.

  1. Na pasta do tema abra o terminal e use o comando tray download para baixar todos os arquivos do tema da plataforma para o seu computador, da seguinte forma:

tray download

Para mais informações sobre o uso do comando acesse o link: download.

Após conclusão do download siga para os próximos passos.

2. Para começar a personalizar o tema e as alterações serem enviadas automaticamente para a plataforma, no terminal utilize o comando tray watch, da seguinte forma:

tray watch

Para parar a execução do comando no terminal utilize as teclas CTRL + C.

Atenção

Arquivos SASS / SCSS não são mais suportados.

3. Para visualizar as modificações aplicadas na loja utilize o comando tray open, da seguinte forma:

tray open

Last updated