> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.revie.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ¿Cómo configurar los widgets de Revie en Shopify mediante código?


### 1. Ejecutar la instalación de los widgets 1.0 :

Ingresa en Configuración y en la sección 3, oprime el botón "Activar configuración para plantilla 1.0"


### 2. Para mostrar el badge de estrellas en la página de producto.

En la plantilla de producto (product-template.liquid o similar), insertar el siguiente código antes de price o donde se quiera mostrar:

```
<!-- Start of Revie code -->
<div class="product__price"></div>
<!-- End of Revie code -->
```

![](https://storage.crisp.chat/users/helpdesk/website/1534f5ca7afec300/starwidget2_1qqgp0z.jpg)

### 3. Para mostrar el listado de reviews en la página de producto.

En product.liquid antes de la sección product-recommendations, insertar el siguiente código:

```
<!-- Start of Revie code -->
<div class="page-content--product"></div>
<!-- End of Revie code -->
```

![](https://storage.crisp.chat/users/helpdesk/website/1534f5ca7afec300/reviewswidget_317gnz.jpg)

### 4. Para mostrar el badge de estrellas en listado de colecciones.

![](https://storage.crisp.chat/users/helpdesk/website/1534f5ca7afec300/collectionstar_17uw3pd.jpg)

En la plantilla de colecciones (product-grid.liquid o similar), insertar el código en donde se quiera mostrar: 

```
<!-- Start of Revie code -->
{% if product.metafields.revie.reviewData %}
<div class="shopify-product-revie" data-id="{{ product.id }}">
  <div id="revieStar">
    <div title="{{ product.metafields.revie.reviewData.reviewAverageValue }} Estrellas">
      <i data-starlist="{{ product.metafields.revie.reviewData.reviewAverageValue }}"></i>
      <span>{{ product.metafields.revie.reviewData.reviewCount }} reseñas</span>
    </div>
  </div>
</div>
{% endif %}
<!-- End of Revie code -->
```


Si tienes cualquier duda o requieres que lo hagamos por tí, escríbenos por Whatsapp 👉[Haz clique aquí para hablar por WhatsApp](http://wa.me/15558424500)