O guia de design de tudo para lojas da Shopify

Fontes, cores, ação! Para quem tem inclinação artística, projetar sua loja Shopify pode ser um desafio empolgante. Mas para profissionais de marketing e empreendedores que se sentem um pouco úmidos quando têm a tarefa de escolher entre fontes com e sem serifa, esse processo pode parecer extremamente assustador.

Embora Shopify tenha vários recursos que facilitam o início - estamos falando de modelos de temas pré-fabricados, designers especializados para contratar e mercados cheios de aplicativos e widgets - a paralisia de decisão é uma aflição muito real. Caso em questão: todo mundo quer uma loja Shopify que seja visualmente atraente, atraente e otimizada para conversões - mas chegar lá é mais fácil falar do que fazer.

Com o céu sendo praticamente o limite quando se trata de opções de design para sua loja Shopify, por onde você começa? Coloque as amostras de cores – aqui está o guia de design definitivo para Shopify que você sempre precisou, mas não sabia que existia, com todas as dicas e truques que você precisa para personalizar, lançar e começar a vender.

Neste artigo:
Temas da Shopify
Fotos do produto
Personalização do tema
Estrutura do Menu
Cabeçalho da página inicial
3 dicas para levar
Preciso de ajuda?

Temas da Shopify

O primeiro passo para construir sua loja Shopify envolve escolher um tema adequado. Pense nisso como a espinha dorsal do seu site que determina a experiência do usuário da sua loja, a estética visual e as funcionalidades.

A Loja de Temas da Shopify, que oferece centenas de opções, facilita a busca do par perfeito. Além disso, a maioria deles oferece várias variações de estilo, o que significa que você pode personalizá-los para combinar com a aparência da sua marca em relação a cores, fontes e aplicativos.

Sentindo-se sobrecarregado? Use os filtros da Shopify para restringir suas escolhas:

• O tamanho do seu catálogo de produtos. Se você tiver vários produtos, talvez precise de recursos como rolagem infinita ou layout de grade.

• Sua indústria. As empresas de moda podem exigir temas que permitam aos compradores escolher entre vários tamanhos e cores, enquanto as marcas de arte e fotografia podem precisar de espaços maiores para imagens de produtos.
• Preço. Embora Shopify ofereça vários temas gratuitos, os mais complexos podem custar até US$ 180.

Embora você possa personalizar a tipografia e os esquemas de cores posteriormente, o processo de personalização é mais direto se você escolher um tema que corresponda à sua visão do site em termos de estética geral e layout.

Fotos do produto

Embora sejamos grandes fãs do robusto mercado de temas do Shopify, há um risco: ter uma loja que se parece com a de todos os outros, mesmo quando você considera a personalização. Uma solução rápida? Fotos exclusivas do produto.

Para distinguir sua marca de seus concorrentes, é importante tirar fotos de produtos que encapsulem a identidade e a atitude de sua empresa. A fotografia desempenha um papel importante na definição do estilo e do tom da sua marca.

Não tenha medo de se divertir e ser um pouco mais ousado com as fotos do seu produto:

• Misture suas fotos de produtos com algumas fotos de estilo de vida , onde seus produtos estão sendo fotografados no local com adereços e modelos de apoio.
• Experimente com diferentes layouts . Por exemplo, em vez de sempre fotografar roupas colocando-as contra um fundo branco, considere fazer um flat-lay ou contratar modelos.
• Corte e fotografe de ângulos interessantes em vez de diretamente. Esta é uma ótima maneira de adicionar estilo e elegância às suas fotos.

Para mais dicas sobre como tirar fotos incríveis de produtos e estilos de vida, confira este guia DIY.

Personalização do tema

Agora que você escolheu o seu tema e tem um rolo inteiro de fotos de produtos para escolher, aí vem a parte divertida: transformar o site em algo exclusivamente seu.

Graças à conveniência que Shopify oferece, a personalização não requer nenhuma codificação de sua parte. Em vez disso, basta clicar em Configurações de tema e você encontrará várias maneiras de ajustar o estilo visual de sua loja.

Cores

No menu Cores, você pode alternar as cores de muitos dos elementos da sua loja, incluindo texto, botões e campos de formulário.

Dica profissional: para destacar sua call-to-action (CTA), considere torná-la uma cor mais ousada e brilhante que contraste com o restante da sua página.

Tipografia

Esta seção controla a aparência visual de todo o texto em sua loja. Você pode ajustar o tipo de fonte, o peso e a escala dos títulos versus o corpo do texto.

Favicon

Favicons são os pequenos ícones – normalmente um logotipo ou uma imagem simples associada a uma empresa – que aparecem na guia do seu navegador.

• Tem uma imagem apropriada? Uma vez carregado, Shopify irá redimensioná-lo automaticamente para 32 x 32px.
• Não tem um? Shopify tem toneladas de imagens gratuitas que você pode usar.

Elementos de check-out

Seu processo de checkout é a parte mais importante do seu site de comércio eletrônico. Sem uma experiência fantástica de checkout, você corre o risco de os compradores abandonarem seus carrinhos no meio da compra.

Para tornar seu checkout o mais simples possível, você pode personalizar:

• As cores para acentos, botões e erros
• Tipografia específica do checkout
• O padrão, a cor ou a imagem do plano de fundo das páginas de checkout e resumo do pedido

Estrutura do Menu

Embora a maioria dos temas pré-fabricados do Shopify venham com esses elementos-chave, você deve manter essas dicas em mente antes de lançar sua loja:

Barra de navegação

Uma barra de navegação fica na parte superior de cada página, permitindo que os compradores pulem entre as páginas rapidamente.

Dica profissional: facilite para os compradores encontrarem o que precisam sem sobrecarregá-los. Para manter a barra de navegação principal relativamente limpa e simples, você pode adicionar categorias e subcategorias como opções suspensas que ficam ocultas, a menos que passe o mouse.

Barra de avisos

Uma venda por tempo limitado? Atrasos no envio? Novo horário de funcionamento da loja? Quando você precisa promover informações essenciais que todos os compradores precisam saber, uma barra de anúncios (também conhecida como cabeçalho global) é a resposta.

A maioria dos temas do Shopify vem com barras de anúncios – você só precisa personalizá-los e ativá-los por meio do editor de temas do Shopify.

Dica profissional: certifique-se de que suas barras de anúncios sejam estilizadas da mesma maneira que seu site (pense em cores, fontes e CTAs da marca).

Rodapés

Os rodapés são uma das áreas mais subestimadas do seu site. Embora seja verdade que poucos compradores percorrerão toda a sua página inicial e chegarão ao rodapé, é um dos primeiros lugares que eles procurarão quando precisarem de acesso rápido às informações.

Para editar seu rodapé, você precisará acessar a página Navegação em Loja Online.

Dicas profissionais:

• Seu rodapé não deve ser apenas uma repetição das mesmas informações em sua barra de navegação. Em vez disso, adicione links importantes a páginas sobre envio, devoluções e trocas, privacidade do site, oportunidades de emprego e muito mais.
• Use ícones de mídia social como botões – isso reduzirá o palavreado em seu rodapé.
• Permita que os compradores se inscrevam para receber atualizações por e-mail ou SMS.
• Forneça links rápidos de atendimento ao cliente, como linhas diretas, “iniciar um bate-papo ao vivo” ou ajuda por e-mail.

Cabeçalho da página inicial

O cabeçalho da sua página inicial é a primeira coisa que os compradores veem quando chegam ao seu site. Cause uma excelente primeira impressão e eles rolarão para mais. Deixe de atraí-los e eles fecharão a guia. Com isso dito, o cabeçalho da sua página inicial deve:

• Forneça um instantâneo rápido do que é sua marca ou quais produtos você vende
• Promova um evento de vendas
• Demonstre a atitude e a identidade da sua marca
• Apresente seus principais produtos

Seja o cabeçalho da sua página inicial um vídeo, carrossel ou imagem estática, você deve tentar alterá-lo regularmente – você nunca quer que seu site pareça obsoleto ou desatualizado para clientes fiéis.

3 dicas para levar

Projetar sua loja Shopify pode ser muito divertido, mas também pode ficar fora de controle quando você começa a experimentar fontes, cores e widgets no que é essencialmente uma tela em branco. Para manter o processo de design da Shopify o mais gerenciável e sem dor de cabeça possível, aqui estão algumas dicas a serem lembradas:

1. Função sobre forma, sempre

Você pode ter um site bonito, mas se ele não fluir intuitivamente e oferecer uma jornada fantástica ao cliente, você verá as vendas estagnarem. Nós recomendamos:

• Concentrando-se no que você deseja realizar com seu site antes de iniciar o processo de design. Isso ajudará a restringir as ferramentas ou widgets de que você precisa e evitará a paralisia de escolha que provavelmente acontecerá na primeira vez que você visitar a App Store da Shopify.
• Implementar recursos úteis, como recomendações e filtros robustos, para permitir que os compradores limitem rapidamente a pesquisa de produtos.
• Priorizando a velocidade do site. Embora seja tentador adicionar uma tonelada de animações incríveis, aplicativos legais e imagens de alta resolução, quanto mais elementos você incluir, maior será o tempo de carregamento do seu site. Estudos descobriram que cada segundo extra que sua página leva para carregar pode reduzir as conversões em até 7% e as visualizações de página em 11%. Por outro lado, sites mais rápidos são recompensados ​​com classificações mais altas no Google.
• Compressão de imagens. Ferramentas gratuitas como compressor.io podem ajudá-lo a manter imagens de produtos de alta qualidade nítidas enquanto reduz o tamanho do arquivo.
• Escolher temas na Loja de temas da Shopify em vez de sites de terceiros. Como os temas de terceiros não passam pelo processo de avaliação da Shopify, alguns podem ter adições inesperadas no back-end que podem aumentar o tempo de carregamento.

Lembre-se: o lançamento da sua loja Shopify não é um processo único. Depois de lançar seu site e começar a ver as vendas chegarem, você deseja otimizar continuamente todas as páginas, desde reformular imagens de cabeçalho, reescrever textos de SEO ou atualizar imagens. Confie em nós: embora seja tedioso, ajudará a aumentar as conversões, atrair novos compradores e melhorar a experiência do cliente.

Dica profissional: não sabe como seu site está se saindo em termos de velocidade do site? Confira a ferramenta PageSpeed ​​Insights do Google — basta inserir sua URL e ela fornecerá insights e recomendações sobre melhorias na velocidade do site.

2. Mantenha seu site simples

É tentador exibir todos os produtos, imagens e cópias em seu arsenal, mas na maioria das vezes, isso só atrapalha a experiência do cliente. Você não quer sobrecarregar seu site com muitas informações – ninguém quer peneirar produtos em uma versão digital de um brechó bagunçado. Em vez disso, mantenha-o simples, concentre-se em seus best-sellers e corte a gordura sempre que possível (seja imagens, cópias, widgets, páginas ou até mesmo os próprios produtos).

3. Teste tudo

E se disséssemos que você pode aumentar as conversões simplesmente alterando esse botão de azul para vermelho? Embora você tenha lançado seu site com cores, imagens e gráficos específicos, não há como saber se eles estão funcionando bem. (Adoraríamos dar a você uma fórmula vencedora, mas a verdade é: as melhores práticas dependem dos clientes, produtos e nicho exclusivos de uma marca.)

É aqui que entra o teste A/B — um processo crucial para determinar o que tem melhor desempenho. (Para novos profissionais de marketing, aqui está um guia para todos os testes A/B.) Em vez de operar apenas por puro instinto, você deve testar A/B estes elementos de design de loja:

• Cores de botões diferentes
• Localizações de CTAs, widgets e imagens
• Barras de navegação
• Design de ícones de mídia social
• Estilo de imagem — por exemplo, imagem de produto versus estilo de vida
• Imagens ou texturas de fundo

Preciso de ajuda?

Embora a interface do Shopify facilite para profissionais de marketing e empreendedores fazerem o DIY de seus designs de loja, pode se tornar um processo demorado se você for um perfeccionista com uma ideia clara de como deseja que sua loja seja.

Ainda bem que não há problema em pedir ajuda! Shopify oferece uma variedade de recursos e centenas de especialistas em quem você pode confiar para cuidar de sua loja. Às vezes, é melhor aproveitar a experiência de um designer profissional em vez de percorrer as ervas daninhas sozinho.

Quanto a nós, o AdRoll apoia você quando se trata de fornecer marketing de alto nível para sua loja da Shopify. Se você estiver pronto para turbinar suas vendas, confira a integração do AdRoll para Shopify.