I added some products with using this function in my views:

def All( request  ):
    p=product.objects.all()
    return render(request,'home.html',{'p':p})

And my template looks like this:

<div class="grid">  
  
         {%for p in p%} 
                <div class='card'>
                    <img src="{{p.image}}"></img>
                    <p id="id">{{p.description}}</p>
                    <a href="{{p.buy}}" target='_blank' rel='noopener noreferrer'>
                        <button ><span class="price"> ${{p.price}}</span> buy</button>
                    </a>    




                </div>

         {%endfor%} 

But I do not know what should I do to be able to limit the products, for example I want to have 10 products after the page is loaded and then after scrolling I want 10 more products to appear.

How can I do that?