Remove product image carousel on mobile - Brooklyn Theme

Store Design
1

Hi, I’m attempting to remove the product image carousel on mobile for Brooklyn theme.

I’d like my images to display on mobile like they do on desktop without making visitors scroll through images.

Thanks! :victory_hand:

Screen Shot 2022-09-17 at 1.17.42 PM.png
Screen Shot 2022-09-17 at 1.17.42 PM.png678×1044 595 KB

2

@JohnnySmoke

Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

3

Sorry forgot to add that to my post.

4

@JohnnySmoke

Go to Assets > timber.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 590px) {
	.product-single__thumbnails.small--hide {
		display: block !important;
	}
	.product-single__thumbnails.small--hide .product-single__media-wrapper {
		width: 20% !important;
	}
	.product-single__media-group-wrapper .slick__controls {
		display: none !important;
	}
}

Hope it helps!

Thanks!

5

Hi Thanks for the reply! Truly appreciated.

I tried the code and it removed the dots & arrows.

I was attempting to have it display all the images one after the other down the page instead of a scroll option.

Hope I’m explaining that correctly.

6

@JohnnySmoke

Yes, because it will need many steps and complicated requirements if you want a thumbnail image with a slider. So if you want this you can just hire experts for it, they will change the slider JS structure, add CSS code and change Liquid.

Hope it is clear to you.

7

HI. Sorry if I wasn’t clear. I don’t want a slider at all.

I’m just trying to get the mobile version to display images one under the next without any kind of sliding piece.