Installing Revere on your Shopify Store
Find Revere in the Shopify App store, click Get, and then select the plan that works best for your business.
You will see a Welcome to Revere confirmation page in Shopify. Copy your company ID that is shown on the Installation Complete page. You will need this to complete installation
After you install the Revere app in Shopify, you will need to insert some code onto your website to begin collecting and displaying reviews, heartbeats, and Q&A from your site’s users. You will need to paste a few short lines of HTML to the code of your site. Follow the step-by-step guide below.
Step-by-Step Guide
1. Insert Head Content – add default Widget styling
Log into your Shopify account.
click Online Store, and then click Themes.
click Actions button, and then click Edit Code option.
select the file theme.liquid in the Layout folder.
Copy and paste the code below between the <head> and the </head> tags.
<link href="https://cdn.irevere.com/engine/v2.0.0/revere.min.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
var RevCart = {
"Items": [
{% for lineItem in cart.items%}
{
"ItemId": "{{lineItem.product_id}}",
"Brand": "{{lineItem.vendor}}",
"Name": "{{lineItem.product.title}}",
"Price": {{lineItem.price | money_without_currency }},
"Quantity": {{lineItem.quantity}},
"ImageUrl": "{{line_item.image | img_url: 'small'}}",
"Url": "{{shop.domain}}{{line_item.url}}"
},
{% endfor %}
],
{% if customer %}
"Email": "{{customer.email}}",
{% else %}
"Email": "",
{% endif %}
"CartAction": "",
"Currency": "{{shop.currency}}",
"Subtotal": {{cart.original_total_price | money_without_currency}},
"Discount": {{cart.original_total_price | minus: cart.total_price | money_without_currency}},
"Total": {{cart.total_price | money_without_currency}}
};
</script>
|
2. Insert Javascript – Add Revere configurations
Copy and paste the code below right before the </body> tag in the theme.liquid file.
<script type="text/javascript">
var REV = {
CompanyId: 'CCCCC',
UserId: '{{customer.id}}', // optional, but recommended for the best customer experience.
}
</script>
<script src="https://cdn.irevere.com/engine/v2.0.0/revere.min.js" type="text/javascript"></script>
|
Edit placeholder values.
For the REV.CompanyId value, replace CCCCC with the unique company ID Revere has assigned to your account as part of the App installation. You can also find your Revere Company ID in the Revere application. Click Administration then click Site Profile. Your Company ID is located on the bottom of the page under Site Access Keys.
For the REV.UserId value, should be the unique customer ID associated with the user on your site which would be the {{customer.id}} value. OPTIONAL but recommended for the best customer experience.
Click Save.
There are 8 additional optional configuration variables you can set in Revere. You can see these additional options in the “Drop-in Code” section under Revere Configuration section in the Revere administration tool. These can be added or updated at any time after you have installed Revere.
3. Insert Revere Content – Add the elements to your site that will display and collect the Revere information
Read Reviews
Copy and paste the following code in the area on the page where you would like to display all the reviews for the product.
<div data-revere="read" data-itemid="{{product.id}}" class="Revere__wrap Revere__default read"></div>
|
For Product Detail Pages we recommend inserting this at the end of the product-template.liquid, found in the sections folder.
Alternatively, you could insert it at the end of the product.liquid, found in the templates folder, if that placement is preferable for your Theme’s design.
click Save.
Write a Review
Copy and paste the following code in the area on the page where you would like a user to write a review.
<div data-revere="write" data-itemid="{{product.id}}" class="Revere__wrap Revere__default write"></div>
|
For Product Detail Pages we recommend inserting this at the end of the product-template.liquid, found in the sections folder.
Alternatively, you could insert it at the end of the product.liquid, found in the templates folder, if that placement is preferable for your Theme’s design.
click Save.
Question & Answer
Copy and paste the following code in the area on the page where you would like users to read, ask, and answer questions. One per page.
<div data-revere="questions" data-itemid="{{product.id}}" class="Revere__wrap Revere__default questions"></div>
|
For Product Detail Pages we recommend inserting this at the end of the product-template.liquid, found in the sections folder.
Alternatively, you could insert it at the end of the product.liquid, found in the templates folder, if that placement is preferable for your Theme’s design.
click Save.
Product Heartbeat
Copy and paste the following code in the area on the page where you would like to insert Heartbeat, as configured in display styles area of the Revere administration tool.
<div data-revere="likes" data-itemid="{{product.id}}" class="Revere__wrap Revere__default likes"></div>
|
For Product Listing Pages we recommend adding this to the very top of the product-card-grid.liquid, product-collection.liquid and/or product-grid-item.liquid, found in the snippets folder.
For Product Detail Pages we recommend inserting this in between the vendor brand and the price on the product-template.liquid, found in the sections folder.
click Save.
Product Block
Copy and paste the following code in the area on the page where you would like to insert stars and review block as configured in display styles area.
<div data-revere="snippet" data-itemid="{{product.id}}" class="Revere__wrap Revere__default snippet"></div>
|
Click Save.
For Product Listing Pages we recommend inserting this in underneath the Product Title on the product-card-grid.liquid, product-collection.liquid and/or product-grid-item.liquid found in the snippets folder. Your theme determines which of these liquid pages you have available.
click Save.
4. Insert Conversion Tracking – Add the elements to your checkout that will allow you to track effectiveness of your Review campaigns
Copy and paste the following code at the end of the product.liquid found in the templates folder
<script type="text/javascript">
if (RevCart)
{
RevCart.CartAction = "cart";
}
</script>
|
Click Save.
You are now done editing your site code.
Next go to Settings (in the bottom left corner of the shopify admin navigation).
Click on Checkout.
Click on Order Processing.
Click on Additional Scripts.
Copy and paste the following code in the Additional Scripts text box.
{% if first_time_accessed %}
<script type="text/javascript">
var RevCart = {
"Items": [
{% for lineItem in line_items%}
{
"ItemId": "{{lineItem.product_id}}",
"Brand": "{{lineItem.vendor}}",
"Name": "{{lineItem.product.title}}",
"Price": {{lineItem.price | money_without_currency }},
"Quantity": {{lineItem.quantity}},
"ImageUrl": "{{line_item.image | img_url: 'small'}}",
"Url": "{{shop.domain}}{{line_item.url}}"
},
{% endfor %}
],
"Email": "{{email}}",
"CartAction": "order",
"Currency": "{{shop.currency}}",
"Subtotal": {{subtotal_price | money_without_currency}},
"Discount": {{total_price | minus: subtotal_price | minus: shipping_price | minus: tax_price | money_without_currency}},
"Shipping": {{shipping_price | money_without_currency}},
"Tax": {{tax_price | money_without_currency}},
"Total": {{total_price | money_without_currency}},
"OrderId": "{{order_number}}"
};
</script>
<script type="text/javascript">
var REV = {
CompanyId: 'CCCCC'
}
</script>
<script src="https://cdn.irevere.com/engine/v2.0.0/revere.min.js" type="text/javascript"></script>
{% endif %}
|
Edit placeholder values
For the REV.CompanyId value, replace CCCCC with the unique company ID Revere has assigned to your account as part of the App installation. You can also find your Revere Company ID in the Revere application. Click Administration then click Site Profile. Your Company ID is located on the bottom of the page under Site Access Keys.
click Save.
Congratulations, you have now completed the Revere Installation.
