Analisamos um dos temas Shopify mais populares para marcas de luxo para entender por que ele funciona tão bem para produtos premium e quais pontos observar ao personalizá-lo para a sua marca.
Maestrooo, um estúdio francês de design e desenvolvimento
O Prestige tem um design limpo e minimalista. Ele coloca imagens de produto e imagens editoriais em primeiro plano e conta com animações sutis que dão ao tema uma sensação sofisticada.
É um sistema de design que simplesmente funciona e exige o mínimo de esforço para ficar bonito.
A partir da versão 8.0.0, o Prestige adicionou suporte aos esquemas de cores da Shopify. Esse recurso permite definir até 21 esquemas de cores, que são essencialmente conjuntos de cores, e aplicá-los facilmente a diferentes seções do tema.
As configurações de tipografia do tema também são simples, mas receberam recentemente alguns ajustes extras bastante solicitados por lojistas. Por exemplo, agora é possível definir o espaçamento entre letras para títulos, texto do corpo e botões, além de escolher qual fonte será usada nos botões, em vez de eles seguirem automaticamente a fonte dos títulos.
O tema vem com três presets, cada um adicionando uma abordagem diferente ao sistema de design do Prestige e mostrando o que é possível alcançar em diferentes tipos de estética.
“Allure” é o mais tradicional dos três, com fundo cinza-claro e títulos em letras maiúsculas.
“Couture” tem uma sensação um pouco mais moderna e arejada.
“Vogue” demonstra como é possível ousar um pouco mais na paleta de cores, com seus botões em dourado-claro.
Além dos componentes e seções comuns que você espera de um tema Shopify premium, como barra de anúncios, slideshow e produto em destaque, também existem várias seções que tornam o Prestige especialmente adequado para marcas de luxo.
Um mega menu é um menu expansível que exibe todas as opções de uma determinada categoria, em vez de obrigar o usuário a navegar por um menu suspenso tradicional em camadas.
Ele é especialmente eficaz para sites maiores, com muitas categorias, pois permite que os usuários escaneiem rapidamente textos e imagens.
No exemplo acima, vemos um menu de três níveis que exigiria a seguinte configuração no painel da Shopify:
O Prestige permite criar quantos mega menus você quiser; basta especificar no Personalizador a qual link de navegação de nível superior ele deve estar vinculado, e ele substituirá o formato padrão de menu suspenso.
O Prestige também permite adicionar até dois blocos “Image push”, nos quais você pode destacar qualquer imagem e texto que desejar. Eles são ótimos para chamar atenção para novos produtos, coleções ou outro destaque.
Outro recurso interessante é que o tema permite selecionar um menu exclusivo para mobile, chamado “Sidebar menu” no Personalizador, o que é útil se você estiver usando mega menus, já que eles podem não funcionar tão bem em telas compactas.
A partir da versão 7.0.0, é possível escolher entre 6 layouts diferentes para a galeria de produtos no desktop.
O layout padrão Grid, 1 por linha, é uma elegante apresentação vertical de imagens que se revela conforme o usuário rola a página, permitindo que os clientes descubram imagens adicionais com facilidade. Isso é importante porque pesquisas mostram que muitos usuários passam direto por slideshows, perdendo qualquer conteúdo que não esteja exibido no primeiro slide.
No mobile, o slideshow se torna uma experiência tradicional de deslizar horizontalmente, mas com menos elementos na tela e com pontos de paginação e setas indicando claramente que é interativo e para qual direção deslizar. Por isso, consideramos essa uma abordagem forte para usuários mobile.
A seção “Shop the look” permite transformar imagens em estilo editorial em imagens compráveis.
Ela pode ser usada como uma seção única ou como um slideshow com até quatro looks compráveis. Para cada look, basta enviar a imagem e adicionar até três pontos de produto.
A seção “Timeline” é ótima para contar a história da marca. Marcas de luxo são construídas sobre sua herança, as histórias das mulheres e homens por trás delas, suas inspirações e musas encontradas ao longo do caminho. Essa seção oferece uma estrutura organizada para contar essas histórias.
O recurso “Produtos vistos recentemente” é poderoso e muito comum em grandes sites de e-commerce. Ele mantém a atenção dos clientes nos produtos que eles visualizaram, e portanto demonstraram interesse, além de remover atritos quando eles decidem comprar, já que o produto fica a apenas um clique de distância.
Observe que, a partir da versão 9.0.0, o tema oferece suporte completo ao futuro recurso nativo de amostras de cores da Shopify. Até que ele seja totalmente disponibilizado para todos os lojistas, no entanto, você pode seguir as instruções de configuração manual do Prestige abaixo. Ainda assim, vale acompanhar as atualizações do recurso nativo de amostras, pois ele tornará a configuração ainda mais simples.
Quando ativada, a funcionalidade legada converte o seletor de variantes padrão em amostras de cores. Isso é muito útil para produtos com várias cores, texturas ou acabamentos.
Para ativar as amostras na página de produto:
O Prestige permite que os lojistas exibam tanto cores sólidas quanto pequenas imagens que representem a textura ou o acabamento.
Por padrão, o Prestige analisa o nome da cor da variante e exibe a cor CSS correspondente. Portanto, se a variante for “Green”, ele exibirá esse verde.
Se essas cores padrão não corresponderem à cor real do produto, você pode adicionar cores personalizadas para cada nome de cor. Abra as configurações do tema, procure pela configuração Color swatch e adicione cada cor personalizada em uma linha separada.
A sintaxe para cada nome de cor é a seguinte:
Pink: #7A7CBAComo alternativa, se uma cor sólida não representar o produto com precisão, você pode enviar pequenas imagens PNG para o seu tema.
O nome do arquivo deve estar em letras minúsculas, corresponder exatamente ao nome da opção e os espaços devem ser convertidos em hífens. Aqui estão as instruções completas.
Quando se trata de cores, não hesite em pedir a opinião de outras pessoas — sempre nos surpreendemos com o quanto percebemos cores de formas diferentes!
Também na página de produto, há o bloco de produtos complementares.
Essa funcionalidade permite exibir até 10 produtos complementares diretamente na página do produto. Ela é alimentada pelo aplicativo Shopify Search & Discovery.
As opções incluem o local de exibição no desktop, abaixo da galeria ou abaixo do restante do formulário do produto à direita, além da possibilidade de empilhar os produtos em vez de exibi-los em um slideshow.
O bloco de estoque do produto disponível na página de produto também é excelente para produtos premium, já que eles geralmente são produzidos em volumes menores, e essa sensação de escassez pode aumentar bastante o desejo pelo produto.
Essa é uma ótima seção adicionada na versão 7.0.0. Ela permite exibir um contador regressivo para um evento específico que você deseja promover e em torno do qual deseja criar expectativa.
As configurações da seção permitem até escolher o que acontece quando o contador chega a zero: deixar o contador zerado ou ocultar completamente a seção.
A equipe por trás do Prestige também se esforçou para tornar essa seção o mais acessível possível, ocultando o contador em si dos leitores de tela e fornecendo um aria-label que informa explicitamente quando a oferta expira.
Essa seção, adicionada na versão 7.0.0, oferece outra forma de contar a história da sua marca. Conforme o cliente rola a página, o texto sobe elegantemente e a imagem correspondente aparece com um efeito suave.
As configurações permitem escolher uma imagem de fundo ou manter apenas uma cor sólida.
Essa é uma seção introduzida na versão 7.0.0 que permite exibir um letreiro em rolagem. O que diferencia essa seção de outros temas como o Prestige é que também é possível adicionar imagens dentro do conteúdo em rolagem.
Embora tenham sido feitos esforços para tornar essa seção acessível, adicionando aria-hidden="true" a cada um dos blocos de conteúdo clonados para que não sejam lidos várias vezes por leitores de tela, ainda há melhorias possíveis, pois gostaríamos que os usuários pudessem interagir com a seção e pausá-la.
Após nosso feedback, a equipe da Maestrooo nos informou que isso será resolvido na próxima versão 9.3.0. Eles também garantirão que a seção não role automaticamente quando o cliente tiver ativado a preferência de movimento reduzido.
Essa seção também foi uma adição muito bem-vinda na versão 7.0.0. Muitas vezes nos víamos programando algo assim sob medida para nossos clientes, já que é um elemento de design muito comum.
Na captura de tela acima, a seção é usada para criar o que chamamos de “banner de confiança”. Geralmente localizado logo acima do rodapé, ele serve para informar de forma objetiva os compradores sobre políticas favoráveis ao cliente e eliminar dúvidas que possam impedir a compra. Se os clientes sabem sobre prazos rápidos de entrega, política flexível de devolução e que a equipe de atendimento está disponível caso tenham algum problema, eles ficam muito mais propensos a converter.
No entanto, a seção também pode ser usada para criar qualquer bloco que exija até 5 colunas de imagens com texto, por exemplo, etapas de processos, como uma seção “Como funciona”.
O Prestige possui uma funcionalidade nativa de “pop-up” que permite aos lojistas exibir texto e/ou um formulário de inscrição na newsletter.
Observe que esse formulário de newsletter, por padrão, cria o cliente no painel da Shopify com os atributos relevantes de Accepts Marketing. Ele também adiciona uma tag de newsletter a esses clientes. Depois, você pode sincronizar sua lista de assinantes com sua plataforma de e-mail marketing. Aqui estão as instruções para o Klaviyo.
O que é ótimo nesse pop-up é que ele não é intrusivo, especialmente no desktop, e é bastante claro como fechá-lo, o que é positivo para a experiência do cliente.
Dito isso, é importante observar que mecanismos de busca podem penalizar pop-ups intrusivos no mobile, especialmente quando o pop-up é exibido permanentemente e/ou para todos os visitantes. Aqui está um vídeo de perguntas e respostas de John Mueller, do Google, sobre o tema.
Felizmente, o Prestige oferece configurações para escolher onde e quando exibir o pop-up, mas sempre aconselhamos os lojistas a usarem pop-ups com cuidado e garantirem que eles realmente melhorem a experiência do cliente.
Um produto de luxo fala por si mesmo por meio de sua beleza e seu trabalho artesanal — não há necessidade de falar por cima dele.
Em uma nota relacionada, vendas de luxo têm tudo a ver com uma abordagem de “venda suave”. Um produto de luxo fala por si mesmo por meio de sua beleza e seu trabalho artesanal — não há necessidade de falar por cima dele. Pop-ups e chamadas exageradas podem prejudicar a imagem da marca, por isso recomendamos cautela extra para marcas que atendem clientes de alto padrão.
A cada versão do Prestige, a equipe da Maestrooo tem feito grandes avanços em termos de excelência técnica e desempenho.
Sites Shopify podem ficar lentos por diversos motivos, desde aplicativos até pixels do Facebook e muitos outros elementos.
Felizmente, a Shopify cuida de alguns fatores importantes para nós: ela utiliza cache do navegador, oferece uma rede de distribuição de conteúdo de alto nível e ativa minificação automática de CSS e JavaScript, compressão Gzip e compressão JPG para todos os lojistas.
Mas há muito mais fatores que impactam o desempenho de um site. Como avaliar o Prestige em meio a todas essas variáveis?
Liquid é a linguagem de template usada nos temas da Shopify. Ela cria uma ponte entre os modelos do tema e os dados da loja Shopify, permitindo que conteúdo dinâmico seja inserido na página.
Um Liquid mal escrito, com excesso de loops e condicionais, pode impactar o tempo necessário para renderizar o Liquid. Uma boa ferramenta para avaliar a qualidade do código é o Shopify Theme Inspector, que permite medir o tempo total de renderização do Liquid em uma determinada página.
Comparamos o Dawn, tema próprio da Shopify para Online Store 2.0, ao preset Allure do Prestige, sem nenhum conteúdo adicionado além das seções e blocos padrão, e descobrimos que o tempo médio total de renderização do Liquid foi, na verdade, mais rápido no Prestige: o tempo médio de carregamento foi de 155 ms, contra 177 ms no Dawn.
É claro que essa métrica depende muito do tipo de seções e blocos em uso, e também varia ligeiramente a cada análise, já que a renderização depende dos servidores da Shopify. Para chegar o mais perto possível de um teste justo, e porque gostamos de nos imaginar como cientistas de poltrona, realizamos três medições por página principal e calculamos a média.
Quando se trata de baixo desempenho, as imagens costumam ser as maiores culpadas. Embora o Prestige não possa impedir que você envie uma imagem enorme e superdimensionada, ainda que a Shopify reclame ao atingir 20 MB, ele conta com boas precauções para otimizar o desempenho.
Por exemplo, ele usa troca de resolução, permitindo que o navegador escolha diferentes tamanhos de imagem dependendo da largura da tela.
O tema também fornece tamanhos de imagem recomendados no Personalizador para lembrar gentilmente o lojista de enviar uma imagem grande o suficiente, mas não tão grande a ponto de deixar tudo mais lento.
Por padrão, recursos como folhas de estilo e scripts, especialmente aqueles carregados no cabeçalho do documento, atrasam a renderização da página enquanto estão sendo baixados. No entanto, muitos recursos não são realmente críticos e podem ser baixados de forma assíncrona.
O Prestige faz um bom trabalho ao carregar scripts não críticos de forma assíncrona, porém o CSS do tema é carregado em um único arquivo de forma síncrona. Conversamos com a Maestrooo sobre essa abordagem e eles nos convenceram: eles realizaram experimentos com carregamento assíncrono e isso teve um impacto significativo no Cumulative Layout Shift, uma métrica estável dos Core Web Vitals que mede a estabilidade visual de uma página. Em vez disso, eles estão focando em manter o CSS o menor e mais eficiente possível, e com menos de 27 kb, temos que concordar.
A partir da versão 9.2.0, uma nova configuração foi adicionada à seção Slideshow, permitindo ativar ou desativar a transição inicial. Isso foi introduzido após um dos testes da equipe, no qual eles descobriram que desativar essa transição inicial reduziu o Largest Contentful Paint, outra métrica dos Core Web Vitals que mede a velocidade percebida de carregamento, em 40%.
Com base nessa descoberta, a transição inicial será desativada por padrão a partir da versão 9.3.0, embora os lojistas ainda possam ativá-la se preferirem priorizar animações em vez de desempenho.
O Prestige oferece uma base sólida em termos de desempenho, mas o restante realmente depende de cada lojista. Aqui estão algumas dicas para manter o desempenho da sua loja Shopify após o lançamento:
A equipe da Maestrooo tem feito grandes esforços para garantir que o conteúdo principal possa ser navegado confortavelmente apenas com leitor de tela ou teclado.
Por exemplo, é possível acessar todo o conteúdo dos menus suspensos e mega menus no cabeçalho, e o foco é visível e lógico. A página de produto pode ser navegada e utilizada apenas com o teclado. Eles também adicionaram rótulos exclusivos para leitores de tela quando é necessário fornecer contexto adicional, como nos seletores de idioma.
Desde que este artigo foi publicado pela primeira vez, também vimos algumas melhorias importantes que inicialmente havíamos apontado:
Ainda existem alguns pontos a melhorar: a seção de imagem Before/after não parece ser acessível, pois não é possível acessar ou manipular o botão deslizante apenas com o teclado, e também gostaríamos de ver algumas mudanças na seção Scrolling content.
No entanto, após este artigo, a equipe por trás do Prestige nos informou que a seção Before/after image será controlável apenas pelo teclado na próxima versão 9.3.0.
Progressive enhancement é a prática de construir sites usando as tecnologias mais básicas da web para que eles funcionem para o maior número possível de usuários. Tecnologias mais novas podem, naturalmente, ser usadas para melhorar a experiência, mas a funcionalidade básica de um site deve funcionar sem elas.
Um exemplo disso é garantir que um site funcione sem JavaScript, uma linguagem de programação usada para criar funcionalidades dinâmicas em sites, como abrir e fechar um menu mobile ou buscar e exibir dados de outro lugar.
Historicamente, isso tem sido importante para temas Shopify, e os desenvolvedores eram incentivados a criar alternativas para garantir que usuários com JavaScript desativado pudessem pelo menos realizar tarefas essenciais no site, como interagir com a navegação e adicionar produtos ao carrinho.
No entanto, desde março de 2024 houve uma mudança de paradigma na Shopify, impulsionada pelo fato de que Checkout Extensibility, o checkout atualizado da Shopify, exige JavaScript. Também ouvimos que vários novos recursos da Shopify, como Combined Listings, dependerão da section API para funcionar corretamente.
A Maestrooo sempre fez um ótimo trabalho ao garantir que a maior parte da funcionalidade do Prestige esteja disponível para usuários com JavaScript desativado: os produtos podem ser descobertos, adicionados ao carrinho e comprados.
E, apesar das mudanças recentes na Shopify, eles nos disseram que continuarão fazendo isso sempre que possível. Como Michaël Gallego, cofundador da Maestrooo, nos explicou: “Descobri que garantir que tudo funcione sem JS obriga a usar o máximo possível de recursos nativos e, portanto, melhora o desempenho”.
O Prestige é um tema de alta qualidade que permite que marcas de luxo apresentem seus produtos e contem sua história de forma rápida e fácil.
Ele é particularmente eficaz para marcas que possuem imagens impressionantes em alta resolução, oferecendo um palco elegante e bem construído para que os produtos falem por si mesmos.
O tema é bem desenvolvido e continua sendo aprimorado constantemente. A equipe por trás dele claramente se importa com qualidade, entende de boas práticas e tem sido muito receptiva a alguns pontos de melhoria que destacamos no passado.
É um tema popular, então dê a ele o seu próprio toque para se destacar, ou use-o como uma base sólida para o seu próprio design personalizado.