Passo 2 | Integração na TrayCommerce

Após concluir o Passo 1, inicie a instalação da Trustvox no front-end da sua loja :)

Vamos lá!

1. Acessar seu tema que está em: Minha Loja > Design da loja


Conforme as  instruções da plataforma, é necessário duplicar o tema antes da edição. Explicamos abaixo, de forma simplificada como proceder. 

2. Com o acesso de edição, você deve duplicar o tema padrão.

3. Clicar em "Editar HTML" no tema duplicado

Agora sim vamos instalar a Trustvox! Nesta etapa simplificamos um pouco, criando um .zip contendo nossos scripts. : D

4. Fazer o download do arquivo elements.zip

5. Realizar o upload do arquivo acima em seu painel. Em sua estrutura de pastas na lateral esquerda: Upload de arquivos> Selecionar arquivo .ZIP> Escolha o arquivo "elements.zip". 

6. Inserir a identificação da sua loja nos arquivos:

6.1. Editar os arquivos "trustvox-stars.html" e "trustvox-widget.html"

6.2. Em ambos os arquivos, substituir a palavra "IDENTIFICACAO" para a identificação de sua loja

Caso não saiba sua identificação, você pode nos  solicitar

Ex .: (['_storeId', '123']);

7. Em sua estrutura de pastas na lateral esquerda, navegue até: layouts > default.html.

7.1. Dentro do template "default", adicionar o código do bloco abaixo, antes do fechamento da tag </head>

{% element 'trustvox-style' %}

7.2. Adicionar também o código abaixo logo após a abertura da tag <body>

{% if pages.current == 'product' %}
	{%  element 'trustvox-widget' %}
{% endif %}

7.3. Para que as estrelinhas funcionem, é necessário adicionar este código antes do fechamento da tag </body>

{%  element 'trustvox-stars' %}

8. Procurar em sua estrutura de pastas por sua página de produto, que fica em: pages > product.html

8.1. Abaixo de  "{{ product.name }}", que se trata da variável responsável por carregar o nome do produto, inserir o código das estrelinhas:
<!-- Trustvox -->
<div class="trustvox-rating">
   <div class="trustvox-fluid-jump trustvox-widget-rating" id="trustvox-reviews">
      <div class="trustvox-shelf-container" data-trustvox-product-code-js="{{ product.id }}" data-trustvox-display-rate-schema="true"></div>
      <span class="rating-click-here">Clique e veja!</span>
   </div>
</div>
<!-- /Trustvox -->

8.2. Ainda em  "product.html" encontrar o local que queira exibir o Widget principal da Trustvox e inserir o código abaixo:

<!-- Trustvox -->
<div class="trustvox-container">
  <h3 id="trustvox-reviews">Pergunte e veja opiniões de quem já comprou</h3>
  <div id="_trustvox_widget"></div>
</div>
<!-- /Trustvox -->

9. Para exibir estrelas nas vitrines é necessário a inserção do código abaixo, no template que fica no caminho: elements > snippets > product.html

9.1. Abaixo de   "{{ product.name }}", inserir o código das estrelinhas:

<!-- Trustvox -->
<div class="trustvox-showcase">
  <div data-trustvox-product-code="{{ product.id }}"></div>
</div>
<!-- /Trustvox -->

Pronto! Agora basta publicar o template alterado e aguardar seu cache expirar. ;)

Qualquer ajuda, escreva para meajuda@tustvox.com.br.

Boas vendas!

Ainda precisa de ajuda? Entre em contato Entre em contato