How can I display random viewer and sale numbers on my product page?

[TrendBlend]

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?

I looked at this thread for the amount of people viewing right now but I don't know in which document I should add the code.

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

You should add the code in the theme.liquid file at the place I have marked "ADD THE SCRIPT HERE" (You won't find this in your own theme, I just added it in mine to show you where). This is before the </body tag>.

Here is the code to show both viewing and sold.

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;

    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;

    var form = document.querySelector('product-info');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

Ok you have something modified there, maybe by an app or by you.

Erase everything and paste this 🙂

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
    viewCountElement.style.marginTop = "20px";
    viewCountElement.style.marginBottom = "10px";
  
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginBottom = "20px";
  
    var form = document.querySelector('product-info .no-js-hidden');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

[ThePrimeWeb · Accepted solution]

Sorry @TrendBlend,

Ignore that and use this. Only thing is, Sold amount needs to be on top because the view count is always changing and appending to the end

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var minSold = 10;
    var maxSold = 100;    

    var soldText = 'sold in the last 22 hours';
    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    
    
    var form = document.querySelector('product-info .no-js-hidden');
    form.appendChild(soldCountElement);  
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      
      var minViews = 2;
      var maxViews = 20;

      var viewText = 'people are viewing this product right now.';
    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
      form.appendChild(viewCountElement);
      viewCountElement.style.marginBottom = "20px";
     }, 2000);
      
  });
  </script>

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

Now I'm building a whole app here!!

<script>
  document.addEventListener('DOMContentLoaded', function () {

    var form = document.querySelector('product-info .no-js-hidden');

    var minSold = 10;
    var maxSold = 20;    
    var soldCount = localStorage.getItem("soldCount") ?? Math.floor(Math.random() * (maxSold - minSold) + minSold);
    localStorage.setItem("soldCount", soldCount);
    soldCount = parseInt(soldCount);
    var soldText = 'verkocht in de laatste 24 uur.';
    var soldEmoji = '️';

    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    form.appendChild(soldCountElement);  
    
    setInterval(function(){
      try{
        document.querySelector('.sold-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);
  
  
      soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
      soldCountElement.style.marginTop = "10px";
      form.appendChild(soldCountElement);  
      localStorage.setItem("soldCount", soldCount);
          
     }, 300000);

      var minViews = 2;
      var maxViews = 20;
      var viewCount = localStorage.getItem("viewCount") ?? Math.floor(Math.random() * (maxViews - minViews) + minViews);
      localStorage.setItem("viewCount", viewCount);

      viewCount = parseInt(viewCount);

    
      var viewText = 'mensen kijken nu naar dit product.';
      var viewEmoji = '️';

    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
    
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      //maak kans 5% kans om 3 omhoog te gaan 15% kans om 2 omhoog te gaan 25% kans om 1 omhoog te gaan 10% gelijk
      //kans 5% om 3 omlaag, 15% om 2 omlaag, 25% 1 omlaag
      var forNew = viewCount;

      let randomNumber = Math.floor(Math.random() * 100) + 1;
      if (randomNumber <= 5) {
        viewCount = forNew + 3;
      } else if (randomNumber > 5 && randomNumber <= 20) {
        viewCount = forNew + 2;
      } else if (randomNumber > 20 && randomNumber <= 45) {
        viewCount = forNew + 1;
      } else if (randomNumber > 45 && randomNumber <= 55) {
        // nothing happens
      } else if (randomNumber > 55 && randomNumber <= 60) {
        viewCount = forNew - 3;
      } else if (randomNumber > 60 && randomNumber <= 75) {
        viewCount = forNew - 2;
      } else if (randomNumber > 75 && randomNumber <= 100) {
        viewCount = forNew - 1;
      }

      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
      localStorage.setItem("viewCount", viewCount);
     }, 5000);//60sec = 60000

    
  });
  </script>

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

You should add the code in the theme.liquid file at the place I have marked "ADD THE SCRIPT HERE" (You won't find this in your own theme, I just added it in mine to show you where). This is before the </body tag>.

Here is the code to show both viewing and sold.

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;

    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;

    var form = document.querySelector('product-info');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

[TrendBlend]

Hey @ThePrimeWeb,

Thank you so much it worked but can I place the text directly under the price on the product page because it's now located at the bottom of the product page.

[ThePrimeWeb]

Hey @TrendBlend,

Yeah sure, erase the previous code and just replace the code with this

    <script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
    viewCountElement.style.marginTop = "20px";
    viewCountElement.style.marginBottom = "10px";
  
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginBottom = "20px";
  
    var form = document.querySelector('.price__container .price__regular');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

[TrendBlend]

Hey thanks for the fast respond but the text dissappeared, it's not located under the price.

[ThePrimeWeb]

Hey @TrendBlend,

Can you paste a screenshot of how you amended the theme.liquid file. It worked very well on mine.

[TrendBlend]

Sure, above is what my product page currently looks like.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    {%- endunless -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>
    
    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
    {%- if settings.animations_reveal_on_scroll -%}
      <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

    {% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      {% for scheme in settings.color_schemes -%}
        {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
        {% if forloop.index == 1 -%}
          :root,
        {%- endif %}
        .color-{{ scheme.id }} {
          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        {% if scheme.settings.background_gradient != empty %}
          --gradient-background: {{ scheme.settings.background_gradient }};
        {% else %}
          --gradient-background: {{ scheme.settings.background }};
        {% endif %}

        {% liquid
          assign background_color = scheme.settings.background
          assign background_color_brightness = background_color | color_brightness
          if background_color_brightness <= 26
            assign background_color_contrast = background_color | color_lighten: 50
          elsif background_color_brightness <= 65
            assign background_color_contrast = background_color | color_lighten: 5
          else
            assign background_color_contrast = background_color | color_darken: 25
          endif
        %}

        --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
        --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
        --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
        --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
        --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
      }
      {% endfor %}

      {{ scheme_classes | prepend: 'body' }} {
        color: rgba(var(--color-foreground), 0.75);
        background-color: rgb(var(--color-background));
      }

      :root {
        --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};
        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

        --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

        --media-padding: {{ settings.media_padding }}px;
        --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
        --media-border-width: {{ settings.media_border_thickness }}px;
        --media-radius: {{ settings.media_radius }}px;
        --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
        --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
        --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
        --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
        --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

        --page-width: {{ settings.page_width | divided_by: 10 }}rem;
        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

        --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
        --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
        --product-card-text-alignment: {{ settings.card_text_alignment }};
        --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
        --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
        --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
        --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

        --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
        --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
        --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
        --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
        --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
        --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
        --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

        --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
        --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
        --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
        --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
        --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
        --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
        --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

        --popup-border-width: {{ settings.popup_border_thickness }}px;
        --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
        --popup-corner-radius: {{ settings.popup_corner_radius }}px;
        --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
        --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
        --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
        --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

        --drawer-border-width: {{ settings.drawer_border_thickness }}px;
        --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
        --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
        --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
        --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
        --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

        --spacing-sections-desktop: {{ settings.spacing_sections }}px;
        --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

        --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
        --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
        --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
        --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
        --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
        --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

        --buttons-radius: {{ settings.buttons_radius }}px;
        --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
        --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
        --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
        --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
        --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
        --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

        --inputs-radius: {{ settings.inputs_radius }}px;
        --inputs-border-width: {{ settings.inputs_border_thickness }}px;
        --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
        --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
        --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
        --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
        --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
        --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
        --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

        --variant-pills-radius: {{ settings.variant_pills_radius }}px;
        --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
        --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
        --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
        --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
    {% endstyle %}

    {{ 'base.css' | asset_url | stylesheet_tag }}

    {%- unless settings.type_body_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}
    {%- unless settings.type_header_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}

    {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
      {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
      <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.predictive_search_enabled -%}
      <link
        rel="stylesheet"
        href="{{ 'component-predictive-search.css' | asset_url }}"
        media="print"
        onload="this.media='all'"
      >
    {%- endif -%}

    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>

  </head>

  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>

    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    <ul hidden>
      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>

    <script>
      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}',
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
      };

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
      };

      window.quickOrderListStrings = {
        itemsAdded: `{{ 'sections.quick_order_list.items_added.other' | t: quantity: '[quantity]' }}`,
        itemAdded: `{{ 'sections.quick_order_list.items_added.one' | t: quantity: '[quantity]' }}`,
        itemsRemoved: `{{ 'sections.quick_order_list.items_removed.other' | t: quantity: '[quantity]' }}`,
        itemRemoved: `{{ 'sections.quick_order_list.items_removed.one' | t: quantity: '[quantity]' }}`,
        viewCart: `{{- 'sections.quick_order_list.view_cart' | t -}}`,
        each: `{{- 'sections.quick_order_list.each' | t: money: '[money]' }}`,
      };

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
        recipientFormExpanded: `{{ 'recipient.form.expanded' | t }}`,
        recipientFormCollapsed: `{{ 'recipient.form.collapsed' | t }}`,
      };
    </script>

    {%- if settings.predictive_search_enabled -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    <script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
    viewCountElement.style.marginTop = "20px";
    viewCountElement.style.marginBottom = "10px";
  
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginBottom = "20px";
  
    var form = document.querySelector('.price__container .price__regular');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

  </body>
  
</html>

[TrendBlend]

Sure, above is a picture of what my product page currently looks like.

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    {%- endunless -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>
    
    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
    {%- if settings.animations_reveal_on_scroll -%}
      <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

    {% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      {% for scheme in settings.color_schemes -%}
        {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
        {% if forloop.index == 1 -%}
          :root,
        {%- endif %}
        .color-{{ scheme.id }} {
          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        {% if scheme.settings.background_gradient != empty %}
          --gradient-background: {{ scheme.settings.background_gradient }};
        {% else %}
          --gradient-background: {{ scheme.settings.background }};
        {% endif %}

        {% liquid
          assign background_color = scheme.settings.background
          assign background_color_brightness = background_color | color_brightness
          if background_color_brightness <= 26
            assign background_color_contrast = background_color | color_lighten: 50
          elsif background_color_brightness <= 65
            assign background_color_contrast = background_color | color_lighten: 5
          else
            assign background_color_contrast = background_color | color_darken: 25
          endif
        %}

        --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
        --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
        --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
        --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
        --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
      }
      {% endfor %}

      {{ scheme_classes | prepend: 'body' }} {
        color: rgba(var(--color-foreground), 0.75);
        background-color: rgb(var(--color-background));
      }

      :root {
        --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};
        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

        --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

        --media-padding: {{ settings.media_padding }}px;
        --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
        --media-border-width: {{ settings.media_border_thickness }}px;
        --media-radius: {{ settings.media_radius }}px;
        --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
        --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
        --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
        --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
        --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

        --page-width: {{ settings.page_width | divided_by: 10 }}rem;
        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

        --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
        --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
        --product-card-text-alignment: {{ settings.card_text_alignment }};
        --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
        --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
        --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
        --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

        --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
        --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
        --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
        --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
        --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
        --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
        --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

        --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
        --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
        --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
        --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
        --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
        --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
        --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

        --popup-border-width: {{ settings.popup_border_thickness }}px;
        --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
        --popup-corner-radius: {{ settings.popup_corner_radius }}px;
        --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
        --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
        --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
        --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

        --drawer-border-width: {{ settings.drawer_border_thickness }}px;
        --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
        --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
        --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
        --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
        --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

        --spacing-sections-desktop: {{ settings.spacing_sections }}px;
        --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

        --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
        --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
        --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
        --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
        --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
        --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

        --buttons-radius: {{ settings.buttons_radius }}px;
        --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
        --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
        --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
        --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
        --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
        --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

        --inputs-radius: {{ settings.inputs_radius }}px;
        --inputs-border-width: {{ settings.inputs_border_thickness }}px;
        --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
        --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
        --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
        --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
        --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
        --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
        --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

        --variant-pills-radius: {{ settings.variant_pills_radius }}px;
        --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
        --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
        --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
        --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
    {% endstyle %}

    {{ 'base.css' | asset_url | stylesheet_tag }}

    {%- unless settings.type_body_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}
    {%- unless settings.type_header_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}

    {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
      {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
      <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.predictive_search_enabled -%}
      <link
        rel="stylesheet"
        href="{{ 'component-predictive-search.css' | asset_url }}"
        media="print"
        onload="this.media='all'"
      >
    {%- endif -%}

    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>

  </head>

  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>

    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    <ul hidden>
      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>

    <script>
      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}',
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
      };

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
      };

      window.quickOrderListStrings = {
        itemsAdded: `{{ 'sections.quick_order_list.items_added.other' | t: quantity: '[quantity]' }}`,
        itemAdded: `{{ 'sections.quick_order_list.items_added.one' | t: quantity: '[quantity]' }}`,
        itemsRemoved: `{{ 'sections.quick_order_list.items_removed.other' | t: quantity: '[quantity]' }}`,
        itemRemoved: `{{ 'sections.quick_order_list.items_removed.one' | t: quantity: '[quantity]' }}`,
        viewCart: `{{- 'sections.quick_order_list.view_cart' | t -}}`,
        each: `{{- 'sections.quick_order_list.each' | t: money: '[money]' }}`,
      };

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
        recipientFormExpanded: `{{ 'recipient.form.expanded' | t }}`,
        recipientFormCollapsed: `{{ 'recipient.form.collapsed' | t }}`,
      };
    </script>

    {%- if settings.predictive_search_enabled -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    <script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
    viewCountElement.style.marginTop = "20px";
    viewCountElement.style.marginBottom = "10px";
  
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginBottom = "20px";
  
    var form = document.querySelector('.price__container .price__regular');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

  </body>
  
</html>

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

Ok you have something modified there, maybe by an app or by you.

Erase everything and paste this 🙂

<script>
document.addEventListener('DOMContentLoaded', function () {
    var minViews = 2;
    var maxViews = 20;
    var minSold = 10;
    var maxSold = 100;

    var viewText = 'people are viewing this product right now.';
    var soldText = 'sold in the last 22 hours';
    
    var viewCountElement = document.createElement('div');
    viewCountElement.className = 'view-count shopify-payment-button';
    viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
    viewCountElement.style.marginTop = "20px";
    viewCountElement.style.marginBottom = "10px";
  
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginBottom = "20px";
  
    var form = document.querySelector('product-info .no-js-hidden');
    form.appendChild(viewCountElement);
    form.appendChild(soldCountElement);
});
</script>

[TrendBlend]

Hey @ThePrimeWeb im now trying to change the numbers of the viewers after a couple of seconds, I got this code 

        document.addEventListener('DOMContentLoaded', function () {

          var minViews = 2;
          var maxViews = 6;
          var viewCount = Math.floor(Math.random() * (maxViews - minViews) + minViews);
          var minSold = 2;
          var maxSold = 8;
          var soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);
          var soldNow = 2;

          var viewText = 'mensen kijken nu naar dit product.';
          var viewEmoji = '👁️';
          var soldText = 'verkocht in de laatste 24 uur.';
          var soldEmoji = '🎟️';

          var viewCountElement = document.createElement('div');
          viewCountElement.className = 'view-count shopify-payment-button';
          viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
          viewCountElement.style.marginTop = "20px";
          viewCountElement.style.marginBottom = "10px";

          var soldCountElement =  document.createElement('div');
          soldCountElement.className = 'sold-count shopify-payment-button';
          soldCountElement.innerText = soldEmoji + ' ' + soldNow + ' ' + soldText;
          soldCountElement.style.marginBottom = "20px";

          var form = document.querySelector('product-info .no-js-hidden');

          form.appendChild(viewCountElement);
          form.appendChild(soldCountElement);

          
          function updateViewers() {
              var newViewCountElement =  document.createElement('div');
              newViewCountElement.className = 'new-view-count shopify-payment-button';
            
              // Generate a random number between 2 and 7
              var newViewcount = Math.floor(Math.random() * 6) + 2 + viewCount;
              newViewCountElement.innerText = viewEmoji + ' ' + newViewCount + ' ' + viewText;
              newViewCountElement.style.marginTop = "20px";
              newViewCountElement.style.marginBottom = "10px";

              form.appendChild(newViewCountElement);
              form.appendChild(soldCountElement);
          }
          setInterval(updateViewers, 2000);//5000
          
      });

but nothing is changing, do you have an idea why? 

[ThePrimeWeb]

Hey @TrendBlend,

This should work. Just change the display text back to your preferred language.

    <script>
  document.addEventListener('DOMContentLoaded', function () {
     setInterval(function(){
       try{
        document.querySelector('.view-count.shopify-payment-button').remove();
        document.querySelector('.sold-count.shopify-payment-button').remove(); 
       } catch {
         console.log('first instance')
       }
      var minViews = 2;
      var maxViews = 20;
      var minSold = 10;
      var maxSold = 100;
      
      var viewText = 'people are viewing this product right now.';
      var soldText = 'sold in the last 22 hours';
      
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
      viewCountElement.style.marginTop = "20px";
      viewCountElement.style.marginBottom = "10px";
      
      var soldCountElement =  document.createElement('div');
      soldCountElement.className = 'sold-count shopify-payment-button';
      soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
      soldCountElement.style.marginBottom = "20px";
      
      var form = document.querySelector('product-info .no-js-hidden');
      form.appendChild(viewCountElement);
      form.appendChild(soldCountElement);  
     }, 2000);
      
  });
  </script>

[ThePrimeWeb · Accepted solution]

Sorry @TrendBlend,

Ignore that and use this. Only thing is, Sold amount needs to be on top because the view count is always changing and appending to the end

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var minSold = 10;
    var maxSold = 100;    

    var soldText = 'sold in the last 22 hours';
    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = Math.floor(Math.random() * (maxSold - minSold) + minSold) + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    
    
    var form = document.querySelector('product-info .no-js-hidden');
    form.appendChild(soldCountElement);  
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      
      var minViews = 2;
      var maxViews = 20;

      var viewText = 'people are viewing this product right now.';
    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + viewText;
      form.appendChild(viewCountElement);
      viewCountElement.style.marginBottom = "20px";
     }, 2000);
      
  });
  </script>

[TrendBlend]

Hey @ThePrimeWeb,

Its working good! I only want to keep the integer the same when refreshing so stored in like a map or something and I want the numbers to differ between different products but also stay the same when you refresh, but the numbers still have to change after xxx seconds, do you know how to do this? I'm very thankful for your help!

I got this now:

<script>
  document.addEventListener('DOMContentLoaded', function () {

    var form = document.querySelector('product-info .no-js-hidden');

    var minSold = 10;
    var maxSold = 20;    
    var soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);

    var soldText = 'verkocht in de laatste 24 uur.';
    var soldEmoji = '🎟️';

    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    form.appendChild(soldCountElement);  
    
        setInterval(function(){
      try{
        document.querySelector('.sold-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);


    soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    form.appendChild(soldCountElement);  
    
          
     }, 300000);

      var minViews = 2;
      var maxViews = 20;
      var viewCount = Math.floor(Math.random() * (maxViews - minViews) + minViews);

      var viewText = 'mensen kijken nu naar dit product.';
      var viewEmoji = '👁️';

    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
    
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      //maak kans 5% kans om 3 omhoog te gaan 15% kans om 2 omhoog te gaan 25% kans om 1 omhoog te gaan 10% gelijk
      //kans 5% om 3 omlaag, 15% om 2 omlaag, 25% 1 omlaag
      var forNew = viewCount;

      let randomNumber = Math.floor(Math.random() * 100) + 1;
      if (randomNumber <= 5) {
        viewCount = forNew + 3;
      } else if (randomNumber > 5 && randomNumber <= 20) {
        viewCount = forNew + 2;
      } else if (randomNumber > 20 && randomNumber <= 45) {
        viewCount = forNew + 1;
      } else if (randomNumber > 45 && randomNumber <= 55) {
        // nothing happens
      } else if (randomNumber > 55 && randomNumber <= 60) {
        viewCount = forNew - 3;
      } else if (randomNumber > 60 && randomNumber <= 75) {
        viewCount = forNew - 2;
      } else if (randomNumber > 75 && randomNumber <= 100) {
        viewCount = forNew - 1;
      }

      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);

     }, 5000);//60sec = 60000

    
  });
  </script>

and it's doing good but I just want the integer to stay the same when refreshing and not giving a total different number than a second ago by like a map or something to store the integer in.

And the numbers should differ between different products but like stay the same whenever you go back to the product in like 5 sec

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

Now I'm building a whole app here!!

<script>
  document.addEventListener('DOMContentLoaded', function () {

    var form = document.querySelector('product-info .no-js-hidden');

    var minSold = 10;
    var maxSold = 20;    
    var soldCount = localStorage.getItem("soldCount") ?? Math.floor(Math.random() * (maxSold - minSold) + minSold);
    localStorage.setItem("soldCount", soldCount);
    soldCount = parseInt(soldCount);
    var soldText = 'verkocht in de laatste 24 uur.';
    var soldEmoji = '️';

    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    form.appendChild(soldCountElement);  
    
    setInterval(function(){
      try{
        document.querySelector('.sold-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);
  
  
      soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
      soldCountElement.style.marginTop = "10px";
      form.appendChild(soldCountElement);  
      localStorage.setItem("soldCount", soldCount);
          
     }, 300000);

      var minViews = 2;
      var maxViews = 20;
      var viewCount = localStorage.getItem("viewCount") ?? Math.floor(Math.random() * (maxViews - minViews) + minViews);
      localStorage.setItem("viewCount", viewCount);

      viewCount = parseInt(viewCount);

    
      var viewText = 'mensen kijken nu naar dit product.';
      var viewEmoji = '️';

    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
    
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      //maak kans 5% kans om 3 omhoog te gaan 15% kans om 2 omhoog te gaan 25% kans om 1 omhoog te gaan 10% gelijk
      //kans 5% om 3 omlaag, 15% om 2 omlaag, 25% 1 omlaag
      var forNew = viewCount;

      let randomNumber = Math.floor(Math.random() * 100) + 1;
      if (randomNumber <= 5) {
        viewCount = forNew + 3;
      } else if (randomNumber > 5 && randomNumber <= 20) {
        viewCount = forNew + 2;
      } else if (randomNumber > 20 && randomNumber <= 45) {
        viewCount = forNew + 1;
      } else if (randomNumber > 45 && randomNumber <= 55) {
        // nothing happens
      } else if (randomNumber > 55 && randomNumber <= 60) {
        viewCount = forNew - 3;
      } else if (randomNumber > 60 && randomNumber <= 75) {
        viewCount = forNew - 2;
      } else if (randomNumber > 75 && randomNumber <= 100) {
        viewCount = forNew - 1;
      }

      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
      localStorage.setItem("viewCount", viewCount);
     }, 5000);//60sec = 60000

    
  });
  </script>

[TrendBlend]

Thanks!!! It works, the only thing now is that the numbers are showing the same on every product page for different products which should differ, is this possible?

[ThePrimeWeb]

Hey @TrendBlend,

That would be very time consuming. You try to move the script to product template and set the localstorage item to

{{ product.id}}_viewCount

and 

{{ product.id}}_soldCount

This should get you started.

Note: At this point in time, it's much better to download an app. 

[TrendBlend]

Sorry I don't know how to do that, can I maybe assign this code to 1 product only so it only shows on that product page?

[ThePrimeWeb]

Not really, for that you need to do the above suggestion and more.

[TrendBlend]

Can you maybe do it for me I will buy you a coffee, I just don't know where to put which code.

[ThePrimeWeb]

Hey @TrendBlend,

I don't accept it as a payment. If I was hired, that's a different story.

Everyone who bought me a coffee decided to do that themselves, they didn't come to me and say "do this and I'll buy you a coffee" and I never told them to pay me that way either. 

[TrendBlend]

How much does it cost to hire you to do this? 

[ThePrimeWeb]

It's ok, you don't have to hire me. I'll send you the code later with instructions, maybe tomorrow or day after. I don't have time to write and test out the whole thing today.

[TrendBlend]

Thank you so much, you are a legend 🙂

[ThePrimeWeb · Accepted solution]

Hey @TrendBlend,

Go to your edit code and look for "main-product.liquid"

There, around line 674 or so, you should see the {% schema %} opening, right above it is the </section> closing tag. Paste this code above that.

See the first array "products_not_include", you can add products there so that this counter will not appear for those products. Make sure you add the name exactly as it is in the products admin menu. Copy and paste from there so it's accurate. I added 2 samples to show you there, "Gift Card" and "Selling Plans Ski Wax". Comma seperate and add more if you need to. And also this will automatically take care of showing different values for different products. That's also setup already.

  <script>
    document.addEventListener('DOMContentLoaded', function () {

      var products_not_include = ["Gift Card", "Selling Plans Ski Wax"];

      if ( products_not_include.includes('{{ product.title }}') ) {
          return;
      }
      var form = document.querySelector('product-info .no-js-hidden');
    
      var minSold = 10;
      var maxSold = 20;    
      var soldCount = localStorage.getItem("{{ product.id }}_soldCount") ?? Math.floor(Math.random() * (maxSold - minSold) + minSold);
      localStorage.setItem("{{ product.id }}_soldCount", soldCount);
      soldCount = parseInt(soldCount);
      var soldText = 'verkocht in de laatste 24 uur.';
      var soldEmoji = '️';
    
      
      var soldCountElement =  document.createElement('div');
      soldCountElement.className = 'sold-count shopify-payment-button';
      soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
      soldCountElement.style.marginTop = "10px";
      form.appendChild(soldCountElement);  
      
      setInterval(function(){
        try{
          document.querySelector('.sold-count.shopify-payment-button').remove();
        } catch {
           console.log('first instance')
        }
        soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);
    
    
        soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
        soldCountElement.style.marginTop = "10px";
        form.appendChild(soldCountElement);  
        localStorage.setItem("{{ product.id }}_soldCount", soldCount);
            
       }, 300000);
    
        var minViews = 2;
        var maxViews = 20;
        var viewCount = localStorage.getItem("{{ product.id }}_viewCount") ?? Math.floor(Math.random() * (maxViews - minViews) + minViews);
        localStorage.setItem("{{ product.id }}_viewCount", viewCount);
    
        viewCount = parseInt(viewCount);
    
      
        var viewText = 'mensen kijken nu naar dit product.';
        var viewEmoji = '️';
    
      
        var viewCountElement = document.createElement('div');
        viewCountElement.className = 'view-count shopify-payment-button';
        viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
        viewCountElement.style.marginBottom = "20px";
        form.appendChild(viewCountElement);
      
      setInterval(function(){
        try{
          document.querySelector('.view-count.shopify-payment-button').remove();
        } catch {
           console.log('first instance')
        }
        //maak kans 5% kans om 3 omhoog te gaan 15% kans om 2 omhoog te gaan 25% kans om 1 omhoog te gaan 10% gelijk
        //kans 5% om 3 omlaag, 15% om 2 omlaag, 25% 1 omlaag
        var forNew = viewCount;
    
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        if (randomNumber <= 5) {
          viewCount = forNew + 3;
        } else if (randomNumber > 5 && randomNumber <= 20) {
          viewCount = forNew + 2;
        } else if (randomNumber > 20 && randomNumber <= 45) {
          viewCount = forNew + 1;
        } else if (randomNumber > 45 && randomNumber <= 55) {
          // nothing happens
        } else if (randomNumber > 55 && randomNumber <= 60) {
          viewCount = forNew - 3;
        } else if (randomNumber > 60 && randomNumber <= 75) {
          viewCount = forNew - 2;
        } else if (randomNumber > 75 && randomNumber <= 100) {
          viewCount = forNew - 1;
        }
    
        viewCountElement.className = 'view-count shopify-payment-button';
        viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
        viewCountElement.style.marginBottom = "20px";
        form.appendChild(viewCountElement);
        localStorage.setItem("{{ product.id }}_viewCount", viewCount);
     }, 5000);//60sec = 60000
  
    
  });
  </script>

Screenshot for reference.

[TrendBlend]

thank you so much

[TrendBlend]

Hey @ThePrimeWeb,

i noticed one more small detail, the added text on the product page disappears whenever someone chooses another variant of the product, for example color or size. Do you know how the numbers stay the same whenever the color or size or anything changes?

[RoD]

Hi there, I love this script I have been trying it. 
But I have a problem, sometimes I am getting Minus - visitors,
Screenshot attached
Can you help me to get only positive visitors

thank you 
regards

[nemeartola]

Hi, RoD. How were you able to add those emojis in there? It looks way better. 

Thanks!

[nemeartola]

Hey @RoD ! 

I noticed that my store also shows minus visitors sometimes. Were you able to fix this at?

[nemeartola]

@ThePrimeWeb Please ignore my last comment. I was able to fix it with ChatGPT lol. @RoD I'll share the code here:

<script>
  document.addEventListener('DOMContentLoaded', function () {

    var products_not_include = ["Gift Card", "Selling Plans Ski Wax"];

    if ( products_not_include.includes('{{ product.title }}') ) {
        return;
    }
    var form = document.querySelector('product-info .no-js-hidden');
  
    var minSold = 10;
    var maxSold = 20;    
    var soldCount = localStorage.getItem("{{ product.id }}_soldCount") ?? Math.floor(Math.random() * (maxSold - minSold) + minSold);
    localStorage.setItem("{{ product.id }}_soldCount", soldCount);
    soldCount = parseInt(soldCount);
    var soldText = 'people booked in the last 24 hours.';
    var soldEmoji = '️';
  
    
    var soldCountElement =  document.createElement('div');
    soldCountElement.className = 'sold-count shopify-payment-button';
    soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
    soldCountElement.style.marginTop = "10px";
    form.appendChild(soldCountElement);  
    
    setInterval(function(){
      try{
        document.querySelector('.sold-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      soldCount = Math.floor(Math.random() * (maxSold - minSold) + minSold);
  
  
      soldCountElement.innerText = soldEmoji + ' ' + soldCount + ' ' + soldText;
      soldCountElement.style.marginTop = "10px";
      form.appendChild(soldCountElement);  
      localStorage.setItem("{{ product.id }}_soldCount", soldCount);
          
     }, 300000);
  
      var minViews = 2;
      var maxViews = 20;
      var viewCount = localStorage.getItem("{{ product.id }}_viewCount") ?? Math.floor(Math.random() * (maxViews - minViews) + minViews);
      localStorage.setItem("{{ product.id }}_viewCount", viewCount);
  
      viewCount = parseInt(viewCount);
  
    
      var viewText = 'are viewing this product right now.';
      var viewEmoji = '️';
  
    
      var viewCountElement = document.createElement('div');
      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
    
    setInterval(function(){
      try{
        document.querySelector('.view-count.shopify-payment-button').remove();
      } catch {
         console.log('first instance')
      }
      //maak kans 5% kans om 3 omhoog te gaan 15% kans om 2 omhoog te gaan 25% kans om 1 omhoog te gaan 10% gelijk
      //kans 5% om 3 omlaag, 15% om 2 omlaag, 25% 1 omlaag
      var forNew = viewCount;
  
      let randomNumber = Math.floor(Math.random() * 100) + 1;
      if (randomNumber <= 5) {
        viewCount = forNew + 3;
      } else if (randomNumber > 5 && randomNumber <= 20) {
        viewCount = forNew + 2;
      } else if (randomNumber > 20 && randomNumber <= 45) {
        viewCount = forNew + 1;
      } else if (randomNumber > 45 && randomNumber <= 55) {
        // nothing happens
      } else if (randomNumber > 55 && randomNumber <= 60) {
        viewCount = forNew - 3;
      } else if (randomNumber > 60 && randomNumber <= 75) {
        viewCount = forNew - 2;
      } else if (randomNumber > 75 && randomNumber <= 100) {
        viewCount = forNew - 1;
      }
  
      // Ensure viewCount does not go below zero
      if (viewCount < 0) {
        viewCount = 0;
      }

      viewCountElement.className = 'view-count shopify-payment-button';
      viewCountElement.innerText = viewEmoji + ' ' + viewCount + ' ' + viewText;
      viewCountElement.style.marginBottom = "20px";
      form.appendChild(viewCountElement);
      localStorage.setItem("{{ product.id }}_viewCount", viewCount);
   }, 5000);//60sec = 60000

  });
</script>

[nemeartola]

Hi @ThePrimeWeb !

That's some really cool stuff you did! Thank you so much. I've had it at my store for a bit now. 

The only thing is I get minus visitors sometimes, like another user pointed out in a comment in this thread. Would you know how to fix this? 

Thanks so much 🙏

[irisbr325]

Thanks!

[Will2]

Hi PrimeWeb,

Really want to get something like this working on my store, I use custom product pages on pagefly, and need a solution that can be added into a "custom liquid" block is this something you can do??? I've tried to implement this code into pagefly and can't get it to work?