Olá, futuros mestres do Shopify! 🚀 Sou o seu professor e estou super animado para a aula de hoje, a de número 76 da nossa jornada. Chegamos a um ponto crucial onde vamos transformar a maneira como você interage e desenvolve temas para o Shopify. Diga adeus ao editor de código online para grandes projetos e dê as boas-vindas a um workflow de desenvolvimento moderno e eficiente!

Até agora, construímos muito do nosso conhecimento através do painel administrativo e de algumas ferramentas básicas. Mas, para um desenvolvedor sério de temas Shopify, é essencial ter um ambiente de desenvolvimento local robusto. E é exatamente isso que o Shopify CLI nos oferece.

Pronto para levar suas habilidades de desenvolvimento no Shopify para o próximo nível? Vamos lá!

Aula 76 – Loja Shopify do Zero ao Avançado: Shopify CLI e ferramentas de desenvolvimento

📚 O que você vai aprender nesta aula

Nesta aula, você irá dominar as ferramentas que todo desenvolvedor profissional de temas Shopify utiliza. Ao final, você será capaz de:

• Entender a importância e os benefícios do Shopify CLI para o desenvolvimento de temas.
• Instalar e configurar o Shopify CLI em sua máquina local.
• Autenticar sua conta Shopify no terminal.
• Criar um novo tema Shopify usando o CLI (baseado no tema Dawn).
• Baixar um tema existente da sua loja para desenvolvimento local.
• Desenvolver temas localmente com recarregamento automático (hot-reloading).
• Fazer upload de suas alterações para a loja Shopify.
• Utilizar o Shopify Theme Check para garantir a qualidade e boas práticas do seu código.
• Compreender o fluxo de trabalho completo de desenvolvimento de temas com o Shopify CLI e controle de versão (Git).
• Conhecer outras ferramentas essenciais para um ambiente de desenvolvimento Shopify avançado.

🔗 Conectando com aulas anteriores

Até agora, trabalhamos extensivamente com o editor de temas online do Shopify, criando seções, blocos, snippets e templates diretamente no painel administrativo. Aprendemos a estrutura de arquivos de um tema e como o Liquid funciona.

No entanto, para projetos maiores, colaboração em equipe, ou simplesmente para ter um controle de versão adequado (que revisamos na Aula 74 sobre Git!), o editor online pode ser limitante. As aulas anteriores nos deram uma base sólida em HTML, CSS, JavaScript e Liquid, e agora, com o Shopify CLI, vamos aplicar esses conhecimentos em um ambiente de desenvolvimento muito mais profissional e produtivo. Pense nisso como sair da “caixa de areia” e entrar no estúdio de desenvolvimento! 🛠️

📖 Conteúdo Principal

1. Por que Shopify CLI? A Evolução do Desenvolvimento de Temas

O Shopify CLI (Command Line Interface) é uma ferramenta poderosa que permite que desenvolvedores interajam com a plataforma Shopify diretamente do terminal do seu computador. Ele foi projetado para modernizar o fluxo de trabalho de desenvolvimento de temas e aplicativos Shopify.

Benefícios chave:

• Desenvolvimento Local: Trabalhe com seus arquivos de tema na sua máquina, usando seu editor de código favorito (VS Code, Sublime Text, etc.).
• Velocidade e Eficiência: O shopify theme serve oferece recarregamento automático (hot-reloading) no navegador, permitindo ver as mudanças em tempo real sem uploads manuais.

Controle de Versão (Git): Integra-se perfeitamente com Git, permitindo que você controle cada alteração, colabore com outros desenvolvedores e reverta para versões anteriores. Isso é essencial* para um desenvolvimento sério!

• Qualidade de Código: O shopify theme check ajuda a identificar problemas de performance, segurança e aderência a boas práticas no seu código Liquid e outros arquivos do tema.
• Automatização: Automatiza tarefas repetitivas, como download e upload de temas.
• Gerenciamento de Múltiplas Lojas/Temas: Facilita o trabalho em diferentes projetos Shopify.

2. Pré-requisitos e Instalação do Shopify CLI

Antes de instalar o Shopify CLI, certifique-se de ter os seguintes pré-requisitos:

• Node.js e npm (ou Yarn): O Shopify CLI é construído com Node.js. Certifique-se de ter uma versão LTS (Long Term Support) instalada. Você pode verificar executando node -v e npm -v no seu terminal.
• Git: Essencial para controle de versão. Verifique com git --version.

Instalação

A instalação é simples e geralmente feita via npm ou Homebrew (para macOS).

Para macOS (via Homebrew – recomendado):

bash

brew tap shopify/shopify
brew install shopify-cli

Dica: Se você já tem o Homebrew, é a forma mais fácil de manter o CLI atualizado.

Para Windows, Linux ou macOS (via npm):

bash

npm install -g @shopify/cli@latest

Dica: Usar -g instala o CLI globalmente, tornando-o disponível em qualquer diretório.

Verificação da Instalação:

Após a instalação, verifique se está tudo ok executando:

bash

shopify version

Você deve ver a versão instalada do Shopify CLI. Se encontrar problemas, consulte a documentação oficial ou a seção de resolução de problemas.

3. Autenticando com sua Loja Shopify

Para que o CLI possa interagir com sua loja, você precisa se autenticar.

bash

shopify login --store SEU_DOMINIO.myshopify.com

Substitua SEU_DOMINIO.myshopify.com pelo domínio da sua loja. Isso abrirá uma janela do navegador, solicitando que você faça login na sua conta Shopify. Após o login, o terminal confirmará que você está autenticado. ✅

4. Iniciando um Novo Projeto de Tema (Dawn)

O Shopify CLI permite iniciar um novo tema do zero, baseado no tema Dawn, que é o tema padrão e de código aberto da Shopify.

bash

shopify theme init NOME_DO_MEU_TEMA

Substitua NOME_DO_MEU_TEMA pelo nome desejado para o seu projeto. O CLI irá baixar a versão mais recente do Dawn para uma nova pasta com esse nome.

Exemplo:

bash

shopify theme init meu-super-tema-personalizado

Isso criará uma pasta meu-super-tema-personalizado contendo todos os arquivos do tema Dawn.

5. Baixando um Tema Existente para Desenvolvimento Local

Se você já tem um tema na sua loja (online ou em desenvolvimento) e quer editá-lo localmente, você pode “puxar” os arquivos:

1. Navegue até o diretório onde deseja armazenar o tema:

bash

cd ~/ProjetosShopify/

2. Puxe o tema:

bash

shopify theme pull --store SEU_DOMINIO.myshopify.com --theme-id ID_DO_TEMA

• Como encontrar o ID do tema? Vá em Loja Virtual > Temas no seu painel admin. Clique nos três pontos ao lado do tema desejado e selecione Editar código. O ID do tema estará na URL do navegador, após /themes/. Por exemplo, https://SEU_DOMINIO.myshopify.com/admin/themes/12345678901. O ID seria 12345678901.

Alternativa: Se o tema for o tema publicado, você pode omitir --theme-id. Se for um tema não publicado, mas for o único* tema em desenvolvimento que você tem, o CLI pode te perguntar qual tema você quer puxar.

• Recomendação: Use sempre o --theme-id para evitar ambiguidades.

6. Desenvolvimento Local com shopify theme serve

Esta é a estrela do show! O comando shopify theme serve inicia um servidor de desenvolvimento local que sincroniza suas alterações em tempo real com sua loja Shopify e fornece URLs de pré-visualização.

1. Navegue até o diretório do seu tema:

bash

cd meu-super-tema-personalizado

2. Inicie o servidor de desenvolvimento:

bash

shopify theme serve

Ao executar este comando:

• O CLI fará um upload inicial do seu tema para sua loja como um “tema de desenvolvimento” oculto.
• Ele fornecerá um URL de pré-visualização (algo como https://SEU_DOMINIO.myshopify.com/?preview_theme_id=12345678901).
• Ele também fornecerá um URL para o editor de temas (como https://SEU_DOMINIO.myshopify.com/admin/themes/12345678901/editor).
• Qualquer alteração que você salvar nos arquivos locais do seu tema será automaticamente enviada para a Shopify e recarregará a página de pré-visualização no seu navegador, instantaneamente! ⚡

Exemplo Prático (Desenvolvimento Local):

1. Crie um novo tema:

bash

shopify theme init meu-tema-cli
cd meu-tema-cli

2. Inicie o servidor:

bash

shopify theme serve

(Abra a URL de pré-visualização no seu navegador)

3. Abra o tema no seu editor de código (VS Code):

code . (se você tiver o VS Code instalado e configurado para abrir via terminal)

4. Encontre o arquivo sections/header.liquid.

5. Adicione um parágrafo simples abaixo do cabeçalho:

{% comment %} sections/header.liquid {% endcomment %}




👋 Esta é uma mensagem da Aula 76 do Shopify CLI!

Salve o arquivo. Observe seu terminal e o navegador. Você verá a mensagem “Local changes uploaded successfully” no terminal e a pré-visualização no navegador será atualizada com o seu parágrafo! Mágico, não é? ✨

7. Fazendo Upload de Alterações (push/deploy)

Quando você termina de desenvolver uma funcionalidade ou correção localmente e quer subir para um tema específico na sua loja (não apenas para o tema de desenvolvimento temporário do serve), você usa push ou deploy.

shopify theme push: Envia as alterações do seu tema local para um tema existente* na sua loja (seja ele publicado, não publicado ou um tema de desenvolvimento).

bash

shopify theme push --store SEU_DOMINIO.myshopify.com --theme-id ID_DO_TEMA

Ou, para o tema atualmente publicado:

bash

shopify theme push --store SEU_DOMINIO.myshopify.com --live

CUIDADO: Nunca dê push --live diretamente em um ambiente de produção sem um controle de qualidade rigoroso! Use --allow-live para realmente forçar o upload para um tema publicado.

shopify theme deploy: Cria um novo* tema na sua loja (como um tema não publicado) a partir do seu diretório local. É útil para criar um “staging environment” ou uma nova versão para testes.

bash

shopify theme deploy --store SEU_DOMINIO.myshopify.com --theme-name "Meu Tema v2.0 Staging"

Este comando é ótimo para criar um tema de teste na loja sem sobrescrever um existente.

8. shopify theme check: Garantindo a Qualidade do Código

O shopify theme check é uma ferramenta de linting e validação que verifica seu código Liquid, JSON, CSS e JavaScript para garantir boas práticas, performance e conformidade com os padrões da Shopify. É como um “revisor” de código especializado em temas Shopify.

1. Navegue até o diretório do seu tema:

bash

cd meu-tema-cli

2. Execute o Theme Check:

bash

shopify theme check

Ele listará avisos e erros, como:

• Uso de classes CSS desnecessárias.
• Lógica Liquid ineficiente.
• Arquivos muito grandes.
• Problemas de acessibilidade.

Exemplo de Saída do theme check:

Checking theme 'meu-tema-cli'...
theme/sections/featured-collection.liquid
L56: Avoid using inline styles. [StyleTag]
theme/snippets/product-card.liquid
L10: Use the url filter for URLs. [UrlFilter]
theme/assets/theme.css
L200: Stylesheet is too large. Consider breaking it into smaller files. [Size]

Isso te dá direções claras para otimizar seu tema e garantir que ele funcione bem!

9. Publicando um Tema

Depois de desenvolver, testar e garantir a qualidade do seu tema, você pode publicá-lo:

bash

shopify theme publish --store SEU_DOMINIO.myshopify.com --theme-id ID_DO_TEMA

Isso tornará o tema especificado o tema “ao vivo” da sua loja. Você também pode fazer isso diretamente no painel admin do Shopify.

10. Fluxo de Trabalho com Shopify CLI e Git

Um fluxo de trabalho profissional de desenvolvimento de temas com Shopify CLI deve sempre incluir Git.

1. Início: Use shopify theme init para um novo tema ou shopify theme pull para um existente.

2. Inicialize o Git:

bash

git init
git add .
git commit -m "Initial commit - Shopify CLI theme"

3. Desenvolvimento Local:

• Crie uma nova branch para cada feature ou bugfix: git checkout -b feature/minha-nova-secao
• Edite os arquivos localmente no VS Code.
• Use shopify theme serve para pré-visualizar em tempo real.
• Periodicamente, faça commits locais: git add . && git commit -m "Adiciona secao de depoimentos"
• Execute shopify theme check antes de finalizar.

4. Subir para Staging/QA:

• Quando a feature estiver pronta, envie-a para uma branch remota: git push origin feature/minha-nova-secao
• Crie um “Pull Request” (PR) no GitHub/GitLab.
• Deploye o tema para um slot de desenvolvimento na Shopify para testes (pode ser um tema novo com shopify theme deploy ou um tema de desenvolvimento existente com shopify theme push --theme-id ID_DO_TEMA_DE_TESTE).

5. Merge para Master/Main:

• Após aprovação do PR e testes, faça o merge da sua branch para main.

6. Deploy para Produção (com cautela!):

• Puxe as últimas alterações da branch main para sua máquina.
• Faça o deploy para um novo tema na loja (shopify theme deploy) para ter uma cópia para “aquecer” e verificar.
• Ou, se tiver certeza, use shopify theme push --theme-id ID_DO_TEMA_AO_VIVO --allow-live (use com EXTREMA CAUTELA!).
• Publicar o tema via CLI ou painel admin.

11. Outras Ferramentas Essenciais de Desenvolvimento

• Visual Studio Code (VS Code): O editor de código mais popular, com extensões excelentes para Liquid, HTML, CSS, JS.
• Extensões Recomendadas: “Liquid” por Shopify, “Shopify Liquid Snippets”, “Prettier – Code formatter”, “ESLint”.
• Git e GitHub/GitLab/Bitbucket: Essencial para controle de versão, colaboração e backup.
• Browser Developer Tools: As ferramentas de inspeção do navegador (Chrome DevTools, Firefox Developer Tools) continuam sendo cruciais para depuração de CSS/JS e análise de performance.

💻 Exemplos Práticos

Vamos praticar o fluxo completo de um pequeno ajuste em um tema existente.

Cenário: Adicionar um texto de aviso importante abaixo do menu principal em uma loja Shopify.

Passo 1: Autenticar e Baixar o Tema

Assumindo que você já instalou o Shopify CLI e tem uma loja de desenvolvimento.

bash

1. Faça login na sua loja (se ainda não o fez)
shopify login --store sua-loja-exemplo.myshopify.com
2. Crie uma pasta para seus projetos (se ainda não tiver)
mkdir -p ~/ProjetosShopify
cd ~/ProjetosShopify
3. Baixe o tema publicado da sua loja para uma nova pasta local
 (Substitua sua-loja-exemplo.myshopify.com e, se tiver um ID específico, use-o)
 Se não especificar --theme-id, o CLI tentará baixar o tema publicado.
shopify theme pull --store sua-loja-exemplo.myshopify.com --theme-name "meu-tema-cli-aula76"

Você agora terá uma pasta meu-tema-cli-aula76 com o conteúdo do seu tema.

Passo 2: Configurar o Git

bash

cd meu-tema-cli-aula76
git init
git add .
git commit -m "Primeiro commit: tema baixado da loja"
git checkout -b feature/aviso-importante-header

Agora estamos em uma nova branch para nossa funcionalidade!

Passo 3: Desenvolver Localmente com shopify theme serve

bash

shopify theme serve

O CLI subirá o tema para uma versão de desenvolvimento e te dará um URL de pré-visualização. Abra-o no seu navegador.

Passo 4: Implementar a Mudança

Abra a pasta meu-tema-cli-aula76 no seu VS Code.

1. Navegue até sections/header.liquid. Este é um local comum para adicionar elementos globais no cabeçalho.

2. Adicione o seguinte código Liquid/HTML/CSS logo após a tag de fechamento

{% comment %} sections/header.liquid (exemplo de adição) {% endcomment %}

{# Conteúdo existente do cabeçalho aqui #}
{% render 'header-component' %} {# Exemplo de include ou render #}

{% comment %} Novo aviso importante {% endcomment %}

⚠️ Aviso: Entregas podem sofrer atrasos devido a feriados locais.

{# Restante do arquivo header.liquid #}

bash

shopify theme check

bash

git add sections/header.liquid
git commit -m "Adiciona aviso importante no header do site"

bash

shopify theme deploy --store sua-loja-exemplo.myshopify.com --theme-name "Tema Aula 76 - Aviso Header"

bash

git checkout main # Ou master
git merge feature/aviso-importante-header
git push origin main # Envia as alterações para o repositório remoto

bash

Primeiro, descubra o ID do tema que você acabou de criar/atualizar no painel admin
ou use --live se quiser sobrescrever o tema publicado (com --allow-live)
shopify theme publish --store sua-loja-exemplo.myshopify.com --theme-id SEU_NOVO_ID_DO_TEMA_DE_PRODUCAO

Olá, {{ customer.first_name | default: 'Visitante' }}!
Seja bem-vindo(a) à nossa loja incrível!