Website Building » Shopify » How Do I Change the Number of Products Per Page on Shopify?

How Do I Change the Number of Products Per Page on Shopify?

Last updated on October 2, 2022 @ 12:32 am

There are a few different ways that you can change the number of products per page on Shopify. You can do this either through the settings in your Shopify admin, or by using a little bit of code.

If you want to change the number of products per page through the Shopify admin, you can go to “Online Store > Preferences”. From there, you will see a section called “Products per page”. You can use the drop-down menu to select how many products you want to show per page.

If you want to change the number of products per page with code, you will need to edit your theme.liquid file. You can do this by going to “Online Store > Themes”, and then clicking on the “Edit code” button for your theme. Once you’re in the code editor, find the “theme.liquid” file and look for the following line of code:

{% if collection.products_count != blank %}
This line of code is what tells Shopify how many products to show per page. By default, it is set to show 50 products per page. If you want to change it to show 20 products per page, you would change that line of code to read:

PRO TIP: If you are not careful when changing the number of products per page on Shopify, you could end up with a lot of extra space on your pages that looks odd and may increase your page loading time. Be sure to test your changes before making them live on your site.

{% if collection.products_count != 20 %}
Once you’ve made that change, save your file and refresh your shop’s pages to see the changes take effect.

You can also use code to create a “view more” button that will load additional products onto the page as they are clicked. This is a great option if you have a lot of products and don’t want to overwhelm your customers with too many options at once.

To set this up, you’ll need to add a little bit of code to your theme’s JavaScript file.js” file and add the following code at the bottom:

$(‘.view-more-button’).on(‘click’, function() { var url = $(‘.attr(‘href’); $(‘.product-list’).load(url + ‘ .product-list > *’); return false; }); This code will create a button that says “View More” and when clicked, it will load additional products into your shop from the collection that is being viewed. You can style this button however you like using CSS.

Changing the number of products per page on Shopify is a relatively simple process, whether you’re doing it through the settings in your Shopify admin or by editing your theme’s code. By making these changes, you can control how much information is presented to your customers at once, which can help improve their overall experience on your shop

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.