Display Two Products Per Row in Mobile Carousel

[Macoy102890]

Hi everyone,

am currently working on optimizing my Shopify store and need assistance with modifying the Featured Collection section. Specifically, I would like to display two products per row in the mobile view of the product carousel instead of just one.

I have tried using custom CSS, but it doesn’t seem to apply correctly within the carousel structure. Could you please guide me on how to achieve this? If any changes to the theme’s Liquid files are required, I would appreciate specific instructions. I am using Impact theme.

Thank you

[Dan-From-Ryviu]

Hi @Macoy102890

Could you share the link to your store so I can check?

[Macoy102890]

https://www.naraya.com/

[rajweb]

Hey @Macoy102890 ,

To display two products per row in the mobile view of your Featured Collection carousel in the Impact theme, you need to modify both the CSS and possibly the JavaScript to ensure the layout adjusts correctly.

Since many Shopify themes use Flickity or Slick.js for carousels, you may need to adjust the settings dynamically.

1. Modify JavaScript for Slick/Flickity:

• Try adding this JavaScript to theme.js or in a tag inside theme.liquid:

document.addEventListener("DOMContentLoaded", function () {
  const carousel = document.querySelector(".carousel-selector"); // Change selector if needed
  
  if (carousel) {
    if (window.innerWidth < 768) {
      // If using Flickity
      if (typeof Flickity !== "undefined") {
        new Flickity(carousel, {
          cellAlign: "left",
          contain: true,
          groupCells: 2, // Show 2 products per row
        });
      }

      // If using Slick.js
      if (typeof jQuery !== "undefined" && typeof jQuery.fn.slick !== "undefined") {
        jQuery(carousel).slick({
          slidesToShow: 2,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 2,
              },
            },
          ],
        });
      }
    }
  }
});

This ensures that on screens below 768px, the carousel displays two products per row.

2. Modify CSS (If Needed):

• If JavaScript alone doesn’t fix the issue, apply this CSS to force a 2-column layout:

@media (max-width: 767px) {
  .carousel__slide {
    width: 50% !important;
    flex: 0 0 50%;
  }
}

Let me know if you need further tweaks!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[Dan-From-Ryviu]

Please add this code to the Custom CSS of that section

@media (max-width: 699px) {
    .product-list {
      --product-list-carousel-item-width: 36vw;
    }
}

Or use this code to make it appear like image below

@media (max-width: 699px) {
     .product-list {
      --product-list-carousel-item-width: 43vw;
    }
  }

[Macoy102890]

Thank you so much.. It works!!

[Macoy102890]

Thank you!!

[Dan-From-Ryviu]

You are very welcome!