Install Omnichat Pixel on Shopify

Before you start

Please follow this guideline to install Omnichat Web chat plugin before you install the Omnichat Pixel on Shopify

Adding the Pixel Script

1. In Shopify, navigate to Online Store > Themes on the menu and click Edit Code under the Actions dropdown
2. Edit the theme.liquid in Layout
3. Paste the snippet below into before the </body> HTML tag
1
{% if customer %}
2
<script type="text/javascript">
3
4
// OMNICHAT TRACKER V1.0
5
window.omnichatTracker = window.omnichatTracker || [];
6
7
var member = {
8
memberId: "{{ customer.id|json }}",
9
memberEmail: {{ customer.email|json }},
10
memberPhone: {{ customer.phone|json }},
11
memberName: {{ customer.name|json }},
12
}
13
14
window.omnichatTracker.push(['init', 'config', member]);
15
16
</script>
17
{% endif %}
Copied!
4. Navigate back to Shopify Online Store > Themes page, click Customize
5. At the top of the page, click the Home page dropdown, and select Products > Default product to be brought to your default product page
6. Click Add section in the left sidebar, and then select Custom Liquid.
7. Paste the snippet below into the Custom Liquid text box and Click Save.
Check if you need to modify the below code (Line#17 & #20) to match with your theme Add to Cart button & Quantity input elements.
1
<script type="text/javascript">
2
3
// OMNICHAT TRACKER V1.0
4
window.omnichatTracker = window.omnichatTracker || [];
5
6
{% assign categories = product.collections|map:'title' %}
7
var item = {
8
id: "{{ product.id|json}}",
9
name: {{ product.title|json}},
10
price: {{ product.price|money_without_currency}},
11
brand: {{ product.vendor|json}},
12
category: {{ categories|first|json}},
13
}
14
15
window.omnichatTracker.push(['event','view_product', item]);
16
17
var addToCartEls = document.getElementsByClassName("product-form__submit");
18
19
var sendAddToCartEvent = function() {
20
var qty = document.getElementsByClassName('quantity__input')[0].value
21
item.quantity = qty;
22
window.omnichatTracker.push(['event', 'add_to_cart', { items: [ item ] }]);
23
};
24
25
for (var i = 0; i < addToCartEls.length; i++) {
26
addToCartEls[i].addEventListener('click', sendAddToCartEvent, false);
27
}
28
29
</script>
Copied!
Find & Update the Add to Cart button class name in Line #17
To check the class name of the button, open up one of your site’s product pages, right-click your "Add to Cart" button, and select Inspect.
The console will open, showing the source code of your "Add to Cart" button. The following image shows the class name of the "Add to Cart" button highlighted in the console. If the class name of the button on the page shown here (product-form__submit) is different from the variable in the default snippet. Update the snippet to match the class name on the page.
Find & Update the Quantity input class name in Line #20
To check the class name of the input, open up one of your site’s product pages, right-click your Quantity input, and select Inspect.
The console will open, showing the source code of your Quantity input. The following image shows the class name of the Quantity input highlighted in the console. If the class name of the quantity input on the page (quantity__input) is different from the variable in the default snippet. Update the snippet to match the class name on the page.
8. Navigate to Shopify > Settings > Checkout, Under Order status page, paste the snippet below into the end of the Additional scripts text box and Click Save.
Reminder: You must install Omnichat Web Chat Plugin to make the following snippet works
1
{% if customer %}
2
<script type="text/javascript">
3
4
// OMNICHAT TRACKER V1.0
5
window.omnichatTracker = window.omnichatTracker || [];
6
7
var member = {
8
memberId: "{{ customer.id|json }}",
9
memberEmail: {{ customer.email|json }},
10
memberPhone: {{ customer.phone|json }},
11
memberName: {{ customer.name|json }},
12
}
13
14
window.omnichatTracker.push(['init', 'config', member]);
15
</script>
16
{% endif %}
17
18
<script type="text/javascript">
19
window.omnichatTracker.push(['event','purchase', {
20
"transaction_id": "{{order_number|json}}",
21
"amount": {{ total_price|money_without_currency}},
22
"currency": {{currency|json}},
23
"items": [
24
{% for line_item in line_items %}
25
{
26
"id": "{{ line_item.product_id|json }}",
27
"name": {{ line_item.title|json }},
28
{% if line_item.variant %}
29
"variant": "{{line_item.variant.title}}",
30
{% endif %}
31
"quantity": {{ line_item.quantity }},
32
"price": {{ line_item.line_price|money_without_currency}}
33
},
34
{% endfor %}
35
]
36
}]);
37
</script>
Copied!
Export as PDF
Copy link