How can I modify the product slider to show the first product fully on mobile?

Store Design

Topic summary

A user is experiencing an issue with a Slick slider on mobile that displays 1.5 products but shows the first product cut in half and the second product fully visible. They want to reverse this behavior so the first product appears fully and the second is partially visible, creating a visual cue for users to swipe.

Current Configuration:

  • Set to slidesToShow: 1.5 and slidesToScroll: 1 at 320px breakpoint
  • Problem: First product is cut off, second is complete

Proposed Solutions:

  • One suggestion involves customizing CSS code for the 1.5 products display
  • Another recommends adding slide: 1 to the markup code within the breakpoint settings

Current Status:
The discussion remains unresolved. After implementing the suggested slide: 1 parameter, the user reports that product content no longer displays at all, indicating the solution created a new problem. Screenshots were shared showing both the original issue and the new broken state.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi I have this slick slider that I’ve adapted for mobile to display 1.5 products. I modified the script in this part:

{
breakpoint: 320,
arrows: itemArrowsMb,
dots: itemDotsMb,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1
}
}

However, now it cuts the first product shown in half and leaves the second one in full. I want this to be opposite, to display the first one in full and second one in half so it indicates to users to swipe for more products. I want this to work only for mobile.

My preview is: https://c1hs8llidtfwgg4o-26608304175.shopifypreview.com

SIVA2020_0-1692345699323.png
SIVA2020_0-1692345699323.png2880×1434 451 KB

2

HI,

You should customize the CSS code to show 1.5 products

3

You can try to add this into your code

slide: 1
4

where should I add this?

5

can you please specify what I should change?

6

Like this

breakpoint: 320,
arrows: itemArrowsMb,
dots: itemDotsMb,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
slide:1
7

Now it doesn’t display the product content anymore

SIVA2020_0-1692347879006.png
SIVA2020_0-1692347879006.png2880×1370 459 KB