Shopify themes, liquid, logos, and UX
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:
Part I: editing ‘product-grid-item.liquid’
Part II: editing ‘theme.scss.liquid’.
/* 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’
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.
Part I: editing ‘collection-template.liquid’.
Part II: editing ‘theme.scss.liquid’ or ‘theme.css.liquid’.
/* 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’
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.
Part I: editing ‘collection.liquid’.
Part II: editing ‘theme.scss.liquid’.
/* 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’
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.
Part I: editing ‘collection-template.liquid’.
Part II: editing ‘theme.scss.liquid’.
/* 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’
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.
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’.
Part II: editing ‘theme.scss.liquid’.
/* 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’
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.
Part I: editing ‘product-grid-item.liquid’.
Part 2: editing ‘theme.scss.liquid’.
/* 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’
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.
Part I: editing ‘product-grid-item.liquid’.
Part 2: editing ‘theme.scss.liquid’.
/* 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’
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.
To learn more visit the Shopify Help Center or the Community Blog.
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
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
To learn more visit the Shopify Help Center or the Community Blog.
didnt work... Nothing happened, just the same 1 item per row in mobile
Hi,
Im using Minimal and i have done every step so far but it dosent seem to work, im a bit uncertain if i pasted the custom-width correctly could you show a screenshot of how it should look with the custom-width added correctly.
My problem is that i have 5 products on every row and i only want 3
Sincerely M
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024