Como personalizar a aparência do AI Search

Há duas maneiras de personalizar os resultados de busca com IA da Shoply:

• Opções integradas: Comece com os controles no seu Console Administrativo da Shoply AI para alterar resumos, filtros, botões, cores e o layout dos produtos sem escrever código. Explore as opções integradas e as pré-visualizações.
• CSS personalizado: Se esses controles não oferecerem o design que você deseja, use CSS — a linguagem de estilização para páginas da web — para ajustar fontes, espaçamento, bordas e outros detalhes visuais. Você pode usá-lo junto com as configurações integradas. Ir para o guia de CSS.

Você provavelmente não precisa de CSS

A maioria das mudanças de layout e aparência da busca já está disponível em Customize AI Search no seu Console Administrativo da Shoply AI, independentemente de você usar Shopify ou outra plataforma de site. Experimente primeiro estas opções integradas e, em seguida, clique em Save no painel administrativo para aplicar suas escolhas. Use CSS para estilizações que esses controles não cobrem.

Os exemplos interativos abaixo usam as mesmas pré-visualizações do painel administrativo. Eles são ilustrações que você pode testar aqui; não alteram sua loja.

• Resumo com IA: Ative ou desative o resumo e escolha se ele aparece acima ou abaixo dos resultados de produtos.

• Filtros de busca: Mostre ou oculte a barra de filtros e posicione os filtros no topo, à esquerda ou em um painel flutuante. O layout à esquerda se move para acima dos resultados em telas menores. Veja as configurações de visibilidade dos filtros de busca para o efeito compartilhado nos resultados do chat.

• Botões de ação do produto e cores: Escolha Add to Cart, View Product ou No Button. Selecione as cores de fundo e de texto do botão e altere a cor das estrelas de avaliação para combinar com sua loja.

• Produtos por linha: Escolha três ou quatro colunas no desktop e uma ou duas colunas no celular. Menos colunas dão mais espaço para cada imagem de produto.

• Total de produtos exibidos: Defina contagens de produtos separadas para telas pequenas de celular, telas maiores de celular e desktop. O painel administrativo oferece 3, 4, 6, 8, 9, 12, 15, 16, 18 ou 20 produtos. Isso controla a quantidade de resultados, e não o número de colunas.

Se você ainda precisar de um design personalizado, continue com o guia de CSS abaixo.

Primeiros passos

Se as opções integradas não fornecerem a aparência que você deseja, use CSS personalizado para ajustar os resultados da busca.

Tanto o Shoply AI Chat quanto o AI Search podem exibir resultados de busca, portanto as opções de personalização em CSS que você adicionar serão aplicadas a ambos. Observação: o recurso AI Summary está disponível apenas no Shoply AI Search.

Primeiro, ative o AI Search antes de estilizar para poder visualizar as mudanças em resultados reais.

Onde adicionar seu CSS

Para ocultar toda a barra de filtros, use o controle integrado: vá para Customize AI Search → Search filters, desative Show filters in search results e clique em Save. Nenhum CSS é necessário. Veja Hide Search Filters  para mais detalhes.

1. Navegue até a seção Customize AI Search no console administrativo do aplicativo Shoply.
2. Encontre a área de texto CSS styles for search elements
3. Insira seu código CSS personalizado na área de texto
4. Clique em Save para aplicar suas alterações

Noções básicas de CSS

CSS permite alterar cores, fontes, espaçamento, bordas e muito mais. A sintaxe básica é:

.class-name {
    property: value;
}

Por exemplo, para mudar a cor do texto para vermelho escuro:

.shoply-product-name {
    color:rgb(82, 2, 2);
}

Entendendo as classes CSS específicas da Shoply

A Shoply fornece classes CSS específicas que você pode usar para segmentar diferentes partes dos seus resultados de busca. Cada classe corresponde a um elemento específico no resultado da busca.

A Shoply também definiu certos estilos padrão para essas classes. Você pode inspecionar esses estilos usando o Chrome DevTools  e pesquisar por cada uma das classes. Se precisar substituir os estilos padrão, adicione a declaração !important às suas regras CSS, como explicado na documentação do MDN sobre CSS !important .

Classes do cartão de produto

Estilos para o contêiner:

• .shoply-product-image - Estiliza a imagem do produto
• .shoply-product-card - Estiliza o contêiner do cartão de produto

Estilos para as informações de texto:

• .shoply-product-brand - Estiliza o nome da marca/fornecedor do produto exibido acima do título do produto
• .shoply-product-name - Estiliza o título/nome do produto

Estilos para preço:

• .shoply-product-price - Estiliza o preço do produto (após a aplicação do desconto)
• .shoply-product-original-price-before-discount - Estiliza o preço original antes do desconto (com decoração de tachado por padrão)
• .shoply-product-discount-percent - Estiliza o texto da porcentagem de desconto (exibido como texto vermelho em negrito por padrão)

Estilos para o botão de ação:

• .shoply-product-action-button - Estiliza os principais botões de ação (Add to Cart, View Product etc.)
• .shoply-product-action-button-sold-out - Estiliza o botão de ação quando o produto está esgotado (estado desabilitado)

Observação: na seção Customize AI Search do console administrativo do aplicativo Shoply, você pode configurar o que acontece quando os clientes clicam no botão de ação — eles podem adicionar o produto ao carrinho, ser redirecionados para a página do produto, ou você pode optar por ocultar completamente o botão de ação.

Classes do AI Summary

• .shoply-ai-summary-box - Estiliza a caixa contêiner dos resumos gerados por IA.
• .shoply-ai-summary-button - Estiliza o botão que aciona a geração do resumo com IA.

Exemplos de personalização de cartões de produto nos resultados de busca com CSS

Alterando o estilo da marca do produto

A marca do produto aparece acima do título do produto. Aqui estão 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;
}

Personalizando o título do produto

O nome do produto é um dos elementos mais importantes. Personalize-o para combinar com 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 de preços de produtos

Faça seus preços se destacarem com estilização personalizada:

/* 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;
}

Personalizando botões de ação

Seus botões de ação (Add to Cart, View Product) podem ser estilizados para combinar 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;
}

Estilizando imagens de produtos

Destaque suas imagens de produtos com bordas, sombras ou efeitos de hover:

/* 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 seção AI Summary

Para lojas que ativam o AI Search, o AI Summary aparecerá no topo dos resultados de busca e explicará instantaneamente o que comprar e por quê com base nos resultados da busca — antes mesmo de os clientes rolarem pelos produtos.

Você pode desativar o AI Summary na página Customize AI Search no console administrativo do aplicativo. Você também pode personalizar sua aparência usando CSS, como mostrado abaixo.

Estilizando a caixa do 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);
}

Personalizando o botão do AI Summary

Por padrão, o AI Summary é mantido curto e objetivo para economizar espaço na tela. Os clientes podem clicar no “AI Summary Button” para expandir e ver todos os detalhes. Quer fazer com que ele combine com sua marca? Você também pode personalizar esse botão! Confira 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);
}

Solução de problemas

Minhas alterações de CSS não estão aparecendo

1. Verifique erros de digitação: Certifique-se de que os nomes das suas classes CSS estejam escritos corretamente (eles começam com .shoply-)
2. Limpe o cache do navegador: Às vezes, os navegadores armazenam estilos antigos em cache
3. Verifique a sintaxe do CSS: Certifique-se de que todas as suas regras CSS estejam devidamente fechadas com }
4. Use !important: Se os estilos não estiverem sendo aplicados, talvez você precise adicionar !important para substituir os estilos padrão:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

Os estilos parecem diferentes no celular

Alguns estilos podem precisar de ajustes específicos para dispositivos móveis. Use media queries:

@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

Precisa restaurar os estilos padrão

Basta limpar a área de texto de CSS e salvar. O aplicativo voltará à estilização padrão.

Precisa de mais ajuda?

Se você precisar de ajuda adicional com a personalização em CSS:

1. Confira os exemplos visuais nas configurações do aplicativo (Product Card Preview e AI Summary Preview)
2. Consulte recursos de documentação sobre CSS, como o MDN Web Docs 
3. Entre em contato com nossa equipe de suporte para ajuda personalizada em customer-obsession@shoplyai.ai

Boa personalização! 🎨

Com essas classes CSS, você tem controle total sobre a aparência dos seus resultados de busca. Experimente, teste e crie uma experiência de busca que combine perfeitamente com sua marca!