# Live Visitor

## What is the Live Visitor?

This feature shows the number of people viewing the product in real time, so you can see this number on this bar on the product page.

These numbers are fully customizable, and you can set it to show dozens or even hundreds of people viewing the product.

The numbers are random, based on what you pick, so it looks like real people are watching. It makes your shop feel active and real, which can help attract more buyers.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fv5uCgPJ8byttpJbgcKl8%2FLive%20Visitor%20Docs%201.png?alt=media&#x26;token=a1ca022f-2b92-41c4-861d-6fee5c318769" alt=""><figcaption></figcaption></figure>

This is a common marketing trick to play on people’s fear of missing out, because the more people interested, the more valuable and popular the product seems.

Therefore the buyers feel more trust and want to buy it quickly, before it’s sold out. Seeing the viewer count go up makes buyers feel rushed to purchase, so they may buy faster.

If you have a few best-selling products, then why not try this feature?

[**Click here to see the link demo ->**](https://library.smind.io/products/all-that-sweatshirt?view=live-visitors)

## How To Install The Live Visitor?

Step 1: In Shopify Admin, going to Smind Section app and find **Live Visitor** in Product Block tab of Library. Click Install and Customize it.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKoihDzA77zinZd67lzqs%2FLive%20Visitor%20Docs%208.png?alt=media&#x26;token=024e2b5f-bb95-45b2-9fc3-64e4d78378d0" alt=""><figcaption></figcaption></figure>

Step 2: Going to Shopify Editor sidebar, choose any product page template and click **Add Section** -> **Live Visitor**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FPXIjyMgrxp9YRLv6itsi%2FLive%20Visitor%20Docs%201%20(1).png?alt=media&#x26;token=1159f1df-a90c-4ff1-94fd-9ddeca6c15fa" alt=""><figcaption></figcaption></figure>

Step 3: Copy the block ID. For example: **smi-block-live-visitors-1**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjRkoHOIs8zSdOdhbR6Vf%2FLive%20Visitor%20Docs%201%20(2).png?alt=media&#x26;token=f43ec164-26ed-42bf-b123-cfbab49c2d1e" alt=""><figcaption></figcaption></figure>

Step 4: On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section. And insert the block ID of Live Visitor to the Section ID. You can change the block name if you want.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FQkAS1Gmesm9osAFdVXG9%2FLive%20Visitor%2011111.gif?alt=media&#x26;token=6ce393f2-427f-4a6f-95de-fec71705c4c0" alt=""><figcaption></figcaption></figure>

Step 5: Next, you can rearrange the relevant blocks within the product detail sections. Scroll down to this product blocks and start to customize it.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F4NEuqaFGRQwcX2ff8kTk%2FLive%20Visitor%2022.gif?alt=media&#x26;token=f41de816-1bbf-4b1f-80d6-5510f1ade523" alt=""><figcaption></figcaption></figure>

Step 6: Now you have to change the content for this feature

* **Content Max Width**: You can adjust the maximum width of this feature when it shows up on your product page, so you have control over how it looks. If you want the text to appear longer, then just make it wider, but if you want it shorter, simply reduce the width.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FVy98ciXzxPJ0Z2xx1lef%2FLive%20Visitor%20Docs%202.png?alt=media&#x26;token=80b92a10-4372-4fc7-b2b9-76d579244213" alt=""><figcaption></figcaption></figure>

* **Visitor Range**: You can show how many customers are viewing this product, so the customer can see real-time the number of customer are viewing. For example, the lowest number can be 10 and the highest can be 20, so the number will show randomly from 10 to 20.
* **Content**: This is the text you can change in this feature, but you have to use the short-code \[visitor\_range] to make sure the number of viewers shows up there.
* **Text Size**: The font size is also important, so you can adjust it to be bigger or smaller as you like.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fpsc24Kn4SthQUkaVkVNy%2FLive%20Visitor%20Docs%202%20(1).png?alt=media&#x26;token=a23cbd8d-5058-4304-b7b1-742a36f6a97a" alt=""><figcaption></figcaption></figure>

* **Change the count**: You can change how often the number updates every second, so if you want the number to refresh quickly, choose 2-3 seconds. But if you want it to look more realistic, you should set it to 5-7 seconds.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2kp6b0XzCeMqOjBaSeV1%2FLive%20Visitor%20Docs%203.png?alt=media&#x26;token=2e5407ea-5996-4352-9f48-3590364ca7fd" alt=""><figcaption></figcaption></figure>

* **Icon Size**: You can adjust the eye icon to be bigger or smaller, depending on what you like.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FWrwTEURTgNkvItxrGMZt%2FLive%20Visitor%20Docs%204.png?alt=media&#x26;token=1cff5980-6354-4c02-ba68-defc5a90561e" alt=""><figcaption></figcaption></figure>

* **Animated Icon:** Do you want the eye icon to move? If not, you can simply turn off the animation.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FnAXUU9mgf49wd9ljLkkf%2FLive%20Visitor%20Docs%205.png?alt=media&#x26;token=d6c11443-a998-42ad-81b9-6be78371261c" alt=""><figcaption></figcaption></figure>

* **Color**: You can use the color picker here to change the color for the whole feature, like changing the text color.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FV1nUJmjDr8KUd8fWCi50%2FLive%20Visitor%20Docs%205%20(1).png?alt=media&#x26;token=fcae28cd-9ea7-4dc2-a03f-65427d98b088" alt=""><figcaption></figcaption></figure>

* **Top and bottom padding**: You can also change the spacing between top and bottom for this features

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2IqfWBY9tzQ8bCZdDQI3%2FLive%20Visitor%20Docs%207.png?alt=media&#x26;token=5d82517c-8876-478e-8f75-0940c2b76a4e" alt=""><figcaption></figcaption></figure>

Step 7: Click **Save** to apply the changes.
