How do I display two products per row on mobile?

[Emmalu]

Hi! I am currently using Nordic theme and I would like to have my product display two per row instead of one. I have tried many codes that I can find online but nothing worked....Can anybody help me please? 

Pictures attached. 

 

The website hasn't published but the link is here: www.charlielulu.com

Password: nowgep

Thanks so much in advance! 

[Emmalu]

Hello! I tried but nothing changed. Could you offer another coding please?

How do I open collaborator's access?

[Dan-From-Ryviu]

Hi @Emmalu 

You can add this code to Custom CSS in Online Store > Themes > Customize > Themes settings to do that

@media (max-width: 749px) {
.popular-products .popular-products__wrapper {
    grid-template-columns: repeat(2, 2fr) !important;
    --col-gap: 1rem !important;
    --row-gap: 3rem !important;
}
}

[Rukhsana · Accepted solution]

Hello. I checked the Nordic theme, and there is a setting to display products two per row instead of one. I’ve attached a screenshot for reference. Please check it. Simply navigate to the section settings and click on 'Show two cards in a row on mobile devices. 

[Emmalu]

OMG thank you so much!!!! I didn't know it offered me an option and I didn't need coding... GREATLY APPRECIATED!!❤️

[Emmalu]

HOWEVER! When I go the collection, it comes back to only 1 product per row and the product card option doesn't exist anymore. Is this something we can also change without coding? 

[Emmalu]

 

I just found that you can change the view on your phone😅

[Rukhsana]

Hello @Emmalu

I’m glad to hear that the solution worked for you! 🙂 

Regarding the collection page, I checked the settings and, unfortunately, there isn’t an option to display two products per row. In my opinion, this is quite unusual since most themes typically provide this feature.

If you haven’t purchased the theme yet, you might consider switching to a new one that includes this functionality. However, if you’ve already bought the theme, I suggest reaching out to the theme developer to see if they can add this feature for you.

[Made4uo-Ribe]

Hi @Emmalu 

You like to show 2 products on smaller screen of the mobile right? If it is. try this one. 

@media screen and (max-width: 576px) {
    .popular-products .popular-products__wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

And Save. 

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!