Fernando Moura

Fernando Moura

Configurando o ambiente de desenvolvimento de temas shopify

Como trabalhar com temas Shopify em minha maquina localmente?

Para ter acesso a loja de clientes você precisa criar uma conta no Partners da Shopify.

O Partners é uma plataforma para desenvolvedores ou agencias parceiros da Shopify! Onde você pode obter chaves de API para desenvolvimento de Apps, criar lojas para clientes ou solicitar o acesso a lojas de clientes.

Para trabalhar com temas em seu computador você precisa baixar o software Themekit criado pela shopify para esse proposito ele está disponivel para download com Chocolately.

O Chocolately é um gerenciador de pacotes para windows parecido com o homebrew do macOs ou APT/ pacman / RPM do Linux e tem o proposito facilitar a instalação de softwares via linha de comando bem como manter esses softwares atualizados.

Após instalar o Chocolately voce pode instalar o themekit digitando na linha de comando .

choco install themekit

Adicionando uma loja

No painel de parceiros da shopify você vai na aba lojas na sidebar esquerda clica no botão adicionar loja no lado direito conforme a imagem abaixo.

Adicionar loja shopify

Em seguida clique em loja gerenciada e em endereço da loja virtual coloque a url myshopify da loja que o cliente (dono da loja) deve te fornecer.

Adicionando loja shopify

Instalando o Theme Kit Access

Para obter a chave de API do tema instale o Theme Kit Access na loja.

Clique em instalar o app e deve abrir uma tela de login da sua conta partner Instalando theme kit access

Basta clicar na sua conta em seguida abrirá uma tela de login Oauth para instalar o app na loja

Adicionando loja shopify

Agora clique em Criar Senha do Theme Kit Digite seu nome e seu email a senha irá para o seu email Clique em criar senha

Vá para caixa de entrada de seu email Você deve ter recebido um email com o titulo url-da-loja.myshopify.com gerou uma senha do Theme Kit para você Entre neste email clique em acessar a senha do Theme kit Vai abrir uma pagina do app com a senha clique em exibir senha e copie essa senha

Duplicando o tema

Antes de baixarmos o tema para nossa maquina você deve procurar o id do tema que vai trabalhar. Uma boa pratica é fazer uma cópia do tema e trabalhar sempre no tema secundario para não quebrar nada no site em produção. Para criar uma copia basta ir em Loja virtual / Temas / Ações / Duplicar Online Store

Feito isso será criado o tema Online Store

Agora precisamos anotar o Id do tema que vamos trabalhar existem diversas formas de fazer isso a mais simples é abrir o editor de codigo online ou o personalizar da loja e pegar o id na url como abaixo Theme Id O caminho para o personalizar é Loja online / Temas / botão personalizar (no tema desejado) ou botão ações editor de código

Baixando o tema

Agora que você ja possui a chave da api abra um terminal na pasta onde você quer baixar o tema da loja

Digite o seguinte comando

theme get -s [url-da-loja].myshopify.com -p shptka_0fa2ecb48d3f4393c60b15b22e274be1 -t 1233333

A flag -s recebe a loja(store), a flag -p recebe a senha(password) e a -t recebe o ID do tema.

Erros comuns que acontecem é ter a barra no final do dominio da loja myshopify.com/

Um outro erro é o de colocar o https:// (Quando vc usa o themekit com a chave de app privada que é um metodo antigo de fazer isso o https na frente funciona)

Trabalhando com o tema

Para abrir o VSCode na pasta onde baixou o themekit você pode no terminal digitar:

code .

Ou pode utilizar o editor que estiver acostumado.

O themekit agora carregou na sua pasta todo o tema e criou um arquivo chamado config.yml nesse arquivo estão as credenciais da loja e id do tema, sendo assim não necessário digitar essas informações, basta utilizar os comandos theme get para obter o tema da loja e theme deploy para subir o tema. Voce pode utilizar o comando theme watch para que toda vez que voce salve uma alteração o themekit suba o arquivo automaticamente para a loja esse é um metodo bem eficiente de trabalhar

Se estiver utilizando o tema de produção é necessario utilizar a flag

--allow-live

Para subir alterações na loja tome muito cuidado com lojas em produção

Se for trabalhar com versionamento de codigo é interessante adicionar o arquivo config.yml ao gitignore pois qualquer um com esse arquivo pode alterar e apagar os temas da loja para mais informações a respeito do themekit veja a documentação