Solved

NARRATIVE - how to show 2 rows of product on mobile?

Logicbomb
Shopify Partner
23 0 2

Hi guys i'm adding a "featured collection" section on my homepage but i'd like to have more than 1 product per row on mobile, is it possible to increase the value of the products per row in mobile view? 🙂 thanks! 
here's a screenshot of the "featured collection" section i'm talking about: 

Schermata 2019-12-08 alle 21.52.44.png

Accepted Solution (1)
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Change with this

 @media only screen and (max-width: 767px) {
      .featured-collection .card{ width:50%;float: left;    padding-left: 5px;}
      .featured-collection .card:nth-child(2n+1) {clear: both;}
    }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 32 (32)

oscprofessional
Shopify Partner
15830 2369 3071

Hello 

You are using narrative theme as there is default feature to show one product on mobile biew.

You need theme customization to display two images on mobile view.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Jasoliya
Shopify Expert
4808 621 1217

Hi @Logicbomb 

Add this css in Asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) {
      .featured-collection .card:nth-child(2n+1) {  clear: both; }
      .featured-collection .card{width:50%;float: left;padding-left: 5px;}
    }
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2

thank you @Jasoliya  i'm gonna try it as soon as i get home 🙂

Logicbomb
Shopify Partner
23 0 2

@Jasoliya  so apparently code has something wrong, this is how it looks on mobile lol


WhatsApp Image 2019-12-09 at 21.22.50.jpeg

Jasoliya
Shopify Expert
4808 621 1217

Send me your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2
Jasoliya
Shopify Expert
4808 621 1217

Add this css:

#shopify-section-1575635968868 .collection-list{ padding: 0;}
#shopify-section-1575635148682 .collection-list{ padding-bottom: 0;}

Note: this css only work for you and if you add and remove section the id will change 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2

@Jasoliya so i'm adding this to theme.scss at the bottom and then i put the featured collection section on my homepage? 

Jasoliya
Shopify Expert
4808 621 1217

No just add this css in theme.scss file at bottom. section already added on you store

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2

@Jasoliya mhhh it still gives me 1 product per row, i'm not keeping the featured collection active on my website right now because i dont want to let it see to my visitors before is well adjusted. I tried activating the featured collection section with the last piece of code you gave me but on mobile keeps showing 1 product per row, so now i deactivated it again.

if you visit my website you will not see it just to be clear 🙂

Logicbomb
Shopify Partner
23 0 2

@Jasoliya there is a misunderstanding, i'm not talking about the 4 products you see in my homepage, at the bottom of my homepage i want to add a new "featured collection" section. so i tried the code you gave me with a new featured collection, i checked if it was ok on mobile but still 1 product per row, so now i deactivated it. im not talking about the 4 products you see on homepage, they are fine, hope i've been clear now 😄 

Jasoliya
Shopify Expert
4808 621 1217

ohk, add this css to make two product per row in mobile

.featured-collection .card{ width:50%;float: left;    padding-left: 5px;}
.featured-collection .card:nth-child(2n+1) {clear: both;}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2

@Jasoliya okay yeah now it works on mobile! 🙂 Buuuut... daaamn there's the problem on desktop version now hahah 
any tip? 

Schermata 2019-12-10 alle 15.16.04.png

oscprofessional
Shopify Partner
15830 2369 3071

@Logicbomb,

Please put your code in below media query

@media only screen and (max-width: 749px) {
}

Then It will not affect on desktop

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Change with this

 @media only screen and (max-width: 767px) {
      .featured-collection .card{ width:50%;float: left;    padding-left: 5px;}
      .featured-collection .card:nth-child(2n+1) {clear: both;}
    }

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Shopify Partner
23 0 2

@oscprofessional @Jasoliya yesssss thanks guys it worked now 🙂 thank you so so much, it's now safe to say: case closed! 😄 

jesperahlbomUK
Shopify Partner
53 4 25
Hi @Jasoliya , instead of creating a new thread, this is exactly the solution Im looking for but for the ”all-products” page.

Is there any similar code I can use to get 2 products inline instead of 1 big In mobile view? it Will give a much better product overview for our customers if possible.

Im using narrative theme.

this is the url to all products page; https://www.shoptatt.com/collections/all

Thanks! Jesper
Jasoliya
Shopify Expert
4808 621 1217

HI @jesperahlbomUK 

Add this css in asset->theme.scss file at bottom:

 @media only screen and (max-width: 767px) {
      .collection-template .card.critical-clear{width:50% !important;float:left;} 
      .collection-template .card.critical-clear:nth-child(2n+1) {clear: both;}
    }
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
jesperahlbomUK
Shopify Partner
53 4 25
@Jasoliya - works fine! Where in the code do i add a couple of px padding inbetween the images?

Much appreciated, thought for a While i had to change theme 💎
Jasoliya
Shopify Expert
4808 621 1217

Add this css:

 @media only screen and (max-width: 767px) { 
      .collection-template .card.critical-clear:nth-child(2n+1) {clear: both;    padding-left: 5px;}
      .collection-template .card.critical-clear {padding-left: 5px;}
    }
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
jordanannell
Visitor
1 0 0

Hi! 

Where should I put the code to make the featured collection two rows on mobile? Thanks for your help!

Jasoliya
Shopify Expert
4808 621 1217

Send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Laura3023
Visitor
2 0 0

Hello!

 

I would love to have this too!

 

www.jutenjulie.nl is my website.

 

thanks a LOT!

Emma119
Visitor
1 0 0

Im having the same problem! It's only showing 1 product on mobile view. Ive tried the code thats on this thread but i'm unsure on where to put it? 

Jasoliya
Shopify Expert
4808 621 1217

Send your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
oxyfit
Visitor
1 0 0

hi just wondering if anyone would please be able to show me the code I need to add for this? 

www.oxyfit.co

Jasoliya
Shopify Expert
4808 621 1217

So you want to make 2 product/row in mobile? if so we have to change  some code as per your theme code. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Olympus
Visitor
1 0 0

Hi im on Brooklyn theme and the code is not working, any idea of what to do?

Jasoliya
Shopify Expert
4808 621 1217

Send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Laura3023
Visitor
2 0 0

Hello! Could you help me too, maybe?

Kael
Tourist
6 0 1

Hi! Hope you safe!

same issue...

How to show 2 rows of product on mobile?
now is only one in row so... super big...

Thank you sooo much if u give me any advise!

my website : www.doubledarespa.com

Jasoliya
Shopify Expert
4808 621 1217

HI @Kael 

For that we have to change whole page structure in two column like images left and information on right, PM me if you want, its not simple to give you code we have to change whole age structure for that.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here