How To Make Related Products a Carousel On Mobile

KhallP · ‎01-27-2024

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

Mobile:

Can anyone help me?

ThePrimeWeb · ‎01-27-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-27-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

KhallP · ‎01-27-2024

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:

ThePrimeWeb · ‎01-27-2024

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 or check out the website
Check out our interview with Shopify!

KhallP · ‎01-27-2024

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

ThePrimeWeb · ‎01-27-2024

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?