Solved

How To Make Related Products a Carousel On Mobile

KhallP
Excursionist
63 0 11

I want to make related products in a carousel style like the desktop

 

Capturar.JPG

 

 

Mobile:

WhatsApp Image 2024-01-27 at 22.31.33.jpeg

 

Can anyone help me?

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1143 295 224

This is an accepted solution.

Hey @KhallP,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference

 

@media only screen and (max-width: 768px) {
    product-recommendations ul  {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
    }    
}

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706397293511.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
1143 295 224

This is an accepted solution.

Hey @KhallP,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference

 

@media only screen and (max-width: 768px) {
    product-recommendations ul  {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
    }    
}

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706397293511.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
KhallP
Excursionist
63 0 11

I liked the result although I thought it would look different, couldn't I make something similar to what I already have in the store's collections? Such that:

 

WhatsApp Image 2024-01-27 at 23.23.21.jpeg

ThePrimeWeb
Shopify Partner
1143 295 224

Hey @KhallP,

It is possible but it would take alot of development to do so because you have to create the pages ( like "1/4"), create the buttons, add the action to the buttons to go forwards or backwards, make the buttons deactivated if we are on the end of each side, etc... Therefore, I'm afraid as a short code, I can only give you the one I already provided. 

 

And by text here it's also hard to explain how you can recycle the code for the store collections because it also takes abit of heavy lifting there to move the code properly and test it to make sure nothing is broken.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
KhallP
Excursionist
63 0 11

Ok, it's okay, thank you for your work anyway, could you just help centering the related products header on mobile?

ThePrimeWeb
Shopify Partner
1143 295 224

No problem.

Here's the full code along with the previous one

@media only screen and (max-width: 768px) {
    product-recommendations ul  {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
    }    

    h2.related-products__heading.inline-richtext.h2 {
        text-align: center !important;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
KhallP
Excursionist
63 0 11

It worked, thank you very much 🙂