Limit number of products on Product page

To limit number of products on product page and show a numbered pagination like this.

#1. You can use this code to Shop Page Header Injection

<div class="pagination"></div>
<style>
.pagination {
    margin-top: 20px;
}
.pagination span {
    cursor: pointer;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #ccc;
}
.pagination span.active {
    background-color: #007bff;
    color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.pagination').insertAfter('.list-grid');
    const itemsPerPage = 12; 
    const totalItems = $('.grid-item').length; 
    const totalPages = Math.ceil(totalItems / itemsPerPage); 
    
    $('.grid-item').hide().slice(0, itemsPerPage).show();
   
    for (let i = 0; i < totalPages; i++) {
        $('.pagination').append(`<span class="page">${i + 1}</span>`);
    }
   
    $('.pagination').on('click', '.page', function() {
        const pageIndex = $(this).text() - 1; 
       
        $('.grid-item').hide();
       
        const start = pageIndex * itemsPerPage;
        const end = start + itemsPerPage;
       
        $('.grid-item').slice(start, end).show();
       
        $('.page').removeClass('active');
        $(this).addClass('active');
    });
    
    $('.pagination .page').first().click();
});
</script>

#2. You can change number of items/page here

#3. You can change color, border,… here