Como utilizar o app Product Reviews

Acesse a App Store para instalar o Product Reviews da Shopify.

Depois de instalar o app Product Reviews, você pode adicionar formulários de avaliação às suas páginas de produtos e selos de pontuação de avaliações às suas páginas de produtos e coleções.

As etapas do tutorial variam conforme a versão da arquitetura do tema.

Clique no botão para sua versão da arquitetura de tema e siga as instruções para adicionar elementos de avaliação à loja virtual.

Online Store 2.0

Adicionar avaliações e um formulário de avaliação nos temas da Online Store 2.0

Há duas maneiras de adicionar o bloco de app das avaliações e do formulário de avaliação: como uma seção no modelo do produto ou como um bloco na seção do produto principal do modelo. Essas opções estão disponíveis em todos os temas da Online Store 2.0 da Loja de temas da Shopify, e é possível incluí-las em outros modelos ou seções, conforme o tema.

Adicionar avaliações e o formulário de avaliação como uma seção

Desktop

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique em Personalizar.

iPhone

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

Android

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

1. Navegue até o modelo de produto em que você quer adicionar a seção de avaliação e de formulário de avaliação.
2. Clique em Adicionar seção.
3. Na seção Apps do menu suspenso, selecione o bloco Avaliações.
4. Opcional: mova a seção do app até a posição em que ela deve ficar na página.
5. Clique em Salvar.

Adicionar avaliações e o formulário de avaliação como bloco

Desktop

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique em Personalizar.

iPhone

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

Android

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

1. Navegue até a página e a seção em que você quer adicionar o bloco de avaliação e formulário de avaliação.
2. Clique em Adicionar bloco.
3. Na seção Apps do menu suspenso, selecione o bloco Avaliações.
4. Opcional: mova o bloco Avaliações até a posição em que ele deve ficar na seção.
5. Clique em Salvar.

Adicionar avaliações por estrelas nos temas da Online Store 2.0

As avaliações por estrelas podem ser adicionadas como um bloco na seção do produto principal do modelo. Essa opção está disponível em todos os temas da Online Store 2.0 da Loja de temas da Shopify, e é possível incluí-la em outros modelos ou seções, conforme o tema.

Desktop

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique em Personalizar.

iPhone

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

Android

1. No app da Shopify, toque em loja.
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar e toque em Personalizar.
5. Toque em Editar.

1. Acesse a página e a seção em que você quer adicionar a avaliação por estrelas.
2. Clique em Adicionar bloco.
3. Na seção Apps do menu suspenso, selecione o bloco Avaliação por estrelas.
4. Opcional: mova o bloco Avaliação por estrelas para a posição em que ele deve ficar na seção ou personalize a cor, o tamanho, o alinhamento e o contexto das estrelas.
5. Clique em Salvar.

Vintage sectioned themes

Adicionar comentários e o formulário de avaliação à sua página de produto em temas com seções

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Seções, abra product-template.liquid.

2. Encontre a área no código em que você deseja exibir suas avaliações. Geralmente, ela fica abaixo da descrição do produto. Para localizar a descrição do produto no arquivo, procure a tag do Liquid {{ product.description }}.

3. Abaixo do código que contém a tag do Liquid {{ product.description }}, copie o seguinte snippet de código:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Your code placement might look something like this:

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

1. Clique em Salvar.

Adicionar selos de pontuação de avaliações às suas páginas de coleções em temas com seções

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

3. No diretório Snippets, abra o arquivo product-grid-item.liquid.

4. Encontre a área no código em que você deseja exibir os selos de pontuação de avaliações. Geralmente, ela fica abaixo do título do produto. Para localizar o título do produto no arquivo, procure a tag do Liquid {{ product.title }}.

5. Em uma nova linha abaixo do código que contém a tag do Liquid {{ product.title }}, cole o seguinte snippet de código:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Your code placement might look something like this:

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

You can experiment with putting the code in different places in the file to see where you like it best.

1. Clique em Salvar.

Adicionar selos de pontuação de avaliações à sua página de produto em temas com seções

Para adicionar selos de pontuação de avaliações às suas páginas de produtos:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Seções, abra product-template.liquid.

2. Encontre a área no código em que você deseja exibir os selos de pontuação de avaliações. Geralmente, ela fica abaixo do título do produto. Para localizar o título do produto no arquivo, procure a tag do Liquid {{ product.title }}.

3. Em uma nova linha abaixo do código que contém a tag do Liquid {{ product.title }}, cole o seguinte snippet de código:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Your code placement might look something like this:

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

You can experiment with putting the code in different places in the file to see where you like it best.

1. Clique em Salvar.

Adicionar selos de pontuação de avaliações ao produto em destaque nos temas com seções

Observação

Se você usa o Venture, não é recomendável inserir selos de pontuação de avaliação nos produtos em destaque.

Para adicionar selos de pontuação de avaliações aos produtos em destaque na página inicial:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Seções, abra o arquivo featured-product.liquid.

2. Encontre a área no snippet de código em que você deseja exibir os selos de pontuação de avaliações. Geralmente, ela fica abaixo do título do produto. Para localizar o título do produto no arquivo, procure a tag do Liquid {{ title }}. Se não puder encontrar a tag {{ title }}, procure a tag {{ product.title }}.

3. Em uma nova linha abaixo do código que contém a tag do Liquid {{ product.title }}, cole o seguinte snippet de código:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Your code placement might look something like this:

<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
    {% if section.settings.show_vendor %}
      <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2>
    {% endif %}

    <h1 class="product-single__title" itemprop="name">{{ title }}</h1>

    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      {% comment %}

You can experiment with putting the code in different places in the file to see where you like it best.

1. Clique em Salvar.

Vintage non-sectioned themes

Adicionar avaliações e o formulário de avaliação à sua página de produto em temas com seções

Para adicionar formulários de avaliação às suas páginas de produtos:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Modelos, abra product.liquid.

2. Encontre a área no código em que você deseja exibir suas avaliações. Geralmente, ela fica abaixo da descrição do produto. Para localizar a descrição do produto no arquivo, procure a tag do Liquid {{ product.description }}.

3. Abaixo do código que contém a tag do Liquid {{ product.description }}, copie o seguinte snippet de código:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

Your code placement might look something like this:

<div class="product-single__description rte" itemprop="description">
  {{ product.description }}
</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

1. Clique em Salvar.

Adicionar selos de pontuação de avaliações às suas páginas de coleções em temas sem seções

Para adicionar selos de pontuação de avaliações às suas páginas de coleções:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Snippets, abra product-grid-item.liquid.

2. Encontre a área no código em que você deseja exibir os selos de pontuação de avaliações. Geralmente, ela fica abaixo do título do produto. Para localizar o título do produto no arquivo, procure a tag do Liquid {{ product.title }}.

3. Em uma nova linha abaixo do código que contém a tag do Liquid {{ product.title }}, cole o seguinte snippet de código:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Your code placement might look something like this:

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
    </span>
  </a>
</div>

You can experiment with putting the code in different places in the file to see where you like it best.

1. Clique em Salvar.

Adicionar selos de pontuação de avaliações à sua página de produto em temas sem seções

Para adicionar selos de pontuação de avaliações às suas páginas de produtos:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. No diretório Modelos, abra product.liquid.

2. Encontre a área no código em que você deseja exibir os selos de pontuação de avaliações. Geralmente, ela fica abaixo do título do produto. Para localizar o título do produto no arquivo, procure a tag do Liquid {{ product.title }}.

3. Em uma nova linha abaixo do código que contém a tag do Liquid {{ product.title }}, cole o seguinte snippet de código:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

Your code placement might look something like this:

<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

You can experiment with putting the code in different places in the file to see where you like it best.

1. Clique em Salvar.