Crave theme, remove mobile thumbnails right of main product image

Store Design
1

Hello,

In Crave theme, how do I remove mobile thumbnails to the right of main product image?

www.jakeschilistarter.com

Thanks in advance.

2

Hi @JCStart

As I understand, you only want your first product image to show on mobile. If yes, please follow these steps:

  • First of all, navigate to the Online store in Shopify admin. In Themes, click on the button next to Customize button and click on Edit code.

view (74).png
view (74).png1872Ă—871 130 KB

Then search the file name “base.css”, scroll down to the bottom and add these codes:

@media only screen and (max-width: 768px) {
  .slider--mobile li, .slider-buttons {
    position: absolute;
    left: -99999px;
  }

  .slider--mobile li:first-child {
    position: inherit;
    left: initial;
  }
}

view (75).png
view (75).png1897Ă—920 53.8 KB

This will hide all the product images except for the first one. It’ll also hide the slider navigation which will be unnecessary and misleading since you only have one main product image.

Please try these steps above and let us know if it works for you.

3

Hello,

Thanks for the reply. The main product image in the mobile view is now alone, with no thumbnails to the right. Thank you.

However, the only thumbnail under the main product is the main product thumbnail.

Any ideas to retain the other thumbnails under the main product image, as in the desktop view?

Thanks.

4

The thumbnails under the main product image were removed.

Please reinstate the thumbnails under the product image (not to the right).

Thank you in advance.

5

Hi @JCStart

Please change the code in this:

@media only screen and (max-width: 768px) {
  .slider--mobile li {
    display: none;
  }

  .slider--mobile li:first-child {
    position: inherit;
    left: initial;
    display: block!important;
  }
}

I hope that it’s useful to you.

6

Thanks.

This shows only the main product thumbnail under the mobile main product image.

In the desktop view, the products have more than one thumbnail.

I would like the mobile view to have all the thumbnails under the image as in the desktop view.

Thanks.

Thank you in advance.

7

Hi @JCStart

Please delete 2 blocks of code that I recommended before and add this block of code

@media only screen and (max-width: 768px) {
  .slider--mobile li .product__modal-opener .product__media {
    display:none;
   }

  .slider--mobile li:first-child .product__modal-opener .product__media {
    display: block!important;
  }
}

Let me know if you find my answer useful by giving us a like or marking it as a solution.

8

The mobile main product images now have no thumbnails to the right, and all thumbnails below.

Thanks!