Tutorial: Changing the Number of Products Displayed Per Row

Bo
Shopify Staff
Shopify Staff
1680 175 489

 

 

 

Introduction:

Product images, titles, and prices are wrapped in a container called product cards. Each product card has a set width. In order to change the number of products shown per row, you will need to adjust the product card width. Follow the steps below to change the width:

 

Simple

Part I: editing ‘product-grid-item.liquid’

  1. Open ‘product-grid-item.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that. 
  3. Click Save.

Part II: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. Add the following code to the very bottom of the file: 
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    @media only screen and (min-width: 750px) {
      .custom-width.medium-up--one-half:nth-child(2n+1), .custom-width.medium-up--one-third:nth-child(3n+1), .custom-width.medium-up--one-quarter:nth-child(4n+1), .custom-width.medium-up--one-fifth:nth-child(5n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.small--one-half:nth-child(2n+1) {
        clear: none;
      }
    }

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

       3. Click Save. 

 

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed in one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

Debut

Part I: editing ‘collection-template.liquid’.

  1. Open ‘collection-template.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that. You will find two instances of {{ grid_item_width }}, you’ll want to add "custom-width" to the first instance or both.
  3. Find {% paginate collection.products by limit %}, this code determines how many products will be displayed on one page. You can change the limit to a whole number based on how many products you want to display per page.
  4. Click Save.

 

Part II: editing ‘theme.scss.liquid’ or ‘theme.css.liquid’.

  1. Open ‘theme.scss.liquid’ or ‘theme.css.liquid’.
  2. On the bottom of the file, add this code: 
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    @media only screen and (min-width: 750px) {
      .custom-width.medium-up--one-half:nth-child(2n+1), .custom-width.medium-up--one-third:nth-child(3n+1), .custom-width.medium-up--one-quarter:nth-child(4n+1), .custom-width.medium-up--one-fifth:nth-child(5n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.small--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save. 

 

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed in one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

Venture

Part I: editing ‘collection.liquid’.

  1. Open ‘collection.liquid’.
  2. Find small--one-half medium-up--one-fifth, and add "custom-width" right beside that. You will find two instances of small--one-half medium-up--one-fifth, add "custom-width" to both.
  3. Find {% paginate collection.products by 20 %}, this code determines how many products will be displayed on one page. You can change the limit to a whole number based on how many products you want to display per page.
  4. Click Save.

 

Part II: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code 
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    @media only screen and (min-width: 750px) {
      .custom-width.medium-up--one-half:nth-child(2n+1), .custom-width.medium-up--one-third:nth-child(3n+1), .custom-width.medium-up--one-quarter:nth-child(4n+1), .custom-width.medium-up--one-fifth:nth-child(5n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.small--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save.

 

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

 

Minimal

Part I: editing ‘collection-template.liquid’.

  1. Open ‘collection-template.liquid’.
  2. Find {{grid_item_width}}, and add custom-width right beside that. 
  3. Find {% paginate collection.products by 20 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  4. Click Save.

Part II: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code 
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 25%;
      }
      .custom-width:nth-child(4n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
    

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save.

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

 

Brooklyn

Note: Before altering any code in your theme please make sure your collection grid style is set to ‘Grid’. To change your grid style, go to the theme settings (‘Online store > Themes > Customize’), then, go to a collections page, and find ‘Grid style > Grid’. Once changed to Grid, click Save. 

Part I: editing ‘product-grid-item.liquid’.

  1. Open ‘product-grid-item.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that. 
  3. Click Save.

Part II: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code 
    
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    .grid__row-separator {
      display: none;
    }
    @media only screen and (min-width: 750px) {
      .custom-width.large--one-third:nth-child(3n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.medium--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save.

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

 

Supply

Part I: editing ‘product-grid-item.liquid’.

  1. Open ‘product-grid-item.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that. 
  3. Click Save.

Part 2: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code: 
    
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    @media only screen and (min-width: 750px) {
      .custom-width.medium--one-half:nth-child(2n+1), .custom-width.medium--one-third:nth-child(3n+1), .custom-width.medium--one-quarter:nth-child(4n+1), .custom-width.medium--one-fifth:nth-child(5n+1),
        .custom-width.large--one-half:nth-child(2n+1), .custom-width.large--one-third:nth-child(3n+1), .custom-width.large--one-quarter:nth-child(4n+1), .custom-width.large--one-fifth:nth-child(5n+1) {
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.small--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save.

 

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

 

Boundless

Part I: editing ‘product-grid-item.liquid’.

  1. Open ‘product-grid-item.liquid’.
  2. Find {{ grid_item_width }}, and add "custom-width" right beside that.
  3. Click Save.

Part 2: editing ‘theme.scss.liquid’.

  1. Open ‘theme.scss.liquid’.
  2. On the bottom of the file, add this code: 
    
    /* FOR DESKTOP VIEW */
    @media only screen and (min-width: 750px) {
      .custom-width {
        width: 50%;
      }
      .custom-width:nth-child(2n+1) {
        clear: both !important;
      }
    }
    
    /* FOR MOBILE VIEW */
    @media only screen and (max-width: 749px) {  
      .custom-width {
        width: 33.3%;
      }
      .custom-width:nth-child(3n+1) {
        clear: both !important;
      }
    }
    
    /* Do not edit the following code */
    @media only screen and (min-width: 750px) {
      .custom-width.large-up--one-half:nth-child(2n+1), .custom-width.large-up--one-third:nth-child(3n+1), .custom-width.large-up--one-quarter:nth-child(4n+1), .custom-width.large-up--one-fifth:nth-child(5n+1),
      .custom-width.medium-up--one-sixth:nth-child(6n+1), .custom-width.medium-up--one-quarter:nth-child(4n+1), .custom-width.medium-up--one-third:nth-child(3n+1), .custom-width.medium-up--one-half:nth-child(3n+1), .custom-width.medium--one-third:nth-child(3n+1){
        clear: none;
      }
    }
    @media only screen and (max-width: 749px) {
      .custom-width.small--one-half:nth-child(2n+1) {
        clear: none;
      }
    }
    

 

The width percentages are values you need to change depending on how many products you want to display per row.

.custom-width {width: 33.3%} is your product card’s container. To display more products per row, you will need to change the width percentage to 100% divided by your desired number of products per row. For example, 25% will display 4 products per row, 20% will display 5 products per row, etc.


Then, you will need to change the number after nth-child( to the number of products per row. For example, if you want 4 products per row, change 3n to 4n, for 5 products per row, change that to 5n, etc.

     3. Click Save.

 

Part III  (optional): editing ‘collection-template.liquid’

  1. Open ‘collection-template.liquid’.
  2. Find {% paginate collection.products by 12 %}, this code determines how many products will be displayed on one page. You can change the number based on how many products you want to display per page.
  3. Click Save.

Warning: the number they used here must be divisible by both the mobile and desktop numbers of rows. For example, if you set the page to display 3 products per row on desktop and you set pagination to 9, on the desktop it will look great as it will display the products in a 3x3 grid. However, if you want to display 2 products per row on mobile, and pagination is set to 9, you will have one empty gap on mobile. Please keep this in mind when editing the pagination on your theme. 

 

If you have any questions regarding this tutorial, feel free to comment on this thread. Please note that this tutorial is for Shopify Supported themes only and that we will be unable to assist with any third-party themes.

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BradleyDevilier
New Member
4 0 0

Hi Bo,

Thank you for this tutorial. I had a question regarding the debut theme. I understand what you've done to change the amount of products per page but how can I add in a dropdown that will allow my customers to choose how many items they'd like displayed on each page? I've so far been able to get a dropdown to appear with different values but haven't figured out how to get the page to reload when the value changes.

Thanks,
Bradley

0 Likes
Bo
Shopify Staff
Shopify Staff
1680 175 489

Hey there, @BradleyDevilier 

 

Thank you for reaching out. That level of customization would not be something that we can help with at Shopify Support. What I would recommend is creating a new topic in the Shopify Design board so that you can receive the assistance you need regarding this from developers and experts. Alternatively, you can hire a Shopify Expert http://bit.ly/2FvMzUQ to build this dropdown functionality for you.

 

Best of Luck,

Bo

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes