Solved

Random number viewers, sold in last day

TrendBlend
Excursionist
54 0 7

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?

Screenshot_2023-07-22-03-54-07-01_a23b203fd3aafc6dcb84e438dda678b6.jpg

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.

Accepted Solutions (5)

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>.

ThePrimeWeb_0-1706530224426.png

 

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>

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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.

ThePrimeWeb_0-1707296740694.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 25 (25)

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>.

ThePrimeWeb_0-1706530224426.png

 

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>

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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
Shopify Partner
1143 296 224

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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

ThePrimeWeb
Shopify Partner
1143 296 224

Hey @TrendBlend,

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

Schermafbeelding 2024-01-29 135028.png

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
Excursionist
54 0 7

Schermafbeelding 2024-01-29 135028.png

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
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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
Shopify Partner
1143 296 224

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>

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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
Shopify Partner
1143 296 224

This is an 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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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
Shopify Partner
1143 296 224

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. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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
Shopify Partner
1143 296 224

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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

ThePrimeWeb
Shopify Partner
1143 296 224

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. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

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

ThePrimeWeb
Shopify Partner
1143 296 224

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

Thank you so much, you are a legend 🙂

ThePrimeWeb
Shopify Partner
1143 296 224

This is an 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.

ThePrimeWeb_0-1707296740694.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
TrendBlend
Excursionist
54 0 7

thank you so much

 

TrendBlend
Excursionist
54 0 7

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?