Como personalizar os resultados da pesquisa com CSS
Pronto para dar um aspeto incrível aos seus resultados de pesquisa? Este guia mostra-lhe como estilizar os resultados da pesquisa de produtos e as secções de resumo de IA com CSS. Não se preocupe se ainda não conhece bem CSS — ajudamo-lo em todo o processo! E, se já se sente à vontade com CSS, encontrará muitas sugestões para levar a sua personalização ainda mais longe.
Como começar
Tanto o Shoply AI Chat como o AI Search podem apresentar resultados de pesquisa, por isso as opções de personalização CSS que adicionar serão aplicadas a ambos. Nota: a funcionalidade AI Summary só está disponível no Shoply AI Search.
Onde adicionar o seu CSS
- Aceda à secção Customize AI Search na consola de administração da aplicação Shoply.
- Procure a área de texto CSS styles for search elements
- Introduza o seu código CSS personalizado na área de texto
- Clique em Save para aplicar as alterações
Noções básicas de CSS
O CSS permite alterar cores, tipos de letra, espaçamento, margens e muito mais. A sintaxe básica é:
.class-name {
property: value;
}Por exemplo, para alterar a cor do texto para vermelho escuro:
.shoply-product-name {
color:rgb(82, 2, 2);
}Compreender as classes CSS específicas do Shoply
O Shoply disponibiliza classes CSS específicas que pode utilizar para selecionar diferentes partes dos seus resultados de pesquisa. Cada classe corresponde a um elemento específico do resultado da pesquisa.
O Shoply também definiu determinados estilos predefinidos para estas classes. Pode inspecionar esses estilos utilizando as Chrome DevTools e procurar cada uma das classes. Se precisar de substituir os estilos predefinidos, adicione a declaração !important às suas regras CSS, conforme explicado na documentação MDN sobre CSS !important .
Classes dos cartões de produto
Estilos para o contentor:
.shoply-product-image- Define o estilo da imagem do produto.shoply-product-card- Define o estilo do contentor do cartão de produto
Estilos para as informações de texto:
.shoply-product-brand- Define o estilo do nome da marca/fornecedor do produto apresentado acima do título do produto.shoply-product-name- Define o estilo do título/nome do produto
Estilos para o preço:
.shoply-product-price- Define o estilo do preço do produto (depois de aplicado o desconto).shoply-product-original-price-before-discount- Define o estilo do preço original antes do desconto (com decoração de rasurado por predefinição).shoply-product-discount-percent- Define o estilo do texto da percentagem de desconto (apresentado a negrito e a vermelho por predefinição)
Estilos para o botão de ação:
.shoply-product-action-button- Define o estilo dos botões de ação principais (Adicionar ao carrinho, Ver produto, etc.).shoply-product-action-button-sold-out- Define o estilo do botão de ação quando o produto está esgotado (estado desativado)
Nota: na secção Customize AI Search da consola de administração da aplicação Shoply, pode configurar o que acontece quando os clientes clicam no botão de ação — podem adicionar o produto ao carrinho, ser redirecionados para a página do produto ou pode optar por ocultar totalmente o botão de ação.
Classes do AI Summary
.shoply-ai-summary-box- Define o estilo do contentor dos resumos gerados por IA..shoply-ai-summary-button- Define o estilo do botão que inicia a geração do resumo de IA.
Exemplos de personalização dos cartões de produto nos resultados da pesquisa com CSS
Alterar o estilo da marca do produto
A marca do produto aparece acima do título do produto. Eis algumas personalizações comuns:
/* Make brand name smaller and gray */
.shoply-product-brand {
font-size: 11px;
color: #888888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}Personalizar o título do produto
O nome do produto é um dos elementos mais importantes. Personalize-o para o adaptar à sua marca:
/* Make product title bold and larger */
.shoply-product-name {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 8px;
}
/* Add hover effect */
.shoply-product-name:hover {
color: #0066cc;
text-decoration: underline;
}Exemplos de estilização dos preços dos produtos
Faça com que os seus preços se destaquem com um estilo personalizado:
/* Style the current price (after discount) */
.shoply-product-price {
font-size: 20px;
font-weight: 700;
color: #e74c3c;
margin-top: 10px;
}
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
font-size: 14px;
color: #999999;
margin-left: 8px;
text-decoration: line-through;
}Personalizar os botões de ação
Os seus botões de ação (Adicionar ao carrinho, Ver produto) podem ser estilizados de acordo com o design da sua loja:
/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
background-color: #0066cc !important;
color: #ffffff !important;
border-radius: 6px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: none;
}
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
background-color: #0052a3 !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
background-color: #cccccc !important;
color: #666666 !important;
cursor: not-allowed;
opacity: 0.6;
}Estilizar as imagens dos produtos
Melhore as suas imagens de produto com bordas, sombras ou efeitos ao passar o cursor:
/* Add border and shadow to product images */
.shoply-product-image {
border-radius: 8px;
border: 2px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Add hover effect of the product image*/
.shoply-product-image:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}Exemplos de personalização da secção AI Summary
Nas lojas que ativam o AI Search, o AI Summary aparece no topo dos resultados da pesquisa e explica instantaneamente o que comprar e porquê, com base nos resultados da pesquisa — antes mesmo de os clientes percorrerem os produtos.
Pode desativar o AI Summary na página Customize AI Search da consola de administração da aplicação. Também pode personalizar o seu aspeto utilizando CSS, como mostrado abaixo.
Estilizar a caixa AI Summary
/* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}Personalizar o botão AI Summary
Por predefinição, o AI Summary é mantido curto e direto para poupar espaço no ecrã. Os clientes podem clicar no “AI Summary Button” para expandir e ver todos os detalhes. Quer adaptá-lo à sua marca? Também pode personalizar este botão! Veja os exemplos abaixo.
/* Customize the summary button */
.shoply-ai-summary-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: #ffffff !important;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
/* Add hover effect */
.shoply-ai-summary-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}Resolução de problemas
As minhas alterações de CSS não aparecem
- Procure erros de digitação: certifique-se de que os nomes das classes CSS estão escritos corretamente (começam por
.shoply-) - Limpe a cache do navegador: por vezes, os navegadores guardam estilos antigos em cache
- Verifique a sintaxe CSS: certifique-se de que todas as suas regras CSS estão devidamente fechadas com
} - Utilize
!important: se os estilos não estiverem a ser aplicados, poderá ter de adicionar!importantpara substituir os estilos predefinidos:css.shoply-product-action-button { background-color: #ff0000 !important; }
Os estilos parecem diferentes no telemóvel
Alguns estilos podem precisar de ajustes específicos para dispositivos móveis. Utilize media queries:
@media (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}Precisa de repor os estilos predefinidos
Basta limpar a área de texto CSS e guardar. A aplicação reverterá para o estilo predefinido.
Precisa de mais ajuda?
Se precisar de assistência adicional com a personalização CSS:
- Consulte os exemplos visuais nas definições da aplicação (pré-visualização do cartão de produto e pré-visualização do AI Summary)
- Consulte recursos de documentação CSS, como a MDN Web Docs
- Contacte a nossa equipa de suporte para obter ajuda personalizada através de customer-obsession@shoplyai.ai
Boa personalização! 🎨
Com estas classes CSS, tem controlo total sobre o aspeto dos seus resultados de pesquisa. Experimente, teste e crie uma experiência de pesquisa que corresponda perfeitamente à sua marca!