Debut theme - Change number of products per row depending on screen width

Store Design
1

I’d like to add some custom breaking points to the product catalog layout.

If the screen is 1500px wide or more I’d like to show 4 products per row.

If it’s smaller than 1200px I’d like to show 3 products per row.

If it’s smaller than 950px I’d like to show only 2 products per row.

If it’s smaller than 750px I’d like to show 1 product per row.

Can anyone help?

1 Like
2

Hi,

This is an advanced tutorial. You need knowledge of HTML/CSS.

If you want to Change Number Of Products Per Row Depending On Screen Width. Pls, use CSS Media Queries to custom the CSS. Document in here:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Thank,

3

@DxMartins

While it is easy to make that change, I am afraid it won’t give you the desired effect because as the product grid becomes full width, it still won’t adapt the product cards accordingly - you will still see 5 (or how many you set per row) instead of having more per row as more row space becomes available.

Still, if you want to try it, you need to go to Online Store > Themes then click Actions > Edit code, and from the editor that loads, open the file Assets/theme.scss.liquid. Once open, find this line of code

/*================ Sizing Variables ================*/
$width-site: 1200px;

And change it for

/*================ Sizing Variables ================*/
$width-site: initial;

Hit Save and check it out.

Best wishes!

4

I’m quite comfortable with HTML and CSS, so I’m quite familiar with Media Queries.

This is what I’ve got so far (these changes were added to the bottom of the “theme.css” doc.):

01. I’ve changed the width of the page:

.page-width#Collection { width: 100%; max-width: 1800px;}

02. I’ve changed the products’ image size:

.grid-view-item__image-wrapper {
max-width: 500px !important;
max-height: 500px !important;
}
#Collection .grid-view-item__image {
max-width: 500px !important;
max-height: 500px !important;
}

03. On the “Customize” dashboard I’ve changed the Collections Grid to show 4 products per row.

The Problem: The changes I’ve introduced look fine on a desktop, but, the rows show 4 products all the way down to 750px screen width, which is ridiculous, only then does the layout break to 2 products per row, which is also not ideal for mobile phones.

What I’m trying to do: I’d like to add Media Queries that would change the number of products at different screen widths: (max-width: 750px = 1 product / max-width: 950px = 2 products / max-width: 1200px = 3 products / min-width: 1500 = 4 products). I’ve tried applying Media Queries to different Classes and IDs but nothing works.

EDIT: Since Shopify doesn’t allow us to update the question after 2 hours, which would obviously be extremely useful, I’m doing it here to say that I’ve found a way to at least show one product per row on mobile phones, which is already some progress. Unfortunately, I still don’t know how to change the number of products on other screen widths. Any help would be very appreciated.

To show only one product per row on mobile phones

Open “collection-template.liquid” under “Sections”;

On Line 131, change all “small–one-half” to “small–one-one” as shown below.

 <div class="page-width" id="Collection">
    {% if section.settings.layout == 'grid' %}
      {% case section.settings.grid %}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 3 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-third' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-quarter' -%}
      {% when 5 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-fifth' -%}
      {% endcase %} 
5

Hi,

Pls, share me your site. I’ll help you check it.

Thank,

1 Like
6

Kai-Nguyen Thank you very much for your help.

For anyone interested in a similar solution here are all the steps I took:

This solution will create 3 displays for your catalog depending on screen width

3 products per row above 950px screen width;

2 products per row below 950px screen width;

1 product per row under 750px screen width;

01. DISPLAY 3 PRODUCTS PER ROW ON WIDER SCREES

Simply select 3 products per row as a default.

(On your shop’s dashboard, click the “Customize” button on your theme, go to your catalog page, and from the menu on the left select “Collection Pages”, on the menu on the right, under “Layout” select “Grid”, and under “Products per row (grid only)” select “3”).

02. CHANGE THE CATALOG PAGE WIDTH

Add this code to the bottom of your theme.css file

.page-width#Collection { width: 100%; max-width: 1500px;}

03. CHANGE PRODUCT’S IMAGE SIZE

Place the following code at the bottom of your theme.css file:

.grid-view-item__image-wrapper {
max-width: 500px !important;
max-height: 500px !important;
}
#Collection .grid-view-item__image {
max-width: 500px !important;
max-height: 500px !important;
}

04. SHOW 2 PRODUCT PER ROW IF THE SCREEN WIDTH IS UNDER 950px.

Place the following code at the bottom of your theme.css file:

@media screen and (max-width: 950px) and (min-width: 750px) {
 #Collection .grid__item--collection-template {
   width: 50%;
   clear: none;
  } 
}

05. SHOW 1 PRODUCT PER ROW IF THE SCREEN WIDTH IS UNDER 750px.

Open “collection-template.liquid” under “Sections”;

On Line 131, change all “small–one-half” to “small–one-one” as shown below.

 <div class="page-width" id="Collection">
    {% if section.settings.layout == 'grid' %}
      {% case section.settings.grid %}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 3 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-third' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-quarter' -%}
      {% when 5 %}
        {%- assign grid_item_width = 'small--one-one medium-up--one-fifth' -%}
      {% endcase %} 

That’s it.

7

Hi @DxMartins ,

I am so happy about that

Thank you,

Best wishes!

1 Like