Help for product carousel

[kkayleighh]

Hello, my website is junojane.co

I would like to create a carousel on my mobile so three products can be displayed in a row. I tried using the default shopify feature for a carousel, however, due to changes I made on the website, it does not seem to work. Would appreciate any help.

Thank you!

[vividusdesigns]

It looks like you’re using two different sliders—one for mobile and one for desktop. Both seem to be loading only the products that fit within the viewport, so there’s no need to slide. This appears to be a configuration glitch. You can ask Sidekick to help fix it.

[emilyjhonsan98]

To fix this, you’ll need to force a 33.3% width on your product grid items specifically for mobile screens within your theme’s stylesheet. This will override the current layout and snap three products into one row.

Quick Steps:

• Go to Online Store > Themes > Edit Code.
• Find your base.css file.
• Scroll to the very bottom and add a media query targeting mobile screens that sets the product card width to exactly one-third of the screen.

Keep in mind that with 3 products in a row, your images will appear very small on mobile. If it feels too crowded, try reducing the horizontal padding between the items to save space.

[gracetech1]

I checked the mobile layout and it looks like the slider itself is loading correctly, but the product container width is preventing the carousel behavior from triggering properly.

Since you mentioned you already modified parts of the theme, there’s a good chance one of the custom grid or flex settings is overriding Shopify’s native slider classes on mobile.

I’d probably inspect the product-card wrapper first before changing the slider logic itself. In a lot of cases the issue comes from the parent container rather than the carousel component.

Are you working from a Dawn based theme or a heavily customized one?

[tim_tairli]

As mentioned above, you do have 2 sections in this area:

One is shown on desktop, has “Carousel” checked and has 3 products to show.
It’s set to display 3 columns on desktop and therefore, does not look like a carousel.
On mobile this section is set to show carousel with 1 column, but it’s hidden.

Second section is shown on Mobile, has only 2 products to show and has “Carousel” unchecked in settings.

Both sections have some code in Custom CSS setting and also some code in base.css…

I’ve made them both show in my browser:

What I would do:

0. Make a theme copy to avoid breaking life store;
1. Hide second section by clicking the eye icon or delete completely;
2. Open “desktop” section settings and select 2 columns and check the “Carousel” under “Mobile layout” ;
3. Scroll down to “Custom CSS” setting of this section and remove this code to show this section on mobile:

@media screen and (max-width: 750px) {
  .collection {
    display: none;
  }
}

instead, add this code to override customizations:

.grid.product-grid {
    flex-wrap: nowrap !important;
  }
.slider-buttons {
  display:flex !important;
}

You should get something like this:

At this moment you may need to share a preview link to this theme because you do have several other CSS rules scattered in theme code which may distort the view.

[mastroke]

Go to Online Store → Themes → Edit Code → assets/base.css and paste this at the bottom:

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

.product-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 10px;
padding-bottom: 10px;
}

.product-grid .product-card-wrapper {
flex: 0 0 calc(33.333% - 10px);
scroll-snap-align: start;
}
}

[Wsp]

@kkayleighh Your mobile product carousel is not working because:

There are likely duplicate product sections (desktop + mobile) and custom CSS is overriding Shopify’s slider layout .This breaks the default Shopify carousel behavior.

1. Keep only ONE product section
   Remove any separate “mobile product section”
   Use a single responsive section for both desktop + mobile

2. Enable carousel in theme settings
   In Theme Editor:

Turn ON slider / carousel
Enable swipe on mobile
Set layout to slider (not grid)

3. Fix with CSS (fallback solution)
   If it still doesn’t work add this to the end of base.css:

   @media (max-width: 749px) {
   .product-grid {
   display: flex !important;
   overflow-x: auto !important;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   gap: 12px;
   }

   .product-grid::-webkit-scrollbar {
   display: none;
   }

   .product-card {
   flex: 0 0 70%;
   scroll-snap-align: start;
   }
   }