Desenvolvimento de temas Shopify: um guia prático para começar
Desenvolvimento de temas Shopify
Desenvolvimento de temas Shopify: CLI, pastas e noções de Liquid | We.Inc
Comece a criar um tema Shopify: comandos de tema da Shopify CLI, o que cada pasta do tema guarda, noções de Liquid e templates JSON, com comandos para copiar.
Instale a Shopify CLI, rode shopify theme init para clonar o tema inicial Skeleton e depois shopify theme dev --store your-store para ver a prévia em http://127.0.0.1:9292 com hot reload no Chrome. Edite Liquid, CSS e templates JSON localmente, rode shopify theme check para achar erros e shopify theme push para enviar.
Os comandos de tema da Shopify CLI que você mais vai usar
Comando
O que a Shopify diz que ele faz
shopify theme init
Clona um repositório Git para usar como ponto de partida na criação de um tema
shopify theme dev
Envia o tema como tema de desenvolvimento para você ver a prévia
shopify theme pull
Baixa os arquivos do tema da Shopify
shopify theme push
Envia os arquivos locais do seu tema para a Shopify
shopify theme check
Roda o Theme Check para analisar o código do tema em busca de erros
shopify theme share
Envia o seu tema como um tema novo, não publicado
shopify theme publish
Publica um tema não publicado da sua biblioteca
Desenvolver temas significa editar o design de uma loja como arquivos de verdade no seu computador, com o seu editor e controle de versão, em vez de fazer isso dentro do admin. Clique no explorador de pastas abaixo para aprender o que fica onde e depois copie os comandos para colocar uma prévia no ar.
Instale a Shopify CLI e faça login numa loja de desenvolvimento ou numa loja em que você tenha acesso de colaborador.
Rode shopify theme init para obter um tema inicial, ou shopify theme pull para baixar um existente.
Rode shopify theme dev e abra o endereço local no Chrome; edições de CSS e de seções recarregam quando você salva.
Rode shopify theme check e depois faça push ou share do tema quando ele estiver pronto para revisão.
Mantenha o tema no Git desde o primeiro commit. O histórico de arquivos do admin é limitado, o seu repositório não.
Trabalhe sobre um tema de desenvolvimento, nunca direto no tema publicado. Só faça push para o tema publicado de propósito.
Lembre dos limites dos templates: até 25 seções por template JSON e até 50 blocos por seção.
A Shopify marca o objeto Liquid theme como obsoleto, então não construa lógica com base no nome ou no ID de um tema.
Perguntas frequentes
O que é Liquid?
Liquid é a linguagem de templates da Shopify. Chaves duplas exibem um valor, como o título de um produto, e as tags de chave com porcentagem guardam lógica, como condicionais if e loops. Os filtros mudam a forma como um valor é exibido.
Preciso de um plano pago para desenvolver temas?
Os desenvolvedores normalmente trabalham numa loja de desenvolvimento criada a partir de uma conta Shopify Partner. Confira as condições atuais no painel de Partner, porque elas podem mudar.
O que é um template JSON?
Um arquivo de dados que lista as seções que uma página renderiza e as configurações delas. Ele precisa de um objeto sections com pelo menos uma seção e de um array order com os IDs das seções.
Por que a minha prévia só recarrega no Chrome?
O guia de primeiros passos da Shopify diz que a prévia com hot reload funciona apenas no Google Chrome. Em outros navegadores, atualize manualmente.
Devo começar pelo Dawn, pelo Horizon ou pelo Skeleton?
O comando init da CLI clona o Skeleton, uma base mínima para um tema feito do zero. Comece por um tema gratuito completo se você quer principalmente ajustar um design existente.
Como uma página é montada
Um arquivo de layout envolve todas as páginas com a estrutura comum, como a tag head e o cabeçalho. Depois, um template JSON escolhe quais seções preenchem a página, e cada seção é um arquivo Liquid que pode conter blocos e snippets.
Os donos de loja reorganizam essas seções no editor de temas. O seu trabalho como desenvolvedor é deixar as seções flexíveis com configurações, para que o dono nunca precise chamar você por uma mudança pequena.
Levar o trabalho entre o seu computador e a loja
Faça pull antes de começar se alguém editou o tema no admin, senão o seu push pode sobrescrever as mudanças dessa pessoa. O comando push sobrescreve a versão remota quando você aponta para um tema existente.
Use share para entregar uma prévia a um cliente: ele envia o tema como uma cópia nova e não publicada na biblioteca do cliente, que ele pode ver antes de qualquer coisa ir ao ar.
Comandos para colocar uma prévia no ar
Troque my-store pelo nome myshopify da sua loja. Rode os comandos a partir de uma pasta vazia.
Iniciar um tema e ver a prévia
O init clona o tema inicial Skeleton; o dev mostra um endereço local que recarrega as suas edições de CSS e de seções.
Verificar e enviar
Rode o check antes de cada envio. O share cria uma cópia nova não publicada, o que é mais seguro para a revisão do cliente.
Liquid num só snippet
Tags de saída exibem valores, tags de lógica decidem o que é renderizado e filtros transformam um valor.
Título e preço de um produto
A tag if esconde a linha do preço comparativo quando não há promoção; o filtro money formata o preço na moeda da loja.
Explorador de pastas do tema
Cada pasta de um tema padrão e o que ela guarda. Escolha uma para destacá-la.
Imagens, arquivos CSS e JavaScript que o tema usa.
Blocos de tema, o tipo mais novo de bloco em torno do qual temas como o Horizon são construídos.
Arquivos de configuração do tema, incluindo o settings_schema.json.
Arquivos de tradução, para que os textos do próprio tema possam aparecer em outros idiomas.
As seções e os grupos de seções do tema.
Pequenos trechos reutilizáveis de código Liquid.
Templates das páginas antigas de conta de cliente.