Re: Collection Page On Mobile Shows One Product One Column

Solved

Collection Page On Mobile Shows One Product One Column

Mcato12
New Member
8 0 0

https://mcaulraek.myshopify.com/

 

For my above website. On collection page when we go from mobile it shows one column per product

Need to show 2 Rows coming rather than 1 huge product showing 

 

Please advice 

Accepted Solution (1)
RomanG
Shopify Partner
33 9 12

This is an accepted solution.

@Mcato12 
It's updated!

https://mcaulraek.myshopify.com/collections/deals

Step1 -> snippets/header-js.liquid
changed theme.min.js to theme.js 

Step2-> assets/theme.js
changed $gridItemCol.removeClass().addClass('js-col col-sm-6 col-12') to $gridItemCol.removeClass().addClass('js-col col-sm-6 col-6') at line 4027

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow

View solution in original post

Replies 10 (10)

RomanG
Shopify Partner
33 9 12

Hi @Mcato12 

If you want to show 2 rows, you have to update the individual product item's class col-12 to col-6 in in the collection template. 

RomanG_1-1669918035184.png

RomanG_2-1669918078157.png

 

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
Mcato12
New Member
8 0 0

Not working. The moment i change to 6. It works on mobile for a second and then goes back to its original

 

RomanG
Shopify Partner
33 9 12

Then products appears to be displayed again in JavaScript. We can't solve it without theme access 

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
Mcato12
New Member
8 0 0

Please share your email so we can send you access

 

RomanG
Shopify Partner
33 9 12

roman.garvilov.0309@gmail.com

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
Mcato12
New Member
8 0 0

Invitation is sent . Please check

Mcato12
New Member
8 0 0

If you see from mobile and try to go down and browse collection then the entire collection interface goes back to same style as soon as collection page loads more products. I have kept your settings for you to see the same also on what is the error

 

RomanG
Shopify Partner
33 9 12
roman.gavrilov.0309@gmail.com
It was my fault. I sent you wrong email. please send me invitation again
If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
RomanG
Shopify Partner
33 9 12

This is an accepted solution.

@Mcato12 
It's updated!

https://mcaulraek.myshopify.com/collections/deals

Step1 -> snippets/header-js.liquid
changed theme.min.js to theme.js 

Step2-> assets/theme.js
changed $gridItemCol.removeClass().addClass('js-col col-sm-6 col-12') to $gridItemCol.removeClass().addClass('js-col col-sm-6 col-6') at line 4027

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
Mcato12
New Member
8 0 0

You are a gem. Kuddos to you !!!!!!!!!!!!