Need 2 product columns on mobile

Solved
Dolly_Lana
Excursionist
23 0 4

I have a custom built site that only shows 1 column of products on mobile view but I need two. Anyone have a fix for this?  Here's one of my collections for an example https://www.dollylana.com/collections/swaddle-blankets

0 Likes

Hi @Dolly_Lana  I think it has something to do with the grid system. You may have to change the product class name to "small--one-half", I have a video talking about how to change the layout of the collection, https://youtu.be/bfyzKnOK8NY The layout in the video may be different from yours but the idea is similar, it shouldn't be too hard to figure it out. Please let me know how it goes.

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
PeanutButter
Shopify Partner
330 65 136

hi @Dolly_Lana, please let me know what theme you are using and I will give you a concrete solution.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Dolly_Lana
Excursionist
23 0 4

I watched your video but there is only one line of code in my collection.liquid. This is all that's there:     {% section 'collection-template' %} 

0 Likes
PeanutButter
Shopify Partner
330 65 136

@Dolly_Lana can you please let me know what theme you are using and I will give you exact instructions for your theme?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes

@Dolly_Lana yes, it can be different for different themes, for yours, you could look for that code inside collection-template.liquid, thanks

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
Dolly_Lana
Excursionist
23 0 4

@PeanutButter I think my website designer used the basic canopy theme to build off of but I'm not entirely sure. 

0 Likes

try to add/change to 'small--one-half' for all the cases when section.settings.grid equals 2, 3, 4 and 5 

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

Hi @Dolly_Lana, yes, you are using Canopy.

As it is a paid theme, I cannot check out the code but I might still be able to guide you

Do you have a file like Snippets/product-grid-item.liquid or similar?  If you have find a class named min-cols-1 and try and replace it with min-cols-2

I recommend that you make a copy of your theme and test the edits there first

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
PeanutButter
Shopify Partner
330 65 136

@DeepCode have you checked @Dolly_Lana's site? It does not use the grid classes you are naming.  Nothing like small--one-half in canopy theme I think

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes