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:
InstalaçãoPasso 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
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:
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.
Na pasta do tema abra o terminal e use o comando
tray downloadpara baixar todos os arquivos do tema da plataforma para o seu computador, da seguinte forma:
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:
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:
Last updated
