ADD SHOPIFY BUTTON PAGINATION

 

-------------------------------------------------------------------------------------------------------------------

ADD SHOPIFY BUTTON PAGINATION 

CHANGE CODE IN SNIPPET FOLDER FILE pagination.liquid  

ReadMore:

https://www.youtube.com/watch?v=cMyqommSqGE

--------------------------------------------------------------------------------------------------------------------

ADD pagination LINK CODE IN collection-template.liquid IF U DONOT HAVE

--------------------------------------------------------------------------------------------------------------------

{% if paginate.pages > 1 %}

{% include 'pagination' %}
{% endif %}
---------------------------------------------------------------------------------------------------------------------------

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<style>
.pagination {
overflow: hidden;
margin: 30px 0 60px; }
.pagination p {
line-height: 30px;
margin: 0;
font-size: 15px;
letter-spacing: -0.01em; }
.pagination ul {
margin: 10px 0;
list-style: none;
padding: 0; }
.pagination li {
display: inline-block;
font-size: 0;
line-height: 0;
vertical-align: middle;
padding: 0 6px 0 0; }
.pagination .pagination_el a, .pagination .pagination_el span {
font-size: 16px;
height: 44px;
line-height: 44px;
min-width: 44px;
border: 1px solid #e4e4e4;
border-radius: 5px;
font-weight: bold;
text-align: center;
display: inline-block; }
.pagination .pagination_el:hover a {
border-color: #222222; }
.pagination .pagination_prev a {
vertical-align: middle; }
.pagination .pagination_prev i {
font-size: 34px;
margin: 0 5px 0 0; }
.pagination .pagination_next a {
vertical-align: middle; }
.pagination .pagination_next i {
font-size: 34px;
margin: 0 0 0 5px; }
.pagination .pagination_current span {
color: white;
background: #222222; }
.blog_pagination {
text-align: right;
margin-top: 0; }
.blog_pagination span {
margin-right: 5px; }
.blog_pagination .current {
color: #222222; }
</style>
<div class="pagination">
{% if paginate.pages > 1 %}
{% assign A = paginate.current_offset | plus:1 %}
{% assign B = paginate.items %}
{% assign C = paginate.current_offset | plus:paginate.page_size %}
{% if paginate.current_page == paginate.pages %}
{% if A == B %}
<p>{{ A }} {{ pagination_items }} {{ paginate.items }}</p>
{% else %}
<p>{{ A }} – {{ B }} {{ pagination_items }} {{ paginate.items }}</p>
{% endif %}
{% else %}
<p>{{ A }} – {{ C }} {{ pagination_items }} {{ paginate.items }}</p>
{% endif %}
<ul>
<li class="pagination_prev">
{% if paginate.previous.is_link %}
<a href="{{ paginate.previous.url }}" title="{{ 'layout.pagination.previous' | t }}"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
{% endif %}
</li>
{% for part in paginate.parts %}
{% if part.is_link %}
<li class="pagination_el"><a href="{{ part.url }}">{{ part.title }}</a></li>
{% else %}
{% if part.title == paginate.current_page %}
<li class="pagination_current pagination_el"><span>{{ part.title }}</span></li>
{% else %}
<li class="pagination_el"><span>{{ part.title }}</span></li>
{% endif %}
{% endif %}
{% endfor %}
<li class="pagination_next">
{% if paginate.next.is_link %}
<a href="{{ paginate.next.url }}" title="{{ 'layout.pagination.next' | t }}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
{% endif %}
</li>
</ul>
{% else %}
<p>1 – {{ paginate.items }} {{ pagination_items }} {{ paginate.items }}</p>
{% endif %}
</div>

---------------------------------------------------------------------------------------------------------------------