Olá, turma! 👋 Professor aqui novamente, animado para mais uma aula do nosso curso “Loja Shopify do Zero ao Avançado”!

Nas aulas anteriores, construímos as bases da nossa loja: configuramos produtos, coleções, navegação e até instalamos nosso primeiro tema. Agora, é hora de dar vida a essa estrutura, transformando um tema padrão em uma experiência de marca única e irresistível!

Esta é a nossa AULA 21, e vamos mergulhar de cabeça no coração da personalização visual do Shopify: o Editor de Temas. Preparem-se para desvendar os segredos de seções, blocos, configurações e como usar o poder do Liquid e CSS diretamente no editor para criar uma loja que realmente se destaca.

—

Aula 21 – Loja Shopify do Zero ao Avançado: Dominando o editor de temas e customizações visuais

📚 O que você vai aprender nesta aula

Nesta aula, você se tornará um mestre na arte de personalizar seu tema Shopify através do editor. Especificamente, vamos cobrir:

• Navegar e entender a interface do Editor de Temas do Shopify.
• Compreender o conceito de Seções e Blocos como os principais componentes visuais de um tema.
• Explorar as configurações de Tema para controlar aspectos globais de design.
• Personalizar conteúdo, layout e estilo de diversas seções e blocos da sua loja.
• Aplicar CSS customizado diretamente pelo editor para ajustes finos.
• Utilizar o bloco “Liquid customizado” para injetar HTML, Liquid e CSS em pontos específicos, elevando suas customizações.
• Boas práticas e dicas de otimização ao trabalhar com o editor de temas.

🔗 Conectando com aulas anteriores

Até agora, aprendemos a configurar nosso ambiente Shopify, criar produtos e coleções, organizar a navegação e, na Aula 20, instalamos um tema (espero que tenham escolhido um tema bacana da Shopify Store ou um gratuito, como o Dawn!). Agora, com esse tema base instalado, o próximo passo lógico e crucial é personalizá-lo.

Lembram-se de quando falamos sobre a importância da identidade visual e da experiência do usuário? Tudo isso começa no editor de temas. Suas habilidades básicas em HTML e CSS, que cobrimos nas aulas introdutórias, serão extremamente úteis aqui. Embora o editor seja “arrasta e solta”, saber o que acontece por trás dos panos lhe dará uma vantagem imensa na hora de ajustar detalhes ou até mesmo inserir códigos customizados.

Vamos pegar essa base sólida que construímos e dar a ela uma cara única! 🎨

📖 Conteúdo Principal

O Editor de Temas do Shopify é uma ferramenta poderosa que permite personalizar a aparência e o conteúdo da sua loja sem precisar tocar diretamente no código-fonte (na maioria das vezes!). Ele é a ponte entre o seu tema bruto e a loja dos seus sonhos.

1. Introdução ao Editor de Temas

Para acessar o editor, siga estes passos:

1. No seu admin Shopify, vá para “Online Store” (Loja Virtual).

2. Clique em “Themes” (Temas).

3. Ao lado do seu tema ativo, clique no botão “Customize” (Personalizar).

Captura de Tela (Descrição):

Você verá a interface do editor de temas. À esquerda, uma barra lateral com as opções de personalização. No centro, uma prévia ao vivo da sua loja. No canto superior, um seletor para navegar entre as páginas da sua loja e um seletor para visualizar em diferentes dispositivos (desktop, tablet, mobile).

A interface é dividida em três áreas principais:

• Barra Lateral de Seções e Configurações: É onde você gerencia as seções da página atual, adiciona novos blocos, e acessa as configurações globais do tema.
• Painel de Pré-visualização: Mostra em tempo real como as suas alterações afetam a loja.
• Menu Superior: Permite alternar entre diferentes modelos de página (Home page, Product pages, Collection pages, etc.), visualizar em diferentes tamanhos de tela e salvar/sair.

2. Entendendo Seções (Sections)

As seções são os blocos de construção de qualquer página do seu tema Shopify. Pense nelas como grandes contêineres que organizam o conteúdo da sua página.

• Exemplos: “Header” (cabeçalho), “Image banner” (banner de imagem), “Featured collection” (coleção em destaque), “Blog posts” (posts do blog), “Footer” (rodapé).
• Características:
• Podem ser reordenadas arrastando e soltando na barra lateral.
• Podem ser adicionadas (existem seções pré-definidas no seu tema, como “Texto com Imagem”, “Multi-column”, “Newsletter Signup”).
• Podem ser removidas ou ocultadas.
• Cada seção tem suas próprias configurações, que controlam seu conteúdo (texto, imagens, links) e sua aparência (layout, espaçamento, cores).
• Seções Globais vs. Seções Locais:
• Algumas seções, como Header e Footer, são consideradas globais porque aparecem em todas as páginas da loja (ou quase todas).
• Outras seções são específicas da página que você está editando no momento (por exemplo, na página inicial você tem um “Image banner”, na página de produto você tem a seção de “Product information”).

3. Entendendo Blocos (Blocks)

Os blocos são componentes menores que residem dentro das seções. Eles permitem uma granularidade maior na personalização.

• Exemplos:
• Dentro de uma seção “Image banner”, você pode ter blocos para “Heading” (título), “Button” (botão), “Image”.
• Dentro de uma seção “Rich text” (texto rico), você pode ter blocos para “Heading”, “Text”, “Button”.
• Características:
• Os blocos também podem ser reordenados dentro de sua seção pai.
• Cada bloco tem suas próprias configurações, como o texto de um título, o link de um botão, ou a imagem de um bloco de imagem.
• Você pode adicionar novos blocos (se o tema permitir na seção específica) e remover os existentes.

4. Configurações de Tema (Theme Settings)

No canto inferior esquerdo da barra lateral do editor, você encontrará a opção “Theme settings” (Configurações do tema). Estas são as configurações globais que afetam a aparência de toda a sua loja.

• Cores: Defina a paleta de cores primárias, secundárias, texto, fundo, etc.
• Tipografia: Escolha as fontes para títulos e corpo do texto, e seus tamanhos padrão.
• Layout: Ajuste a largura do conteúdo, espaçamento global, etc.
• Social media: Adicione links para suas redes sociais.
• Favicon: Faça upload do ícone que aparece na aba do navegador.
• Checkout: Personalize a aparência da página de checkout (limitado em temas padrão).
• Custom CSS (CSS Customizado): Um campo de texto onde você pode escrever seu próprio CSS para sobrescrever estilos existentes ou adicionar novos. (Veremos isso em detalhes nos exemplos!)

Dica de Professor: Sempre comece a personalizar pelas “Theme settings”. Alterar uma cor ou fonte aqui pode ter um impacto enorme e global, economizando tempo em vez de ajustar individualmente cada seção.

5. Customizações Avançadas com Liquid e HTML/CSS via Editor

Embora o editor seja predominantemente visual, ele oferece algumas portas para quem tem conhecimento em código:

• Bloco “Custom Liquid” (Liquid Customizado):
• Esta é uma das ferramentas mais poderosas para desenvolvedores no editor.
• Permite que você escreva código Liquid, HTML e CSS diretamente em um bloco, que será renderizado na sua loja.
• É ideal para adicionar banners complexos, estruturas HTML que não são oferecidas por blocos padrão, ou até mesmo lógica condicional com Liquid.
• Limitação: Não é o lugar ideal para código JavaScript complexo, pois o editor não o processa dinamicamente e pode causar problemas de carregamento se for muito extenso. Para JS, geralmente é melhor editar os arquivos do tema diretamente.

• Campo “Custom CSS” nas Configurações do Tema:
• Vimos anteriormente, mas vale reforçar.
• É o lugar perfeito para pequenos ajustes de estilo que não são cobertos pelas configurações de seções/blocos ou configurações globais do tema.
• Você pode usar seletores CSS para mirar elementos específicos e mudar suas cores, fontes, tamanhos, margens, etc.

• Blocos “Rich Text” (Texto Rico) ou “Custom HTML” (HTML Customizado):
• Algumas seções oferecem um bloco Rich text que permite inserir HTML básico.
• Alguns temas podem oferecer um bloco Custom HTML que, assim como o Custom Liquid, permite inserir HTML bruto, mas sem a capacidade de processar Liquid. Verifique a documentação do seu tema para ver quais blocos ele oferece.

6. Boas Práticas ao Usar o Editor

• Documente suas alterações: Se você fizer grandes mudanças via CSS customizado ou Liquid, anote o que foi feito.
• Teste em diferentes dispositivos: Use os botões de pré-visualização (desktop, mobile) no editor e teste também em dispositivos reais.
• Use um tema de rascunho (draft theme): Nunca faça grandes alterações no seu tema ativo. Duplique o tema (Online Store > Themes > Actions > Duplicate), trabalhe na cópia e só publique quando estiver tudo perfeito.
• Mantenha a simplicidade: Evite sobrecarregar a loja com muitas seções ou designs complexos demais que possam confundir o usuário.
• Otimização de Performance: Imagens grandes ou muitos scripts customizados podem deixar sua loja lenta. Otimize imagens e seja cauteloso com código extra.

💻 Exemplos Práticos

Vamos colocar a mão na massa e ver como essas customizações funcionam na prática. Usaremos um tema padrão como o Dawn para nossos exemplos, pois ele é gratuito e amplamente utilizado.

Cenário 1: Personalizando a Página Inicial do Zero

Neste cenário, vamos reorganizar a página inicial, mudar conteúdo e adicionar uma nova seção.

1. Acesse o Editor de Temas: Vá para Online Store > Themes > Customize.

• Captura de Tela (Descrição): A pré-visualização da sua loja e a barra lateral de edições à esquerda.

2. Reorganizar Seções:

Na barra lateral esquerda, clique e arraste a seção “Featured collection” (Coleção em destaque) para acima* da seção “Image banner” (Banner de imagem).

• Captura de Tela (Descrição): A barra lateral mostrando a seção “Featured collection” sendo arrastada para uma nova posição. A pré-visualização reflete a mudança instantaneamente.

3. Modificar Conteúdo de uma Seção Existente:

• Clique na seção “Image banner”.
• Na barra lateral, você verá as configurações da seção.
• Altere o “Heading” (título) para Novidades Incríveis Chegaram! ✨.
• Altere o “Button label” (texto do botão) para Compre Agora.
• No campo de “Image selection”, clique em “Change image” e faça upload de uma imagem chamativa do seu computador.
• Captura de Tela (Descrição): A barra lateral mostrando os campos de configuração da seção “Image banner” sendo preenchidos e a pré-visualização atualizando o banner com o novo texto e imagem.

4. Adicionar uma Nova Seção:

• Role para baixo na barra lateral até o final e clique em “+ Add section” (Adicionar seção).
• Procure por “Text with image” (Texto com imagem) e clique para adicioná-la.
• Arraste a nova seção para a posição desejada (por exemplo, abaixo do “Image banner”).
• Clique na nova seção “Text with image” e personalize o título, texto, botão e faça upload de uma imagem relevante.
• Captura de Tela (Descrição): A janela de seleção de seções para adicionar e, em seguida, a barra lateral com as configurações da nova seção “Text with image” sendo editadas.

Cenário 2: Adicionando um Banner Promocional Avançado com Liquid Customizado

Queremos adicionar um pequeno banner no topo da página inicial, acima do cabeçalho, para anunciar uma promoção.

1. Acesse a Página Inicial no Editor: Certifique-se de que está editando a página inicial.

2. Adicionar uma Nova Seção (para o banner):

• Clique em “+ Add section”.
• Procure por uma seção simples que permita adicionar blocos, como “Custom Liquid” ou, se não houver essa opção direta no tema (alguns temas mais antigos podem não ter), podemos adicionar uma seção genérica como “Rich Text” e colocar o Liquid lá, mas o ideal é ter uma seção própria para Liquid. Se seu tema for Dawn, você pode simplesmente adicionar uma seção “Custom Liquid” ou “Multi-column” e depois adicionar um bloco Custom Liquid dentro dela, mas vamos usar a opção mais direta para este exemplo.
• Se seu tema (como o Dawn) oferece a seção “Custom Liquid” diretamente, adicione-a. Se não, você pode adicionar uma seção como “Multi-column” e dentro dela, adicionar um bloco “Custom Liquid”. Para o Dawn, a seção “Custom Liquid” é ideal. Arraste-a para o topo, acima do “Header”.
• Captura de Tela (Descrição): Adicionando a seção “Custom Liquid” e arrastando-a para o topo da lista de seções na barra lateral.

3. Inserir o Código Liquid:

• Clique na seção “Custom Liquid” que você acabou de adicionar.
• No campo de texto “Liquid customizado”, insira o seguinte código:

{% assign promocao_ativa = true %} {# Defina como true para ativar ou false para desativar #}
{% assign texto_promocao = "🎉 FRETE GRÁTIS em compras acima de R$199! Use o cupom FRETEGRATIS! 🎉" %}
{% assign cor_fundo_banner = "#ffeb3b" %} {# Amarelo claro #}
{% assign cor_texto_banner = "#333333" %} {# Preto quase #}
{% if promocao_ativa %}

{{ texto_promocao }}



{% endif %}

• Explicação do Código:
• assign promocao_ativa: Uma variável Liquid que controla se o banner aparece ou não. Simplesmente mude para false para desativar sem remover o código.
• assign texto_promocao, cor_fundo_banner, cor_texto_banner: Variáveis para facilitar a mudança do conteúdo e estilo do banner sem mexer no HTML/CSS.
• {% if promocao_ativa %}: Estrutura condicional para exibir o banner apenas se a promoção estiver ativa.
• : O elemento HTML do banner, com estilos inline para cores e um class para CSS adicional.
• 
  

  {% else %}

  {# Opcional: Mostrar uma mensagem diferente se a promoção já tiver acabado #}

  Promoção encerrada! Fique ligado para as próximas novidades!

  {% endif %}

  • Atenção: Embora possamos colocar