How to Change the Number of Products per Page in Shopify Collections

It’s easy to change the number of products that are listed on your Shopify collection pages.

Indeed, you certainly don’t need to be a professional web developer to pull this off — though you may have to make some edits to your theme code depending on your needs and which method you use. 

Below, we’ll show you how to customize the number of products listed on collection pages through the Shopify admin, and we’ll also review how you can do this and much more with Shogun’s user-friendly visual editor.

• Changing the Number of Products per Page in a Shopify Theme
• Editing Collection Pages with Shogun

Changing the Number of Products per Page in a Shopify Theme

Most Shopify themes will give you an option to change the number of products per page in your collections. For example, here’s how you can access this setting in Shopify’s default Dawn theme: 

• Log in to your Shopify account and select the sales channel that you would like to customize in the left sidebar of the main Shopify control panel. 
• Click on the “Customize” button next to your theme — this will open up Shopify’s built-in theme editor. 
• Use the dropdown menu located at the top of the theme editor to navigate to the page template you want to edit (in most cases, collection pages will be assigned to the “Default collection” template). 
• Click on the “Product grid” section to open its customization settings. 
• Adjust the “Products per page” setting as needed.

You’ll find that your options are somewhat limited here, though. For the Dawn theme, the “Products per page” setting has a minimum of eight products and a maximum of 24 products by default (the exact range available will depend on which theme you’re using). 

If you’d like to go beyond these limits, you’ll need to make some changes to your theme’s Liquid code:

• Select the sales channel that you would like to customize in the left sidebar of the main Shopify control panel. 
• Open the “…” dropdown menu next to your theme and select “Edit code” — this will open Shopify’s code editor. 
• In the left sidebar of the code editor, go to the “sections” folder and open “main-collection-product-grid.liquid” (you can also use the search bar to find this file). 

Look for a chunk of code that looks like this: 

   {
      "type": "range",
      "id": "products_per_page",
      "min": 8,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
    },

To set a different minimum or maximum, just replace the number next to “min” or “max” with the value you’d like to use instead. 

After you save your edits to the code, the allowable range in the “Products per page” setting will automatically be updated in Shopify’s built-in theme editor.

Editing Collection Pages with Shogun

Shogun allows you to add as many products as you want to your collection pages without touching any code. But if you want to use Shogun to customize a page that you’ve already created in Shopify, you’ll first need to import it:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the main Shopify control panel. 
• Open Shogun. 
• Go to the “Pages” section of the Shogun app. Here, you’ll see two tabs: “Shogun” and “Shopify”. 
• Open the “Shopify” tab. This is where you’ll find all of your Shopify pages that have not yet been imported into Shogun. 
• Set the page type filter to “Collection”, then click on the “Import page” button next to the collection page you want to import. 
• Select the “Shopify 2.0 sections” page layout option (the other option won’t allow you to edit or remove the product grid), then select “Import this page”. 

Once the page has been imported, you’ll be able to customize it with Shogun’s visual editor:

• Open Shogun. 
• Go to the “Pages” section of the Shogun app and open the “Shogun” tab. This is where you’ll find all of the pages that you have already imported into Shogun. 
• Select the collection page you just imported — this will open Shogun’s visual editor. 

Since you chose the “Shopify 2.0 sections” page layout option when you imported the page, you’ll be able to click on each section and adjust all of the same settings that are available in Shopify from within Shogun’s visual editor. 

You’ll also be able to use Shogun’s extensive element library to unlock more possibilities for the page. For example, replacing Shopify’s “Product grid” section with Shogun’s “Collection” element will give you more options for how this part of the page looks and functions:

• Select the “Product grid” section that was imported from Shopify — this will open a toolbar just above the section. 
• Click on the “Delete” icon in this toolbar to remove the section from the page. 
• Select the “Elements” icon in the left sidebar of Shogun’s visual editor (it’s the one that looks like a plus sign inside of a circle) to open the element library.
• Scroll down to the “Shopify” section of the element library. These elements will automatically be populated with information from your Shopify catalog, so you won’t need to waste any time filling in all these details yourself. Click and hold on the “Collection” element, then drag it over to wherever you want your products to be featured on the collection page. 
• You’ll then be prompted to select the specific collection that you want to feature — do so, then click on the “Use this collection” button. 

You’ll find that there are many different customization settings available for the “Collection” element. For one, the “Number of products” setting allows you to display as many products as are included in the collection (or you can display only a limited selection if you prefer). Other customization settings for this element include:

• Choose between a grid or slider style for your product collection.
• Determine whether out-of-stock products are hidden or not. 
• Determine how much space is separating the “Collection” element from the surrounding parts of the page.
• Select the exact hex code or RGB values that you would like to use for the background color of the “Collection” element. 
• Add a border or box shadow to your collection. 

In addition to customizing the “Collection” element as a whole, you can also make edits to all the individual pieces that make up this element. 

Within the “Collection” element, each product has its own dedicated “Product Box” element. And inside the “Product Box” element, you’ll find elements such as “Product Image”, “Product Title”, “Product Price”, and “Product Add to Cart”. These are also Shopify elements, so they will automatically pull the relevant information from your Shopify catalog. 

The visual editor makes it easy to customize the styling of each of these elements. For example, you can choose a different font for your product titles, make the product price bigger, select another color for your Add to Cart button, etc. — all with just a few clicks. You can also add, remove, and reorder elements within your product boxes however you want. 

To save time, you can set it up so that any change you make to one product box is also applied to every other product box in the collection. And you can always switch back to editing these elements independently when needed.

Furthermore, you should consider inserting additional elements either above or below the “Collection” element. There are a variety of ways that this can make your collection page more effective and help you achieve your ecommerce goals, such as:

• If you plan to run a limited-time sale for the items in a collection, you can use the “Countdown” element to add a clock that counts down to the end of the sale — this will create a sense of urgency, leading to more purchases. 
• You can add a “Table” element to the page in order to help visitors understand all the different price points and features of the various items in the collection. 
• The “Accordion” element allows you to quickly set up an FAQ section regarding the items in the collection — this can reduce the number of customer support queries that you need to deal with, and it also gives you an opportunity to add more keywords for SEO. 

With the visual editor, element library, and all the other features offered by Shogun, you’ll be able to whip up whatever kind of page design you want for your Shopify collections.