Olá, turma! Sejam muito bem-vindos à nossa Aula 22! 🚀 Como seu professor experiente, estou animado para mergulharmos em um tópico crucial hoje: a criação de páginas que não só informam, mas também convertem visitantes em clientes.

Até agora, construímos uma base sólida para nossa loja Shopify. Já entendemos a estrutura de um tema, como trabalhar com seções e blocos, e as nuances do Liquid. Agora é hora de colocar todo esse conhecimento em prática para moldar a experiência do usuário nas páginas mais importantes da sua loja.

Preparem seus editores de código e a mente criativa, porque hoje vamos transformar conceitos em páginas dinâmicas e de alta conversão!

—

Aula 22 – Loja Shopify do Zero ao Avançado: Criando páginas de alta conversão (home, sobre, contato)

📚 O que você vai aprender nesta aula

Nesta aula, você irá:

• Compreender a importância estratégica de cada página principal (Home, Sobre Nós, Contato) para a conversão e construção de marca.
• Aprender a planejar e estruturar o conteúdo da página inicial (Home) para capturar a atenção e guiar o cliente.
• Descobrir como criar uma página “Sobre Nós” autêntica e engajadora que constrói confiança e conexão.
• Dominar a criação de uma página de “Contato” eficiente e amigável que simplifica a comunicação.
• Utilizar seções, blocos e o editor de temas do Shopify para construir e personalizar essas páginas.
• Aplicar HTML, CSS e Liquid para customizações avançadas e otimização dessas páginas.
• Receber dicas de UX/UI, SEO e boas práticas para maximizar o desempenho e a conversão de cada página.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, exploramos a fundo a estrutura de um tema Shopify (Aulas 18 e 19), entendemos o papel das seções e blocos (Aula 20) e até começamos a trabalhar com Liquid para tornar nosso tema dinâmico (Aula 21). Lembram-se de como criamos um template personalizado ou ajustamos seções existentes? 🛠️

Hoje, vamos usar essa base. As páginas que vamos construir serão o palco principal para as seções e blocos que já aprendemos a manipular, e as customizações mais finas exigirão aquele toque de HTML, CSS e, claro, Liquid, que vocês já dominam em um nível básico. Não se esqueçam que todo o trabalho com o editor de temas é fundamental, então se precisarem, revisem como navegar por ele!

📖 Conteúdo Principal

Vamos agora mergulhar na criação das páginas essenciais para qualquer loja online de sucesso!

1. A Página Inicial (Home Page): A Vitrine da Sua Loja 🛍️

A página inicial é a sua primeira e, muitas vezes, única chance de causar uma boa impressão. Ela deve ser um convite irresistível para explorar sua loja.

Propósito e Estratégia:

• Primeira Impressão: Capturar a atenção em segundos.
• Orientação: Guiar o visitante para os produtos ou categorias mais importantes.
• Credibilidade: Construir confiança e autoridade.
• Conversão: Estimular a exploração e a compra.

Elementos Essenciais para uma Home Page de Alta Conversão:

1. Hero Banner (ou Slideshow): 🖼️

• Grande imagem ou vídeo com uma mensagem clara e um Call to Action (CTA) forte.
• Use para promoções, lançamentos, ou sua principal proposta de valor.
• Dica: O CTA deve ser visível “above the fold” (sem precisar rolar a página).

2. Seções de Produtos em Destaque: ✨

• Coleções mais vendidas, novos produtos, produtos em promoção.
• Use blocos de “Produto em destaque” ou “Coleção em destaque”.

3. Proposta de Valor/Benefícios: ✅

• Ícones e textos curtos explicando o que torna sua loja especial (frete grátis, suporte 24h, produtos ecológicos, etc.).

4. Depoimentos e Prova Social: 🗣️

• Citações de clientes satisfeitos para construir confiança. Pode ser um carrossel de depoimentos.

5. Conteúdo do Blog: ✍️

• Mostre artigos recentes para engajar os visitantes e melhorar o SEO.

6. Chamadas para Ação (CTAs) Secundárias:

• Botões para “Ver todas as coleções”, “Assinar newsletter”, “Saber mais sobre nós”.

7. Newsletter Opt-in: 📧

• Um formulário para coletar e-mails, essencial para marketing.

Como Construir na Shopify:

A página inicial é essencialmente construída e configurada através do Editor de Temas (Online Store > Themes > Customize).

1. Acesse o Editor de Temas: No painel administrativo da Shopify, vá em “Loja Virtual” -> “Temas”. Clique em “Personalizar” no seu tema ativo.

2. Seções da Página Inicial: No lado esquerdo, você verá uma lista de seções já existentes (Header, Footer, e as seções da Home page).

3. Adicionar e Reorganizar Seções: Clique em “Adicionar seção” para escolher entre as opções do seu tema (ex: Image banner, Featured collection, Rich text, Testimonials). Arraste e solte as seções para reorganizar a ordem.

4. Personalizar Seções e Blocos: Clique em cada seção ou bloco para ajustar imagens, textos, links e configurações específicas (número de produtos, layout, etc.).

Dica de Profissional: Pense na sua Home como uma história. O Hero é a capa, os produtos são os capítulos principais, e os depoimentos são as resenhas.

2. A Página “Sobre Nós”: Construindo Conexão e Confiança 🤝

A página “Sobre Nós” é mais do que apenas um espaço para falar sobre sua empresa; é onde você humaniza sua marca e constrói um relacionamento com seus clientes.

Propósito e Estratégia:

• Contar a História: Quem vocês são, por que começaram, qual a paixão por trás da marca.
• Construir Confiança: Mostrar os valores, a equipe, a autenticidade.
• Conectar Emocionalmente: As pessoas se conectam com histórias.

Elementos Essenciais para uma Página “Sobre Nós” Cativante:

1. Sua História: 📖

• Como tudo começou, os desafios, os marcos.
• Use uma narrativa envolvente.

2. Missão, Visão e Valores: ✨

• O que sua empresa representa, para onde ela vai, quais são os princípios que a guiam.

3. Sua Equipe (Opcional, mas Recomendado): 🧑‍🤝‍🧑

• Apresente as pessoas por trás da marca. Fotos e pequenas biografias aumentam a autenticidade.

4. Fotos e Vídeos: 📸

• Mostre seu processo, bastidores, a equipe trabalhando. Isso torna tudo mais real.

5. Depoimentos ou Prêmios: 🏆

• Se tiver, reforce a credibilidade.

6. Chamada para Ação:

• Incentive o visitante a explorar produtos, seguir nas redes sociais ou entrar em contato.

Como Construir na Shopify:

Você tem duas abordagens principais para a página “Sobre Nós”:

1. Usando o Editor de Páginas (Conteúdo Estático):

• Vá em “Loja Virtual” -> “Páginas”. Clique em “Adicionar página”.
• Dê um título (ex: “Sobre Nós”).
• No campo de “Conteúdo”, você pode usar o editor de texto rico para adicionar seu texto, imagens, vídeos incorporados.
• Vantagem: Simples e rápido para conteúdo textual.
• Desvantagem: Menos flexibilidade de layout e design sem codificação manual.

2. Criando um Template de Página Personalizado (Melhor para Design Avançado):

• Esta é a abordagem que oferece mais controle, usando o conhecimento que você já tem de Liquid, HTML e CSS.
• Passo 1: Crie um novo template de página. No seu editor de código (ou pelo Shopify Admin em “Temas” -> “Ações” -> “Editar código”), vá na pasta templates. Crie um novo arquivo chamado page.sobre-nos.liquid.
• Passo 2: Copie o conteúdo do page.liquid padrão. Geralmente, você vai querer copiar o código base do page.liquid para o seu novo arquivo.
• Passo 3: Adicione seções dinâmicas ao template. Dentro do page.sobre-nos.liquid, você pode chamar seções específicas para essa página. Por exemplo:

{% section 'page-header' %} {# Uma seção simples para o título da página #}

{{ page.content }}

{% section 'about-us-story' %} {# Uma seção personalizada para a história #}
{% section 'about-us-team' %} {# Uma seção personalizada para a equipe #}
{% section 'testimonials-block' %} {# Reusando uma seção de depoimentos, talvez #}

• Passo 4: Crie os arquivos de seção. Vá na pasta sections e crie arquivos como about-us-story.liquid e about-us-team.liquid. Dentro deles, defina os {% schema %} para que possam ser editados no Editor de Temas.
• Passo 5: Associe a página ao template. Volte na página “Sobre Nós” no admin da Shopify, e na barra lateral direita, em “Template”, selecione page.sobre-nos.
• Vantagem: Total controle sobre o layout, você pode arrastar e soltar as seções personalizadas no Editor de Temas.
• Desvantagem: Requer mais conhecimento de Liquid e estrutura de tema.

Dica de Profissional: Use fotos de boa qualidade, mas que transmitam autenticidade. Evite fotos excessivamente “stock”. Pessoas querem se conectar com pessoas reais!

3. A Página de Contato: Facilitando a Comunicação 📞

A página de contato é mais do que um formulário; é o seu canal direto com o cliente. Deve ser fácil de encontrar e usar.

Propósito e Estratégia:

• Acessibilidade: Tornar fácil para o cliente entrar em contato.
• Resolução de Dúvidas: Oferecer múltiplos canais de suporte.
• Construir Confiança: Mostrar que você está disponível e se importa.

Elementos Essenciais para uma Página de Contato Eficiente:

1. Formulário de Contato: 📝

• Obrigatório. O Shopify tem um formulário de contato nativo fácil de usar.
• Campos essenciais: Nome, E-mail, Assunto (opcional), Mensagem.

2. Informações de Contato Alternativas: ✉️

• Endereço de e-mail direto, número de telefone.
• Horário de atendimento.

3. Endereço Físico (se aplicável): 📍

• Especialmente se você tiver uma loja física ou escritório. Inclua um mapa (Google Maps).

4. Perguntas Frequentes (FAQ): ❓

• Ajuda a resolver dúvidas comuns sem precisar de contato direto, economizando tempo para ambos. Pode ser um link para uma página FAQ dedicada.

5. Links para Redes Sociais: 📱

• Ofereça outras formas de se conectar.

Como Construir na Shopify:

1. Usando o Template page.contact.liquid:

• No admin da Shopify, vá em “Loja Virtual” -> “Páginas” -> “Adicionar página”.
• Dê um título (ex: “Contato”).
• Na barra lateral direita, em “Template”, selecione page.contact. Este template já contém o código para o formulário de contato padrão do Shopify.
• Você pode adicionar texto e outras informações diretamente no campo de “Conteúdo” da página, acima ou abaixo do formulário.

2. Personalizando o Formulário de Contato:

O formulário padrão do Shopify é gerado por um código Liquid. Você pode encontrá-lo (ou uma chamada para ele) no arquivo page.contact.liquid do seu tema:

{% form 'contact' %}
{% if form.posted_successfully? %}
Obrigado por nos contatar! Responderemos em breve.

{% endif %}
{{ form.errors | default_errors }}


type="text"
id="ContactForm-name"
name="contact[name]"
value="{% if form.name %}{{ form.name }}{% endif %}"
placeholder="Seu nome"
>
Seu nome



type="email"
id="ContactForm-email"
name="contact[email]"
value="{% if form.email %}{{ form.email }}{% endif %}"
spellcheck="false"
autocapitalize="off"
placeholder="Seu e-mail"
>
Seu e-mail



type="tel"
id="ContactForm-phone"
name="contact[phone]"
pattern="[0-9-]+"
value="{% if form.phone %}{{ form.phone }}{% endif %}"
placeholder="Telefone (opcional)"
>
Telefone (opcional)



rows="10"
id="ContactForm-body"
name="contact[body]"
placeholder="Sua mensagem"
>{{ form.body }}
Sua mensagem

Enviar
{% endform %}

Você pode estilizar este formulário com CSS. Por exemplo, para um visual mais moderno:

css

/ assets/theme.css ou similar /
.contact-form .field {
margin-bottom: 20px;
}
.contact-form .field input,
.contact-form .field textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; / Garante que padding e border sejam incluídos na largura /
}
.contact-form .field label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.contact-form .button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.contact-form .button:hover {
background-color: #0056b3;
}
.form-message--success {
color: green;
font-weight: bold;
margin-bottom: 15px;
}

Você precisará adicionar a classe contact-form ao formulário ou ao seu elemento pai no Liquid para que o CSS se aplique corretamente:

{% form 'contact' %}
...
{% endform %}

Dica de Profissional: Garanta que sua página de contato seja responsiva. Teste-a em diferentes dispositivos para que o formulário seja fácil de preencher em qualquer tela.

Dicas Gerais para Todas as Páginas de Alta Conversão:

Responsividade: 📱 Todas as suas páginas devem* ser otimizadas para dispositivos móveis. A maioria dos usuários navegará pelo celular.

• SEO Básico: 🔍 Preencha o “Título da página” e a “Meta descrição” no Shopify Admin para cada página. Use palavras-chave relevantes. Otimize os títulos


  ,

  e o texto para que sejam descritivos.

• Velocidade de Carregamento: ⚡ Imagens otimizadas, código limpo e poucos scripts externos são cruciais.
• Calls to Action (CTAs) Claros: Botões e links devem ser óbvios e levar a uma ação específica.
• Consistência da Marca: Mantenha a mesma linguagem visual e tom de voz em todas as páginas.

💻 Exemplos Práticos

Vamos visualizar como esses conceitos se traduzem em código e na prática.

Exemplo 1: Estrutura de Seção da Home Page (Hero Banner)

Imagine que você está criando uma seção hero-banner.liquid na pasta sections.

{% comment %}
assets/sections/hero-banner.liquid
{% endcomment %}


{% if section.settings.title != blank %}
{{ section.settings.title | escape }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

{% endif %}
{% if section.settings.subtitle != blank %}
{{ section.settings.subtitle | escape }}

{% endif %}
{% if section.settings.button_label != blank and section.settings.button_link != blank %}

{{ section.settings.button_label | escape }}

{% endif %}


{% schema %}
{
"name": "Banner Principal",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Imagem de fundo"
},
{
"type": "select",
"id": "image_position",
"label": "Posição da Imagem",
"options": [
{ "value": "top center", "label": "Superior Centro" },
{ "value": "center center", "label": "Centro Centro" },
{ "value": "bottom center", "label": "Inferior Centro" }
],
"default": "center center"
},
{
"type": "text",
"id": "title",
"label": "Título do Banner",
"default": "Seu Título Incrível"
},
{
"type": "textarea",
"id": "subtitle",
"label": "Subtítulo do Banner",
"default": "Mensagem impactante aqui."
},
{
"type": "text",
"id": "button_label",
"label": "Texto do Botão",
"default": "Comprar Agora"
},
{
"type": "url",
"id": "button_link",
"label": "Link do Botão"
}
],
"presets": [
{
"name": "Banner Principal",
"category": "Layout"
}
]
}
{% endschema %}

Com este código, no Editor de Temas, você veria campos para carregar a imagem, escolher a posição, digitar título, subtítulo e os detalhes do botão.

Screenshot Conceitual (Editor de Temas):

Imagine um printscreen da área de personalização da Home Page no Editor de Temas. No lado esquerdo, a lista de seções como “Header”, “Banner Principal”, “Coleção em Destaque”, “Depoimentos”, “Footer”. Ao clicar em “Banner Principal”, no lado direito, apareceriam os campos para upload da imagem, texto do título/subtítulo e link/texto do botão, exatamente como definidos no {% schema %}.

Exemplo 2: Personalização da Página “Sobre Nós” com Conteúdo Rico

Se você optou por um template page.sobre-nos.liquid e deseja ter um visual mais elaborado do que apenas o page.content.

page.sobre-nos.liquid:

{{ page.title }}


{{ page.content }} {# Conteúdo principal vindo do admin da página #}



{% if page.metafields.custom.imagem_sobre_nos != blank %}

{% endif %}
Nossa Missão: Entregar produtos de alta qualidade com paixão e inovação.



{% section 'about-us-story' %} {# Uma seção customizada que criamos #}
{% section 'about-us-team' %} {# Outra seção customizada #}

Descubra Nossos Produtos

Aqui, estamos usando page.metafields.custom.imagem_sobre_nos (que aprenderemos sobre na próxima aula de Metafields!) para uma imagem lateral e chamando seções personalizadas.

CSS de Exemplo para a Página “Sobre Nós”:

css

/ assets/theme.css ou similar /
.page-wrapper--about {
padding-top: 40px;
padding-bottom: 40px;
}
.page-wrapper--about .section-header__title {
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
color: #333;
}
.page-wrapper--about .grid {
display: flex;
flex-wrap: wrap;
gap: 30px; / Espaçamento entre as colunas /
}
.page-wrapper--about .grid__item {
flex: 1; / Permite que os itens cresçam /
min-width: 300px; / Garante que não fiquem muito pequenos /
}
@media screen and (min-width: 750px) {
.page-wrapper--about .medium-up--two-thirds {
flex: 0 0 calc(66.666% - 15px); / Duas terças com ajuste de gap /
max-width: calc(66.666% - 15px);
}
.page-wrapper--about .medium-up--one-third {
flex: 0 0 calc(33.333% - 15px); / Uma terça com ajuste de gap /
max-width: calc(33.333% - 15px);
}
}
.page-wrapper--about .img-fluid {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.page-wrapper--about p {
line-height: 1.6;
margin-bottom: 15px;
color: #555;
}
.page-wrapper--about .button {
margin-top: 30px;
}

Vídeo Conceitual (Personalização “Sobre Nós”):

Imagine um vídeo curto mostrando o processo de criar uma nova página, selecionar o template page.sobre-nos, e então ir para o Editor de Temas para arrastar e soltar as seções about-us-story e about-us-team que você definiu no código. Seria fantástico ver como o conteúdo estático da página se mistura com as seções dinâmicas.

🎯 Exercícios e Desafios

Hora de colocar a mão na massa, pessoal!

1. Crie sua Página Inicial (Home Page):

• No Editor de Temas, adicione e configure pelo menos 4 seções diferentes (ex: Hero Banner, Coleção em Destaque, Depoimentos, Newsletter).
• Preencha-as com conteúdo fictício, mas relevante para o nicho da sua loja.
• Certifique-se de que cada seção tenha um objetivo claro (atrair, vender, construir confiança, capturar e-mail).

2. Desenvolva sua Página “Sobre Nós”:

• Crie uma nova página chamada “Sobre Nossa Loja”.
• Utilize o editor de texto rico para escrever uma história envolvente sobre sua marca (mesmo que seja fictícia!).
• Inclua uma imagem de capa e alguns parágrafos sobre sua missão e visão.
• Desafio Extra: Se seu tema permitir, tente criar um novo template de página (como page.sobre-nos.liquid) e adicione pelo menos uma seção personalizada (mesmo que seja simples, como uma seção com um título e um parágrafo) para mostrar um bloco de “Nossos Valores” abaixo do conteúdo principal da página.

3. Configure e Estilize sua Página de Contato:

• Crie uma nova página chamada “Fale Conosco” e atribua a ela o template page.contact.
• No conteúdo da página, adicione seu e-mail de contato, telefone (fictício) e um horário de atendimento.
• Desafio Extra: Adicione o CSS de exemplo que fornecemos nesta aula para estilizar o formulário de contato, deixando-o com um visual mais moderno e alinhado com a sua marca.

📝 Resumo da Aula

Ufa! Que aula produtiva, não é? Cobrimos os pilares da criação de páginas de alta conversão:

• A Home Page como a vitrine e o guia principal da sua loja.
• A página “Sobre Nós” como a alma da sua marca, construindo confiança e conexão.
• A página de “Contato” como o canal de comunicação acessível e amigável.
• Vimos como o Editor de Temas, seções e blocos são ferramentas poderosas.
• Reforçamos o uso de HTML, CSS e Liquid para personalização e controle total.
• E, claro, dicas essenciais de UX/UI, SEO e responsividade para garantir que suas páginas não apenas funcionem, mas também convertam!

Lembrem-se, o design e o conteúdo dessas páginas são dinâmicos. Elas devem ser revisitadas e otimizadas constantemente com base no feedback e no comportamento dos seus clientes.

🚀 Preparação para próxima aula

Na Aula 23, vamos mergulhar ainda mais fundo na personalização e no poder dos dados. Vamos explorar os Metafields do Shopify! 🤯 Isso mesmo, aprenderemos a adicionar campos personalizados a produtos, coleções, páginas e muito mais, abrindo um leque imenso de possibilidades para exibir informações únicas e ricas em sua loja. Será uma aula muito prática e fundamental para quem quer levar a loja para o próximo nível de customização.

📚 Recursos Adicionais

• Documentação Oficial da Shopify – Seções e Blocos: https://shopify.dev/docs/themes/liquid/sections
• Melhores Práticas para Páginas “Sobre Nós”: https://www.shopify.com/blog/about-us-page (em inglês, mas excelente referência)
• Guia de Formulário de Contato da Shopify: https://help.shopify.com/pt-BR/manual/online-store/pages/add-contact-page
• Artigo sobre UX/UI para E-commerce: Procure por “UX best practices for e-commerce” no Google para inúmeros recursos visuais e práticos.

Até a próxima, pessoal! Continuem praticando e explorando as infinitas possibilidades do Shopify! 👋