Olá, meus queridos alunos e futuras lendas do e-commerce! 👋 Sejam muito bem-vindos à Aula 99 do nosso curso “Loja Shopify do Zero ao Avançado”!

Chegamos a um ponto crucial e extremamente empolgante do nosso aprendizado. Depois de mergulharmos em cada detalhe técnico, cada conceito de Liquid, cada API e cada estratégia de otimização, é hora de colocar tudo em prática!

Esta aula será o ápice do nosso curso, onde vamos construir juntos uma loja Shopify completa do zero, aplicando todos os conhecimentos que adquirimos até agora. Preparem-se para sujar as mãos com código, arquitetura de dados e design, transformando a teoria em uma realidade tangível e funcional.

Nosso objetivo é criar uma loja robusta, otimizada e pronta para vender, com um foco especial em personalização avançada e boas práticas. Vamos nessa? 🚀

—

Aula 99 – Loja Shopify do Zero ao Avançado: Projeto prático – Criando loja completa do zero

📚 O que você vai aprender nesta aula

Nesta aula intensiva e prática, você vai:

• ✅ Revisar e aplicar os princípios de planejamento e arquitetura de uma loja Shopify.
• ✅ Configurar e personalizar um tema Shopify (Dawn) do zero, indo muito além das configurações básicas.
• ✅ Desenvolver seções e blocos personalizados utilizando Liquid, HTML, CSS e JavaScript para a homepage.
• ✅ Integrar e utilizar Metaobjects e Metafields para criar conteúdo dinâmico e flexível em diversas páginas.
• ✅ Otimizar as páginas de produto e coleção com informações avançadas e melhorias de UX.
• ✅ Criar e estilizar páginas institucionais e blog posts com recursos personalizados.
• ✅ Implementar otimizações de performance e SEO para garantir um bom ranqueamento e velocidade.
• ✅ Discutir e aplicar um checklist de lançamento para uma loja profissional.
• ✅ Integrar conceitos de design responsivo e acessibilidade em todo o processo de desenvolvimento.

🔗 Conectando com aulas anteriores

Até agora, construímos uma base de conhecimento sólida e profunda. Nesta aula, vamos amarrar todos os pontos. Relembre-se das nossas jornadas sobre:

• Aula 5-10: Fundamentos do Shopify e Arquitetura de Loja: Onde entendemos como o Shopify funciona, sua estrutura e como planejar um projeto.
• Aula 15-25: Temas, Seções e Blocos: A espinha dorsal da nossa personalização. Vamos criar nossos próprios elementos!
• Aula 30-40: Liquid – A Linguagem do Shopify: Essencial para qualquer customização avançada, desde condicionais (if/else) até loops (for).
• Aula 45-55: Metafields e Metaobjects: A chave para dados customizados e estruturas de conteúdo flexíveis. Usaremos exaustivamente!
• Aula 60-70: Shopify Storefront API e GraphQL (Avançado): Embora não criemos um Headless do zero nesta aula, os conceitos de dados e como eles são estruturados nos ajudarão a pensar melhor na arquitetura da loja.
• Aula 75-85: Otimização de Performance e SEO: Aplicaremos as técnicas aprendidas para garantir que nossa loja seja rápida e bem indexada.
• Aula 90-95: Shopify CLI e Desenvolvimento Local: Usaremos o CLI para gerenciar nosso tema de forma eficiente.

Este é o momento de colher os frutos de todo esse conhecimento! 🌳

📖 Conteúdo Principal

Nosso projeto prático será a criação de uma loja de “EcoTech Gadgets”. Imagine uma loja moderna que vende eletrônicos e gadgets com foco em sustentabilidade e tecnologia verde. Isso nos dará um excelente campo para aplicar personalizações visuais e de conteúdo.

Vamos usar o tema Dawn como base, por ser leve, flexível e totalmente compatível com os novos recursos do Shopify.

Fase 1: Planejamento e Configuração Inicial (Revisão Avançada)

1. Definição da Persona e Jornada do Cliente:

• Quem é nosso cliente ideal? O que ele busca? Como ele navega?
• Isso guiará nossas decisões de design e conteúdo.

2. Estrutura do Conteúdo:

• Páginas Principais: Home, Produtos, Coleções (por categoria, por impacto ambiental), Sobre Nós, Contato, Blog, FAQs, Política de Sustentabilidade.
• Produtos: Como categorizar? (Ex: Smartphones Ecológicos, Acessórios de Energia Solar).
• Artigos de Blog: Para engajar e educar (Ex: Guia de Descarte Responsável, As 5 Inovações Verdes de 2024).

3. Configuração Básica do Shopify:

• Instalar o tema Dawn.
• Configurar moedas, impostos, informações de envio (revisão rápida, pois já cobrimos isso em detalhes).
• Configurar os primeiros produtos e coleções de teste.

Fase 2: Personalização Avançada da Página Inicial (Homepage)

A homepage é o cartão de visitas. Vamos deixá-la espetacular!

1. Hero Section Dinâmica:

• Criaremos uma seção hero-custom que permita múltiplos slides, cada um com imagem, título, subtítulo e CTA, gerenciados via editor de tema.
• Conexão: Uso de schema para blocks e settings na seção Liquid.

2. Seção “Nossos Valores EcoTech” com Metaobjects:

• Em vez de texto estático, vamos criar um Metaobject chamado eco_value com campos como title, description e icon_svg (ou icon_image).
• Criaremos diversas entradas para esse Metaobject (ex: Reciclagem, Energia Renovável, Neutralidade de Carbono).
• Desenvolveremos uma seção personalizada que irá buscar e exibir esses valores dinamicamente.
• Conexão: Metaobjects, Liquid loops, CSS para grid.

3. Seção de Produtos Destacados com Filtros Rápidos:

• Uma seção que mostre produtos de uma coleção específica, mas com a opção de exibir “tags” de filtro rápido acima dos produtos (ex: “Mais Vendidos”, “Novidades”, “Com Selo Verde”).
• Conexão: Liquid para coleções, tags de produto, JavaScript para filtrar na interface.

4. Seção de Testemunhos Dinâmicos (Metaobjects):

• Outro Metaobject para testimonial com campos como author_name, author_title, quote_text, author_image.
• Uma seção que exiba um slider ou grid de testemunhos.
• Conexão: Metaobjects, Liquid, Swiper.js (ou similar) para o slider.

Fase 3: Otimização da Página de Produto

A página de produto é onde a conversão acontece. Precisamos fornecer todas as informações relevantes de forma clara e atraente.

1. Metafields para Detalhes de Sustentabilidade:

• Criaremos Metafields para produtos, como impacto_ambiental (texto rich text), certificado_eco (arquivo de imagem), video_unboxing (URL de vídeo).
• Desenvolveremos um bloco customizado dentro da seção main-product (ou uma nova seção específica) para exibir esses Metafields de forma organizada (ex: abas ou um painel lateral).
• Conexão: Metafields de produto, Liquid para acessar product.metafields, CSS para estilização de abas.

2. Bloco de “Compatibilidade e Especificações Técnicas”:

• Um Metafield tipo JSON para uma tabela de especificações, ou um Metaobject para modelos compatíveis.
• Exibiremos isso em um bloco customizado.
• Conexão: Metafields JSON, Liquid para iterar sobre objetos JSON.

3. Integração com Apps (Conceitual):

• Discutiremos como integrar apps de reviews (ex: Judge.me, Yotpo), upsells/cross-sells (ex: ReConvert), e selos de sustentabilidade (ex: Carbon Neutral Checkout) via snippets Liquid.
• Conexão: render tag Liquid.

Fase 4: Melhorias na Página de Coleção e Busca

Facilitar a navegação e a descoberta de produtos.

1. Filtros Avançados e Sorting Customizado:

• Usaremos os filtros padrão do Shopify, mas também exploraremos como criar filtros baseados em tags de produto customizadas e exibir opções de ordenação mais claras.
• Conexão: collection.filters, collection.sort_options, HTML select e input.

2. Layout de Cards de Produto Customizado:

• Ajustaremos o snippet product-card para exibir mais informações, como selos de sustentabilidade ou um Metafield de destaque no próprio card.
• Conexão: snippets/product-card.liquid, CSS para o layout.

Fase 5: Páginas Institucionais e Blog

Conteúdo que gera confiança e engajamento.

1. Página “Sobre Nós” com Storytelling:

• Usaremos uma combinação de seções customizadas e Metaobjects para contar a história da “EcoTech Gadgets”, apresentar a equipe, nossa missão e nossos marcos.
• Conexão: Templates de página (page.about.json), Metaobjects, seções customizadas.

2. Blog Post com Detalhes do Autor e Tempo de Leitura:

• Adicionaremos Metafields ao template de blog post para author_bio (rich text), author_image (arquivo), e calcularemos o reading_time via JavaScript ou um filtro Liquid customizado.
• Conexão: article.liquid, Metafields, JavaScript para reading_time.

Fase 6: Carrinho e Checkout (Limitações e Otimizações)

Entendendo o que podemos e não podemos fazer.

1. Otimização do Carrinho (cart.liquid):

• Adicionar um campo para notas do pedido ou um upsell de “sacola de presente ecológica” via Metafield ou cart.attributes.
• Conexão: cart.attributes, CSS para estilização.

2. Branding e Apps no Checkout:

• Revisar as opções de personalização via Editor de Tema para o checkout.
• Mencionar Shopify Functions como a nova forma de estender o checkout (se relevante para aulas futuras).
• Discutir apps para upsells na página de agradecimento.

Fase 7: Performance e SEO

Essencial para o sucesso de qualquer loja.

1. Otimização de Imagens:

• Uso de asset_img_url com width e height para responsividade e carregamento otimizado.
• Discussão sobre formatos (WebP).
• Conexão: Filtros Liquid para imagens.

2. Minificação e Bundling de Assets:

• O tema Dawn já faz um bom trabalho, mas reforçar a importância de CSS e JS otimizados.
• Conexão: Conceitos de Assets.

3. Dados Estruturados (Schema.org):

• Revisar o JSON-LD gerado pelo Shopify para produtos e garantir que está completo e correto.
• Conexão: SEO, JSON-LD.

Fase 8: Testes e Lançamento

Garantindo que tudo funcione perfeitamente.

1. Testes de Funcionalidade: Compra completa, formulários, filtros, etc.

2. Testes de Responsividade: Em diferentes dispositivos e tamanhos de tela.

3. Testes de Performance: Ferramentas como PageSpeed Insights, Lighthouse.

4. Checklist Pré-Lançamento: SEO, SSL, gateways de pagamento, e-mails transacionais.

—

💻 Exemplos Práticos

Vamos mergulhar em alguns exemplos de código para as partes mais avançadas do nosso projeto.

Exemplo 1: Seção Personalizada com Metaobjects para “Nossos Valores EcoTech”

Objetivo: Criar uma seção na homepage que exibe 3 valores da empresa, cada um com um ícone, título e descrição, puxados de Metaobjects.

Passo 1: Definir o Metaobject “Eco Value”

No admin Shopify, vá em Conteúdo > Metaobjects e crie uma nova definição:

• Nome: Eco Value
• API handle: eco_value
• Campos:
• Título (tipo: Texto, linha única) – title
• Descrição (tipo: Texto, multi-linha) – description
• Ícone (tipo: Arquivo, apenas imagem) – icon_image

Crie 3 entradas de exemplo para eco_value (ex: “Energia Renovável”, “Materiais Reciclados”, “Entrega Carbono Zero”).

Passo 2: Criar o Arquivo da Seção (sections/eco-values.liquid)

{% comment %}
Section: Eco Values
Displays a grid of eco-friendly values using Metaobjects.
{% endcomment %}


{% if section.settings.section_title != blank %}
{{ section.settings.section_title }}
{% endif %}
{% if section.settings.section_subtitle != blank %}
{{ section.settings.section_subtitle }}

{% endif %}

{% for eco_value in shop.metaobjects.eco_value.values %}

{% if eco_value.icon_image != blank %}
{{ eco_value.icon_image | image_url: width: 100 | image_tag: alt: eco_value.title }}
{% endif %}
{% if eco_value.title != blank %}
{{ eco_value.title }}
{% endif %}
{% if eco_value.description != blank %}
{{ eco_value.description }}

{% endif %}

{% endfor %}


{% schema %}
{
"name": "Eco Values Grid",
"tag": "section",
"class": "section-eco-values",
"settings": [
{
"type": "text",
"id": "section_title",
"label": "Título da Seção",
"default": "Nossos Valores EcoTech"
},
{
"type": "richtext",
"id": "section_subtitle",
"label": "Subtítulo da Seção",
"default": "
Comprometidos com um futuro mais verde e tecnológico.
"

},
{
"type": "color",
"id": "background_color",
"label": "Cor de Fundo da Seção",
"default": "#f8f8f8"
},
{
"type": "color",
"id": "text_color",
"label": "Cor do Texto Geral",
"default": "#333333"
},
{
"type": "color",
"id": "item_background_color",
"label": "Cor de Fundo do Item",
"default": "#ffffff"
},
{
"type": "color",
"id": "item_title_color",
"label": "Cor do Título do Item",
"default": "#007bff"
},
{
"type": "color",
"id": "item_description_color",
"label": "Cor da Descrição do Item",
"default": "#555555"
}
],
"presets": [
{
"name": "Grade de Valores Ecológicos",
"category": "Texto e Imagens"
}
]
}
{% endschema %}

Passo 3: Adicionar a Seção à Homepage

No editor de tema do Shopify, você poderá adicionar esta nova seção “Grade de Valores Ecológicos” à sua página inicial e configurar os textos e cores. Ela automaticamente puxará os Metaobjects eco_value que você criou! ✨

—

Exemplo 2: Bloco Personalizado na Página de Produto para Detalhes de Sustentabilidade

Objetivo: Adicionar um bloco customizado na página de produto que exiba um Metafield de texto rico contendo informações detalhadas sobre a sustentabilidade do produto.

Passo 1: Definir o Metafield “Sustentabilidade” para Produtos

No admin Shopify, vá em Conteúdo > Metafields > Produtos e crie uma nova definição:

• Nome: Informações de Sustentabilidade
• API handle: sustainability_info
• Tipo: Texto em formato rich text

Adicione conteúdo a este Metafield para alguns produtos (ex: “Este produto é feito com X% de materiais reciclados e sua fabricação economiza Y litros de água.”).

Passo 2: Modificar a Seção main-product para incluir um Bloco Personalizado

Abra o arquivo sections/main-product.liquid do seu tema Dawn. Este é um arquivo grande, mas queremos focar na seção schema.

Dentro do schema da seção main-product, adicione um novo tipo de bloco:

json

{
"type": "sustainability_details",
"name": "Detalhes de Sustentabilidade",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Este bloco exibe o metafield 'Informações de Sustentabilidade' do produto."
},
{
"type": "text",
"id": "block_title",
"label": "Título do Bloco",
"default": "Nosso Compromisso Verde"
}
]
}

Agora, dentro do loop {% for block in section.blocks %} na parte principal do main-product.liquid, adicione a lógica para renderizar este bloco:

{% comment %}
Find the appropriate place where you want this block to appear.
For instance, after 'Product information' or 'Description'.
{% endcomment %}
{% if block.type == 'sustainability_details' %}

{{ block.settings.block_title }}
{% if product.metafields.custom.sustainability_info != blank %}

{{ product.metafields.custom.sustainability_info }}

{% else %}
Nenhuma informação de sustentabilidade detalhada para este produto.

{% endif %}

{% endif %}

Passo 3: Adicionar o Bloco via Editor de Tema

No editor de tema, navegue até a página de um produto. Dentro da seção “Informações do Produto” (que corresponde ao main-product.liquid), você poderá adicionar um novo bloco do tipo “Detalhes de Sustentabilidade” e arrastá-lo para a posição desejada. Ele exibirá automaticamente o Metafield do produto! 🌿

—

Exemplo 3: Otimização Simples de CSS/JS para Responsividade

Objetivo: Garantir que nossa seção de valores ecológicos tenha um bom comportamento em dispositivos móveis e adicionar um efeito de hover simples.

Adicionar ao seu arquivo CSS (ex: assets/custom.css ou dentro da tag