Separate coding for mobile and desktop versions of a theme

New Member
1 0 0

Hi there,

I'm using the POP theme on my store. I'm looking for a way to change the amount of products in a row on the mobile version of my site but not the desktop version. Is this possible?

 

I know I can edit the theme as a whole using the product-grid-item.liquid but is there a part of the code that relates purely to mobile and won't affect my desktop?

 

Thanks guys!

0 Likes
Astronaut
1925 0 380

Yes, it's possibe.  First you have to understand that the only difference between the "mobile" version and "desktop" version is the width of the browser.  Instead of recognizing a "mobile" version and a "desktop" version, the Pop Theme recognizes three different sizes.  Small is when the width is less than 480px.  Medium is when the width is between 480px and 1024px.  Large is when the width is greater than 1024px.

Let's take a look at one of your theme files.  Open Templates/collection.liquid.  Go to Line 33 and you should find:

          {% assign grid_item_width = 'medium--one-third large--one-third' %}

This line defines the grid item width (i.e. the width of each product in the collection page).  When the browser size is Medium, each grid item will take up one-third of the total width.  Also, when the browser size is Large, each grid item will take up one-third of the total width.

Let's change that line to:

          {% assign grid_item_width = 'small--one-whole medium--one-half large--one-third' %}

Now, when the browser size is Small, each grid item will take up the total width. When the browser size is Medium, each grid item will take up one-half of the total width.  When the browser size is Large, each grid item will take up one-third of the total width.

I hope this helps.

0 Likes
Highlighted
Excursionist
34 0 6

High Alex, I think this might be the answer that ive been searching for except, what would i need to change in the code if I am using a minimal theme? Thanks in advance!

 

0 Likes
Astronaut
1925 0 380

Unfortunately the Minimal theme is not coded in the same way.  It is much more difficult to make these kinds of changes in the Minimal theme.  I won't go over how to do that.  Sorry.

0 Likes