Olá, pessoal! Sejam muito bem-vindos à nossa Aula 71 do curso “Loja Shopify do Zero ao Avançado”! 👋 Sou seu professor, com mais de uma década de experiência transformando ideias em lojas Shopify de sucesso, e estou animado para mergulharmos em um dos tópicos mais avançados e libertadores do nosso curso: Criando Temas Personalizados do Zero! 🚀

Até agora, exploramos as nuances de customizar temas existentes, usar o editor de temas e entender a estrutura básica do Shopify. Chegou o momento de dar um salto gigante e construir nossa própria fundação. Preparem-se para sujar as mãos com código e liberar a criatividade! 🛠️

Aula 71 – Loja Shopify do Zero ao Avançado: Criando temas personalizados do zero

📚 O que você vai aprender nesta aula

Nesta aula crucial, vamos desmistificar o processo de construção de um tema Shopify totalmente do zero. Ao final, você será capaz de:

• Compreender a arquitetura fundamental de um tema Shopify personalizado.
• Configurar seu ambiente de desenvolvimento para iniciar a criação de um tema do zero utilizando o Shopify CLI.
• Estruturar os diretórios e arquivos essenciais que compõem um tema Shopify funcional.
• Desenvolver os arquivos chave, como layout/theme.liquid, templates, sections e snippets.
• Integrar os objetos Liquid fundamentais (loja, produto, coleção, página, etc.) para exibir conteúdo dinâmico.
• Adicionar suporte básico a estilos (CSS) e scripts (JavaScript) em seu tema.
• Preparar suas seções para serem editáveis no editor de temas do Shopify através do {% schema %}.

🔗 Conectando com aulas anteriores

Lembrem-se das aulas onde exploramos a estrutura de diretórios dos temas Shopify (Aula X – Se você não tiver um número, pode ser “Aulas sobre Estrutura de Temas”) e como usamos o Shopify CLI para baixar, testar e publicar temas (Aula Y – Ex: Aula 68 – “Dominando o Shopify CLI para Desenvolvimento”). Agora, vamos aplicar esse conhecimento de forma proativa.

As aulas sobre HTML, CSS e JavaScript que você já domina são a base para construir a interface, e seu conhecimento sobre a sintaxe e os objetos Liquid (Aulas Z – Ex: Aula 69 – “Introdução ao Liquid: A Linguagem de Templating do Shopify”) será essencial para tornar nosso tema dinâmico. Esta aula é a culminação de muitos conceitos que aprendemos, levando-os ao próximo nível de controle e personalização! 💪

📖 Conteúdo Principal

1. Por que Criar um Tema do Zero? A Liberdade Total!

Começar um tema do zero pode parecer intimidador, mas oferece vantagens incomparáveis:

• Liberdade Criativa Total: Você não está preso às limitações ou ao “jeito” de um tema pré-existente. Cada pixel, cada funcionalidade é sua decisão.
• Performance Otimizada: Ao construir do zero, você inclui apenas o código que realmente precisa, evitando “inchaços” e funcionalidades desnecessárias que podem vir em temas prontos, resultando em um carregamento de página mais rápido.
• Controle Absoluto: Tenha controle completo sobre a experiência do usuário e a estrutura de SEO.
• Soluções Sob Medida: Ideal para lojas com requisitos muito específicos, design único ou agências que precisam entregar projetos altamente personalizados.

2. A Arquitetura Essencial de um Tema Shopify (Revisitada para “Zero”)

Para o Shopify reconhecer sua pasta como um tema, ela precisa seguir uma estrutura mínima. Vamos criar essa estrutura e entender o propósito de cada item:

• layout/: Contém o arquivo theme.liquid, que é o invólucro principal de todas as páginas da sua loja. Pense nele como o index.html mestre.
• templates/: Armazena os arquivos .liquid que definem a estrutura de diferentes tipos de páginas, como:
• index.liquid: A página inicial.
• product.liquid: Exibe os detalhes de um produto.
• collection.liquid: Mostra uma lista de produtos de uma coleção.
• page.liquid: Para páginas de conteúdo estático (ex: “Sobre Nós”, “Contato”).
• cart.liquid: A página do carrinho de compras.
• customers/ (pasta): Contém templates para a experiência do cliente (login, registro, perfil). Ex: customers/login.liquid.

sections/: Guarda os componentes reutilizáveis e dinâmicos* do seu tema. São blocos que podem ser adicionados, reordenados e configurados via o editor de temas do Shopify. Exemplos: header.liquid, footer.liquid, hero-banner.liquid, featured-products.liquid.

• snippets/: Para pequenos pedaços de código Liquid que você quer reutilizar em várias partes do tema. Ao contrário das seções, snippets não são diretamente configuráveis no editor de temas. Exemplos: product-card.liquid, icon-svg.liquid.
• assets/: Onde você armazena todos os seus arquivos estáticos: CSS (.css, .scss), JavaScript (.js), imagens (.jpg, .png, .svg), e fontes (.woff, .ttf).
• config/:
• settings_schema.json: Define as configurações globais do seu tema (ex: cores padrão, tipografia, ícones de redes sociais) que aparecerão no editor de temas.
• settings_data.json: Armazena os valores padrão para as configurações definidas em settings_schema.json.
• locales/: Contém arquivos JSON para gerenciar as traduções do seu tema, permitindo que ele seja facilmente adaptado para diferentes idiomas. Ex: pt-BR.json, en.default.json.

3. Configurando o Ambiente de Desenvolvimento com o Shopify CLI

Para começar nosso tema do zero, vamos usar o Shopify CLI. A maneira mais prática de iniciar um tema realmente vazio, mas que o CLI ainda reconheça, é usando a flag --empty.

1. Abra seu terminal/linha de comando.

2. Navegue até a pasta onde você deseja criar seu projeto.

3. Use o comando para inicializar um tema vazio:

bash

shopify theme init --empty meu-novo-tema-do-zero

Isso criará uma pasta chamada meu-novo-tema-do-zero com as pastas essenciais, mas sem nenhum arquivo Liquid dentro delas (exceto, talvez, um .gitkeep).

4. Entre na pasta do seu novo tema:

bash

cd meu-novo-tema-do-zero

5. Agora, você pode criar manualmente os arquivos essenciais que listamos acima. O shopify theme init --empty já cria os diretórios, então vamos focar nos arquivos Liquid e estáticos.

6. Para visualizar seu tema em tempo real:

bash

shopify theme dev

Isso fará o upload do seu tema para sua loja de desenvolvimento e fornecerá uma URL de pré-visualização, atualizando as alterações automaticamente enquanto você codifica. 🚀

4. Construindo a Estrutura Essencial Passo a Passo

Vamos começar a criar os arquivos um por um e preenchê-los com o mínimo necessário para um tema funcional.

4.1. layout/theme.liquid – O Coração do Seu Tema ❤️

Este é o esqueleto HTML que envolve todas as suas páginas. Ele inclui o com metadados, links para CSS e scripts, e o onde o conteúdo principal e as seções são inseridos.

O que vai aqui:

• Estrutura HTML (, , , ).
• Metatags importantes (charset, viewport, title).
• Links para seus arquivos CSS.
• Links para seus arquivos JavaScript.
• {{ content_for_header }}: Um placeholder essencial que o Shopify usa para injetar scripts e estilos importantes (apps, Google Analytics, etc.) na seção .
• {{ content_for_footer }}: Semelhante ao anterior, mas para o final do , geralmente usado para scripts.
• {{ content_for_layout }}: O mais importante! É aqui que o conteúdo específico de cada template (homepage, produto, coleção, etc.) será inserido.
• As chamadas para suas seções de cabeçalho e rodapé, geralmente usando {% section 'header' %} e {% section 'footer' %}.

4.2. templates/index.liquid – A Página Inicial 🏠

Este template é o ponto de entrada para a sua loja. Em temas modernos (Online Store 2.0), a homepage é construída inteiramente por seções dinâmicas.

O que vai aqui:

• Chamadas para as seções que você deseja exibir na homepage.

4.3. templates/product.liquid – A Página de Produto 🛍️

Este template define como um produto individual será exibido. Ele fará uso do objeto product do Liquid.

O que vai aqui:

• Título do produto ({{ product.title }}).
• Imagens do produto (loop for image in product.images).
• Preço ({{ product.price | money }}).
• Descrição ({{ product.description }}).
• Formulário “Adicionar ao Carrinho” com seleção de variantes.

4.4. templates/collection.liquid – A Página de Coleção 📦

Este template exibe uma lista de produtos que pertencem a uma determinada coleção. Ele fará uso do objeto collection e do loop for product in collection.products.

O que vai aqui:

• Título da coleção ({{ collection.title }}).
• Loop para exibir cards de produto (for product in collection.products).
• Paginação ({% paginate %}).

4.5. sections/ – Criando Seções Reutilizáveis e Dinâmicas ✨

As seções são blocos de conteúdo que podem ser adicionados, removidos e reordenados no editor de temas. Cada seção é um arquivo Liquid separado e contém um bloco {% schema %} para definir suas configurações.

Exemplo: sections/header.liquid

• Código HTML para o cabeçalho.
• Código Liquid para exibir o logo, menu de navegação, etc.
• Bloco {% schema %} para definir opções como cor de fundo, cor do texto, upload de logo.

4.6. snippets/ – Pequenos Blocos de Código Reutilizáveis 🧩

Snippets são como funções ou componentes menores que você pode incluir em qualquer outro arquivo Liquid para reutilizar código. Eles não têm um {% schema %} próprio.

Exemplo: snippets/product-card.liquid

• Código HTML e Liquid para exibir um único card de produto (imagem, título, preço, botão).
• Você pode passar um objeto product para o snippet quando o inclui: {% render 'product-card', product: product %}.

4.7. assets/ – Estilos e Scripts 🎨👨‍💻

Aqui é onde você coloca seus arquivos CSS e JavaScript. Eles são linkados no layout/theme.liquid.

Exemplo: assets/main.css

• Contém todos os estilos globais e específicos dos seus componentes.

Exemplo: assets/main.js

• Contém scripts globais ou específicos para funcionalidades interativas.

4.8. config/settings_schema.json – Configurações Globais do Tema ⚙️

Este arquivo JSON define as configurações que aparecerão na seção “Configurações do Tema” do editor de temas. Você pode definir cores, fontes, favicon, links para redes sociais, etc.

O que vai aqui:

• Um array de objetos, onde cada objeto representa um grupo de configurações.
• Cada configuração tem um type (ex: color, text, image_picker), id, label e um default value.

💻 Exemplos Práticos

Vamos colocar a mão na massa e criar a estrutura inicial!

Exemplo 1: Setup Inicial e Estrutura de Pastas

1. Abra seu terminal e execute:

bash

shopify theme init --empty meu-tema-personalizado
cd meu-tema-personalizado

2. Agora, vamos criar os arquivos essenciais. Se você estiver no VS Code, pode fazer isso diretamente ou usar os comandos touch no terminal:

bash

# Arquivos Layout
touch layout/theme.liquid
# Arquivos Templates
touch templates/index.liquid
touch templates/product.liquid
touch templates/collection.liquid
touch templates/page.liquid
mkdir templates/customers # Cria a pasta de clientes
touch templates/customers/login.liquid
touch templates/customers/register.liquid
# Arquivos Sections
touch sections/header.liquid
touch sections/footer.liquid
touch sections/hero-banner.liquid
touch sections/featured-products.liquid
# Arquivos Snippets
touch snippets/product-card.liquid
touch snippets/icon-svg.liquid
# Arquivos Assets
touch assets/main.css
touch assets/main.js
# Arquivos Config
touch config/settings_schema.json
touch config/settings_data.json # O Shopify CLI pode gerar isso automaticamente, mas é bom ter o controle.
# Arquivos Locales
touch locales/pt-BR.json
touch locales/en.default.json

Isso deve criar uma estrutura de diretórios e arquivos bem organizada para você começar.

_(Aqui entraria um screenshot da estrutura de pastas no VS Code ou similar)_

3. Inicie o servidor de desenvolvimento:

bash

shopify theme dev

Sua loja será aberta no navegador, provavelmente com uma página em branco ou um erro, pois ainda não temos conteúdo nos arquivos. Perfeito!

Exemplo 2: layout/theme.liquid – O Começo de Tudo

Vamos preencher o layout/theme.liquid com uma estrutura HTML básica e os placeholders do Liquid.

 {# Usaremos uma configuração global #}



{# ESSENCIAL: Injeta scripts e estilos do Shopify e de apps #}
{{ content_for_header }}
{# Seus arquivos CSS #}
{{ 'main.css' | asset_url | stylesheet_tag }}
{# Estilos básicos iniciais (poderiam ir em main.css) #}



{# Inclui sua seção de cabeçalho #}
{% section 'header' %}
{# ESSENCIAL: Onde o conteúdo de cada template é renderizado #}

{{ content_for_layout }}

{# Inclui sua seção de rodapé #}
{% section 'footer' %}
{# Seus arquivos JavaScript #}
{{ 'main.js' | asset_url | script_tag }}
{# ESSENCIAL: Injeta scripts do Shopify e de apps #}
{{ content_for_footer }}

Exemplo 3: sections/header.liquid – O Cabeçalho Dinâmico

Vamos criar um cabeçalho simples com um logo (ou nome da loja) e um menu, com opções de cores configuráveis no Theme Editor.

{% if section.settings.logo != blank %}



{% else %}
{{ shop.name }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

{% endif %}






{% schema %}
{
"name": "Cabeçalho da Loja",
"settings": [
{
"type": "color",
"id": "bg_color",
"label": "Cor de Fundo",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Cor do Texto/Links",
"default": "#333333"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo da Loja (Opcional)"
}
],
"default": {
"settings": {
"bg_color": "#ffffff",
"text_color": "#333333"
}
}
}
{% endschema %}

Agora, se você for no Theme Editor (personalizar tema), poderá ver as opções de cor e logo para o seu cabeçalho! 🎉

Exemplo 4: templates/index.liquid – A Homepage com Seções

Vamos fazer nossa homepage chamar as seções que criamos (ou vamos criar).

{% comment %}
Este é o template da página inicial.
Em temas OS 2.0, a homepage é composta por seções dinâmicas.
As seções são configuráveis no Theme Editor.
{% endcomment %}
{% section 'hero-banner' %}
{% section 'featured-products' %}
{% comment %} Você adicionaria mais seções aqui conforme necessário {% endcomment %}

_(Aqui entraria um screenshot de como as seções ‘hero-banner’ e ‘featured-products’ apareceriam como blocos no Theme Editor para serem adicionados, reordenados e configurados)_

Exemplo 5: assets/main.css e assets/main.js

Adicione alguns estilos básicos ao assets/main.css para ver suas mudanças:

css

/ assets/main.css /
/ Estilos globais /
body {
line-height: 1.6;
}
/ Estilos para o cabeçalho (apenas seções/header.liquid não tiver um