How can I display random viewer and sold counter on my product page?

Store Design
, , , , ,
1

Can someone please provide the code to show this on my product page with random numbers example 0-50 people viewing the product right now and 0-10 sold in last 24 hours?

sitarakhalid_0-1734522862248.jpeg
sitarakhalid_0-1734522862248.jpeg400×113 5.55 KB

I use dawn theme.

Mywebsite: www.heeriye.pk

1 Like
2

Hi @sitarakhalid

You can achieve this just by following these steps:

  1. Go to online store → themes
  2. click on 3 dots and select code edit
  3. Search for card-product.liquid and open that
  4. In code use Ctrl+F and search for this class
class="card__information"​
  • before that div pas this code

  

 people are viewing this product right now.

  

 sold in the last 24 hours.

​
  • Then At the End of that file add the javascript
​

I hope this solution worked for you! if not then maybe you didn’t correctly pass the code kindly share your collaboration code so I can add that code for you
If yes Just like this Reply and Mark it as a Solution and to keep me motivated BUY ME A Coffee

3

i want to show icon also

4

Thank you, its working but i want some styling and icon also. i want text color red and font size 12. Please help

5

Hi @sitarakhalid

In order to fulfill your request, please follow these steps

  • Open the main-product.liquid file.
  • Locate the section where you want to add the code.
  • Add the provided code right under the section as shown in the screenshot:
    https://prnt.sc/1iFtB57DzbQi
{%- assign min = 0 -%}
              {%- assign max = 100 -%}
              {%- assign diff = max | minus: min -%}
              {%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}
                  
                    
                      
                    
                    {{ random_number }} People are viewing this right now

Here is the result: https://prnt.sc/zD7ku4SECxtS

I hope this helps

Best,

Daisy

6

Ok For that thing use this updated Code

For the Last 22 Hours


  {% comment %} For Last 22 Hours {% endcomment %}
  

    
      
    
     sold in the last 22 hours.

For people View


    
      
    
     people are viewing this product right now.

Add This CSS to your base.css or theme.css file This code helps to change the color and the size of the text

just follow these steps to find these files.

  • Go To online store → theme
  • click 3 dots and select code edit
  • in search find base.css or theme.css file
  • past this CSS code at the end of this file
.product-info p { display: flex; align-items: center; gap: 5px; margin-block: 7px; font-size: 12px; color: red; }
.product-info p .icon { width: 20px; height: 20px; }
.product-info p .icon svg { width: 100%; height: 100%; fill: red; }​

The Javascript will be the same

The result will be like

Mehran_Ali_0-1734599957804.png
Mehran_Ali_0-1734599957804.png1183×904 216 KB

7

Thank you so much, its work perfectly.

1 Like
8

Glade to hear that if you need any more assistance feel free to reach me out