DAWN: Showing only first image on product page media

Store Design
1

Hello!

I would like to show only the first image on the product page while hiding all the thumbnails on both mobile and desktop site.

As I have already move my image stack underneath the product description, in order to make the product page simpler and I would like to only show 1 image on the top unless variants is chosen (showing corresponding variant image instead when clicked).

Your help is very much appreciated! Thanks in advance.

2

Hey there,

There are two ways to do this. One on the simpler side with CSS and one where you actually change the product page code.

For this making the CSS change should be enough and you can easily revert back to a gallery if you want in the future.

How to make the change
In the CSS section of the Product Information, add this code

.thumbnail-list {
  display: none;
}

.slider__slide,
.slider-buttons {
  display: none;
}

.slider__slide.is-active {
  display: flex;
}

Screenshot 2023-06-21 at 8.13.41 AM.png
Screenshot 2023-06-21 at 8.13.41 AM.png570×816 50.9 KB

This will hide all images but the first / main one.
On mobile, it will also hide the slide-buttons (next, previous).

Let me know if this did the trick :slightly_smiling_face:

Best,
Flo

3

@GRGR

Please add the following CSS code to your assets/base.css bottom of the file.

.thumbnail-list {
  display: none !important;
}

.slider__slide,
.slider-buttons {
  display: none !important;
}

.slider__slide.is-active {
  display: flex !important;
}

Thanks!

4

This works like wonder! Thank you so much!

5

@GRGR

Thanks! welcome again!

6

@HazilStudiosNYC

I checked on the website again and see that all images are hide on desktop while on mobile it’s fine.

Is there anything I can do?

Your help is very much appreciated!

7

@GRGR

Please store the URL & a screenshot of what you want!

Thanks!

8

Thanks for your quick reply!

https://girigirihk.com/products/sling-back-heels?

It works on mobile
It works on mobile983×1357 104 KB

It works on mobile to show only one image in the slider position

When change to desktop view, no images is shown
When change to desktop view, no images is shown1600×1054 60.2 KB

When switched to desktop, no image is shown though.
I would like to show only 1 image as how mobile works with the code you provided.

Thanks in advance!

9

@GRGR

Please Remove the previously provided code!

Thanks!

10

@HazilStudiosNYC @dmwwebartisan

Any ideas what updates should I make in terms to achieve the results?

11

@GRGR

This is code customization work Please hire Shopify Expert who can help you!

Thanks!