How to Add Pagination In Shopify

How to Add Pagination In Shopify

In this post we talk about Pagination In Shopify

Step 1: First Crate Snippet pagination and paste below code

	
		
	

Step 2: Add CSS to the CSS file below to paste the code.

	
		.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;}
	

Step 3: Add Code in collection-template.liquid

	
		{% if paginate.pages > 1 %}
			{% include 'pagination' %}
		{% endif %}
	

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top