Adicionar Comentários aos Sites Shopify
FastComments está disponível na Shopify App Store. Instale o aplicativo e adicione blocos do FastComments em qualquer postagem de blog, página de produto ou página personalizada pelo editor de temas da Shopify. Não é necessário editar código.
Ao instalar o aplicativo, a Shopify provisiona sua conta FastComments, configura o domínio da sua loja e conecta o faturamento automaticamente. Você não precisa se cadastrar separadamente em fastcomments.com.
As páginas deste guia cobrem cada bloco do FastComments que o aplicativo fornece, como o single sign-on funciona para seus clientes da Shopify e como importar comentários existentes do Shopify antes de migrar.
Instalar o Aplicativo FastComments 
Instalar pela Shopify App Store
- Abra a listagem do FastComments na Shopify App Store.
- Clique em Adicionar app e escolha o plano que você deseja durante o fluxo de instalação.
- O Shopify redireciona você de volta para o admin do FastComments dentro do Shopify quando a instalação for concluída.
Isso conclui a instalação. Não há nada para colar nos arquivos do seu tema.
O que é configurado para você
A instalação executa tudo o que você faria manualmente:
- Um tenant do FastComments é criado para sua loja e vinculado ao domínio da sua loja.
- A URL da sua loja é adicionada aos domínios autorizados do tenant, para que os comentários carreguem sem erro de domínio.
- Um metafield de loja
fastcomments.tenant_idé escrito para que cada bloco saiba contra qual tenant renderizar. - O login único (single sign-on) para seus clientes da Shopify é ativado por padrão.
- A cobrança é feita pelo Shopify Managed Pricing. As cobranças aparecem na sua fatura regular do Shopify. Faça upgrade, downgrade ou cancele em Settings > Apps and sales channels > FastComments no admin do Shopify.
Se sua loja já era cliente do FastComments antes de você instalar o app, a instalação reutiliza o tenant existente em vez de criar um novo.
O painel administrativo incorporado
Ao abrir o app FastComments a partir do seu admin do Shopify, você chega a um painel com blocos de um clique que levam ao backend completo do FastComments:
- Painel: configurações da conta, uso e detalhes da assinatura.
- Fila de moderação: aprovar, rejeitar e responder comentários em toda a sua loja.
- Personalizar: ajustar cores do widget, fontes, regras de moderação e configuração.
- Ratings & Reviews Helper: configurar avaliações por estrelas e perguntas de review se desejar usar o bloco Reviews Summary.
Cada bloco abre o FastComments com um link de login de uso único, portanto você não precisa de um login separado.
Próximo: adicione blocos à sua loja
Abra o editor de temas do Shopify (Online Store > Themes > Customize), abra o template ao qual você quer adicionar comentários ou avaliações, e clique em Adicionar bloco. Os blocos do FastComments aparecem em Apps. O restante deste guia aborda cada um deles.
Adicionar Comentários a Posts de Blog e Produtos
O bloco FastComments é o widget principal de comentários. Adicione-o a templates de posts de blog, templates de produtos ou qualquer outra página onde você queira um tópico de discussão ou um chat ao vivo.
Adicionar o bloco
- Abra o editor de temas da Shopify (Online Store > Themes > Customize).
- Escolha o template onde você quer comentários: Blog post, Product ou qualquer outro template de página ou seção.
- Na seção onde você quer que os comentários apareçam, clique em Add block.
- Em Apps, selecione FastComments.
- Clique em Save.
O bloco aparece imediatamente. Não há Tenant ID para inserir; o tenant da sua loja é configurado automaticamente quando você instala o app.
Configurações
| Configuração | O que faz | Padrão |
|---|---|---|
| Tenant ID (opcional) | Substitui contra qual tenant do FastComments o bloco será renderizado. Deixe em branco para usar o tenant configurado automaticamente da loja. Encontre um tenant ID manual em fastcomments.com/auth/my-account/api-secret. | (em branco) |
| SSO | Faz login automático do visitante com a conta de cliente Shopify dele antes de comentar. Veja Auto-Login Shopify Customers. | On |
| Commenting Style | Threaded para respostas aninhadas e votos, ou Streaming para um feed de chat em tempo real. | Threaded |
| Custom URL ID | Substitui o identificador de página detectado automaticamente. Use isso quando quiser que duas URLs compartilhem o mesmo tópico de comentários. | (detectado automaticamente) |
Como o identificador de página é escolhido
Cada tópico de comentários é identificado por um URL ID. O bloco escolhe um automaticamente:
- Template de post de blog:
shopify-article-{article.id}, que é estável mesmo com mudanças de slug e título. - Template de produto:
shopify-product-{product.id}, que é estável mesmo com mudanças de slug e título. - Outros templates: o caminho da requisição.
Se você definir Custom URL ID, esse valor será usado em vez disso. Use o mesmo Custom URL ID em vários blocos (por exemplo, em uma variante localizada de uma página de produto) para compartilhar um único tópico de comentários.
Threaded vs Streaming
Threaded é o padrão. Os visitantes respondem uns aos outros, votam, e as ferramentas de moderação funcionam como esperado. Ideal para posts de blog e avaliações de produtos.
Streaming elimina o encadeamento e mostra novos comentários em tempo real conforme são publicados, como um feed de chat. Ideal para lançamentos de produtos, eventos ao vivo e páginas de comunidade.
Vários blocos na mesma página
O bloco pode ser adicionado mais de uma vez ao mesmo template. Por exemplo, um Resumo de Avaliações no topo de uma página de produto e um bloco FastComments na parte inferior. Os blocos compartilham um URL ID, então o resumo reflete os comentários abaixo.
Dicas
- O bloco se oculta na pré-visualização do editor de temas com um aviso amarelo se não conseguir encontrar um tenant. Se isso aparecer na sua loja ao vivo, reinstale o app FastComments.
- Para uma página de produto, o bloco FastComments também funciona como seu widget de avaliações de produto. Combine-o com FastComments - Reviews Summary para um resumo com classificação por estrelas no topo da página.
Adicionar um Badge de Contagem de Comentários
O bloco FastComments - Comment Count exibe uma pequena contagem de comentários para uma única página. Use-o em listas de posts de blog, cartões de produtos ou qualquer template que linka para uma página com comentários, para que os visitantes possam ver o quão ativo cada thread está antes de clicar.
Adicionar o bloco
- Abra o editor de temas da Shopify.
- Abra o template onde deseja que a contagem apareça. Por exemplo, o template Blog (a lista de posts) ou uma seção de listagem de produtos.
- Clique em Add block na seção que renderiza cada item.
- Em Apps, selecione FastComments - Comment Count.
- Clique em Save.
Configurações
| Configuração | O que faz | Padrão |
|---|---|---|
| Tenant ID (opcional) | Sobrescreve de qual tenant do FastComments a contagem lê. Deixe em branco para usar o tenant configurado automaticamente da loja. | (em branco) |
| Custom URL ID | Sobrescreve o identificador de página que a contagem busca. Use isso quando a contagem estiver em uma página diferente do bloco FastComments que ela rastreia. | (detectado automaticamente) |
Como a contagem corresponde ao thread de comentários
O bloco Comment Count usa a mesma lógica de detecção automática do bloco FastComments:
- Template de post de blog:
shopify-article-{article.id} - Template de produto:
shopify-product-{product.id} - Outros templates: o caminho da requisição
Se você definir um Custom URL ID no bloco FastComments em uma página, defina o mesmo Custom URL ID no bloco Comment Count para que apontem para o mesmo thread.
Dicas
- As contagens de todos os itens da página são buscadas em uma única requisição, então adicionar o bloco a cada item em uma lista longa não tem custo extra de ida e volta.
- Um bloco Comment Count por artigo ou produto em uma listagem é o uso esperado; o bloco pode ser adicionado quantas vezes você precisar.
Adicionar um Feed de Comentários Recentes
O bloco FastComments - Recent Comments exibe os comentários mais recentes de toda a sua loja. Use-o para mostrar atividade recente em uma barra lateral, rodapé ou seção da página inicial.
Adicionar o bloco
- Abra o editor de temas da Shopify.
- Abra o template onde deseja exibir o feed. Uma seção de barra lateral, a página inicial ou o índice do blog funcionam bem.
- Clique em Add block na seção que deve contê-lo.
- Em Apps, selecione FastComments - Recent Comments.
- Clique em Save.
Configurações
| Configuração | O que faz | Padrão |
|---|---|---|
| Tenant ID (opcional) | Substitui de qual tenant do FastComments o feed lê. Deixe em branco para usar o tenant configurado automaticamente da loja. | (em branco) |
| Number of comments | Quantos comentários recentes exibir. Faixa de 1 a 50. | 5 |
Dicas
- Cada comentário contém um link para a página onde foi postado, então o bloco também funciona como uma dica de navegação do tipo "sobre o que as pessoas estão falando agora".
- O feed abrange toda a loja. Para exibir comentários recentes de uma única página, use o bloco FastComments nessa página.
Adicionar um Feed de Discussões Recentes
O bloco FastComments - Discussões Recentes lista as páginas da sua loja com a atividade de comentários mais recente, uma entrada por página. Use-o quando quiser que os visitantes descubram tópicos ativos em vez de comentários individuais.
Adicionar o bloco
- Abra o editor de temas do Shopify.
- Abra o template onde você quer o feed, como uma barra lateral, rodapé, índice de blog ou seção da página inicial.
- Clique em Adicionar bloco na seção que deve contê-lo.
- Em Apps, selecione FastComments - Discussões Recentes.
- Clique em Salvar.
Configurações
| Configuração | O que faz | Padrão |
|---|---|---|
| Tenant ID (opcional) | Substitui de qual tenant do FastComments o feed lê. Deixe em branco para usar o tenant configurado automaticamente pela loja. | (em branco) |
| Número de comentários | Quantas discussões recentes mostrar. Intervalo de 1 a 50. | 20 |
Discussões Recentes vs Comentários Recentes
Ambos os blocos puxam dos mesmos dados, mas mostram visões diferentes:
- Comentários Recentes: uma lista plana dos comentários individuais mais recentes. Melhor para "o que foi dito agora".
- Discussões Recentes: uma entrada por página, ordenada pela atividade mais recente. Melhor para "quais tópicos estão vivos agora".
Você pode usar os dois na mesma loja. Por exemplo, Comentários Recentes na barra lateral do blog e Discussões Recentes na página inicial.
Adicionar uma Lista de Páginas Principais
O bloco FastComments - Top Pages lista as páginas da sua loja com maior atividade de comentários no geral. Use-o para destacar suas postagens ou produtos mais comentados.
Adicionar o bloco
- Abra o editor de tema da Shopify.
- Abra o template onde deseja a lista, como uma barra lateral, rodapé ou seção de índice do blog.
- Clique em Add block na seção que deve contê-lo.
- Em Apps, selecione FastComments - Top Pages.
- Clique em Save.
Configurações
| Configuração | O que faz | Padrão |
|---|---|---|
| Tenant ID (opcional) | Substitui de qual tenant do FastComments a lista lê. Deixe em branco para usar o tenant configurado automaticamente da loja. | (em branco) |
Top Pages vs Recent Discussions
- Top Pages classifica pelo engajamento total, então as mesmas postagens tendem a permanecer no topo por um tempo. Bom para uma barra lateral de "postagens populares".
- Recent Discussions classifica pela atividade mais recente, então a lista muda constantemente. Bom para um painel de "o que está em alta agora".
Adicionar um Resumo de Avaliações
The FastComments - Reviews Summary block mostra uma classificação agregada por estrelas e a distribuição das avaliações de uma página. Combine-o com o bloco FastComments em templates de produto para o layout padrão de avaliações: resumo no topo, formulário de avaliação e avaliações abaixo.
Pré-requisito: configurar Ratings & Reviews
O bloco Reviews Summary exibe as perguntas de avaliação que você configurou para sua loja. Configure-as primeiro:
- Abra o app FastComments no seu admin do Shopify.
- Clique no bloco Ratings & Reviews Helper (ou abra Ratings & Reviews Helper diretamente).
- Adicione as perguntas que você quer que cada avaliador responda (classificação geral por estrelas, "como foi o caimento", etc.).
Sem perguntas configuradas, o bloco de resumo não tem nada para agregar.
Adicionar o bloco
- Abra o editor de tema do Shopify.
- Abra o template Product (ou o template de página onde você quer o resumo).
- Clique em Add block perto do topo da seção da página, acima de onde o bloco FastComments ficará.
- Em Apps, selecione FastComments - Reviews Summary.
- Adicione um bloco FastComments mais abaixo na mesma página se você ainda não tiver um, para que os visitantes possam deixar avaliações.
- Clique em Save.
Configurações
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Sobrescreve qual tenant do FastComments o resumo lê. Deixe em branco para usar o tenant configurado automaticamente pela loja. | (em branco) |
| Custom URL ID | Sobrescreve o identificador de página contra o qual o resumo agrega. Use isto quando o resumo estiver em uma página diferente do bloco FastComments que ele reflete. | (detectado automaticamente) |
Como o resumo corresponde às avaliações
O bloco Reviews Summary usa a mesma lógica de detecção automática que o bloco FastComments:
- Product template:
shopify-product-{product.id} - Blog post template:
shopify-article-{article.id} - Other templates: the request path
Para uma página de produto normal, o resumo e o thread de comentários compartilham um URL ID automaticamente, sem necessidade de configuração.
Dicas
- O resumo é somente leitura. Para coletar avaliações, você precisa de um bloco FastComments na mesma página.
- Se você alterar as perguntas de avaliação no Ratings & Reviews Helper após coletar avaliações, o resumo será recalculado com base no novo conjunto de perguntas.
Login Automático para Clientes Shopify
O bloco FastComments oferece single sign-on para que seus clientes do Shopify possam comentar como eles mesmos sem criar uma conta separada no FastComments.
Como funciona
Quando um visitante que está logado na sua loja abre uma página com o bloco FastComments:
- O bloco detecta o objeto Shopify
customer. - Ele envia o nome e o e-mail do cliente para o FastComments através de uma requisição proxy do aplicativo assinada.
- O FastComments cria ou associa um usuário identificado por
shopify-{customerId}, assim o mesmo cliente sempre corresponde ao mesmo usuário do FastComments entre sessões e reinstalações. - O nome do visitante aparece em seus comentários. Eles não precisam fazer login novamente.
Se o visitante não estiver logado na loja, o bloco volta para comentários anônimos (ou para o fluxo de login do FastComments, dependendo da configuração do seu widget).
Desativando o SSO
O SSO está ativado por padrão em cada bloco FastComments. Para desativá-lo em um bloco específico:
- Abra o editor de tema do Shopify.
- Abra o template que contém o bloco e clique no bloco para selecioná-lo.
- Desmarque SSO.
- Clique em Salvar.
Desative o SSO se você quiser que os comentaristas escolham uma identidade separada para a conversa. Por exemplo, uma página de comunidade interna onde a equipe comenta com um nome de exibição diferente.
O que o FastComments recebe
A carga útil SSO enviada para cada cliente contém:
- Um ID de usuário derivado do ID do cliente do Shopify (
shopify-{customerId}). - O e-mail do cliente (usado para identificar o usuário; não é exibido publicamente).
- O nome de exibição do cliente (usado como nome do autor do comentário).
Nenhum histórico de pedidos, pagamento ou dados de endereço é enviado. A carga útil é assinada no servidor; o navegador do cliente nunca vê uma credencial.
Links de login e logout
Quando o SSO está ativado, os links de entrar e sair do widget de comentários apontam para /account/login e /account/logout, as rotas padrão de conta de cliente do Shopify. Não há nada a configurar. Os links funcionam para qualquer loja com contas de cliente habilitadas.
Importar Comentários Existentes
Se você já tem comentários nas suas postagens do blog do Shopify e quer mantê-los, importe-os para o FastComments antes de desativar os comentários nativos do Shopify.
A importação precisa ser executada enquanto os comentários nativos do Shopify ainda estiverem ativos e visíveis. Depois que você os desativar, o FastComments não poderá mais lê-los.
Como iniciar uma importação
- Certifique-se de que o app FastComments esteja instalado na sua loja.
- Mantenha os comentários nativos do Shopify habilitados por enquanto.
- Abra um ticket de suporte e nos informe quais blogs importar.
A importação é executada em menos de um dia.
Depois que seus comentários existentes estiverem no FastComments, adicione o bloco FastComments ao modelo das suas postagens do blog e remova ou desative os comentários nativos do Shopify. Veja Adicionar Comments to Blog Posts and Products.
Se você não precisa manter os comentários existentes, pode pular esta página.
Personalização
Cores, fontes, regras de moderação, HTML permitido e comentários anônimos podem ser configurados para combinar com a identidade visual da sua loja.
Abra o aplicativo FastComments no administrador do Shopify e clique no bloco Personalizar para abrir a tela de personalização do widget. Ele usa um link de login de uso único, então você não precisa de um login separado.
Para a lista completa de opções de personalização, veja o Guia de Personalizações e Configuração.
Erros de Domínio
Se você instalou o FastComments a partir do Shopify App Store, o domínio da sua loja é adicionado automaticamente aos domínios autorizados do tenant e você não deveria ver um erro de domínio. Esta página se aplica se você seguiu o caminho de instalação manual, ou se sua loja está hospedada em um domínio personalizado que não foi registrado no Shopify na época em que o aplicativo foi instalado.
Você pode receber um erro de autorização que se parece com isto:
Isso significa que o FastComments não reconhece o domínio onde o widget está sendo carregado como autorizado para o seu tenant.
Para corrigir, adicione o domínio à sua conta FastComments: Configurar Domínios.
Instalação Manual (Avançada)
Se você não consegue instalar o app da Shopify App Store, ainda é possível adicionar o FastComments editando seu tema. Este caminho é útil quando você deseja conectar um tenant do FastComments que já possui, ou quando está incorporando em uma vitrine Shopify onde o app não é uma opção.
A instalação via app é o caminho suportado para a maioria das lojas. Use este método apenas se o app não for adequado.
Passo 1: Desativar os comentários nativos da Shopify
No admin da Shopify, vá para Blog posts > Manage blogs, abra cada blog e defina Comments are disabled no painel à direita. Salve.
Isso impede que o sistema de comentários integrado da Shopify apareça junto com o FastComments.
Passo 2: Abrir o template de blog do tema
No admin da Shopify:
- Vá para Online Store > Themes.
- Sob o seu tema atual, clique em Actions > Edit code.
- No navegador de arquivos à esquerda, abra Sections e clique em
main-article.liquid.
Este é o template que a Shopify renderiza para um artigo de blog individual.
Passo 3: Colar o snippet do FastComments
Role até aproximadamente a linha 100 de main-article.liquid, logo após o </div> de fechamento do corpo do artigo. Cole o seguinte snippet:
Substitua "demo" pelo seu próprio Tenant ID obtido em fastcomments.com/auth/my-account/api-secret. Clique em Save.
Passo 4: Autorizar o domínio da sua loja
Abra uma postagem do blog na sua loja publicada. Se você vir um erro de autorização em vez do widget de comentários, o FastComments precisa saber que sua loja está autorizada a usar este tenant. Veja Erros de Domínio.
Adicionando o FastComments a outras páginas
O mesmo snippet funciona em qualquer template Liquid, incluindo páginas de produtos, páginas personalizadas e a página inicial. Cole-o onde quiser que os comentários apareçam e ajuste urlId se desejar um identificador estável por página (por exemplo, urlId: "{{ product.id }}" em um template de produto).
Adicionar Enquetes à Sua Loja Shopify
Uma vez que o FastComments está na sua loja Shopify, você também pode executar enquetes ao vivo diretamente nos comentários. Ative Enable Polls nas configurações de personalização do widget e um botão de enquete aparecerá na barra de ferramentas dos comentários. As enquetes aceitam de 2 a 10 opções, os resultados são atualizados ao vivo para todos na página, e você escolhe quem pode criar enquetes e se a votação requer login. Não há mais nada para instalar no Shopify.
Experimente a demonstração de Enquetes ao Vivo ou leia a documentação de Enquetes para configurá‑las.