Como utilizar o app Product Reviews

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 deste tutorial são diferentes para temas com seções e sem seções. Um tema com seções é um modelo mais recente que permite arrastar e soltar para organizar o layout das páginas de sua loja.

Para descobrir se seu tema é compatível com seções, acesse a página Editar código do tema. Se houver arquivos no diretório Seções, você usa um tema com seções. Os temas sem seções foram lançados antes de outubro de 2016 e não têm arquivos no diretório Seções.

Se você estiver usando um tema com seções, clique no botão Temas com seções e siga as instruções. Se você estiver usando um tema mais antigo, sem seções, clique no botão Temas sem seções e siga as instruções.

Adicionar comentários 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:

  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:

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

<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

Etapas:

  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.

    Em alguns temas, o arquivo tem um nome diferente. Se não puder localizar product-grid-item.liquid, procure uma das seguintes opções:

- product-card.liquid - product-card-item.liquid - product-block.liquid - product-item.liquid

  1. 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 }}.

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

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

<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>

Você pode tentar colocar o código em diferentes lugares no arquivo para decidir qual a melhor posição.

  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:

  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:

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

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

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

Você pode tentar colocar o código em diferentes lugares no arquivo para decidir qual a melhor posição.

  1. Clique em Salvar.

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

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

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

  2. Encontre a área no snippet 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:

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

<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 %}

Você pode tentar colocar o código em diferentes lugares no arquivo para decidir qual a melhor posição.

  1. Clique em Salvar.

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:

  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:

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

<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:

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

    Em alguns temas, o arquivo tem um nome diferente. Se não puder localizar product-grid-item.liquid, procure uma das seguintes opções:

- product-card.liquid - product-card-item.liquid - product-block.liquid

Se o tema não incluir nenhum dos arquivos acima, você poderá encontrar o código de grade do produto no arquivo collection.liquid do diretório Modelos directory.

  1. 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 }}.

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

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

<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>

Você pode tentar colocar o código em diferentes lugares no arquivo para decidir qual a melhor posição.

  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:

  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:

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

O posicionamento do código poderá ter uma exibição semelhante a esta:

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

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

Você pode tentar colocar o código em diferentes lugares no arquivo para decidir qual a melhor posição.

  1. Clique em Salvar.

Pronto para começar a vender com a Shopify?

Experimente de graça