(Venue Theme) Product Page: Change thumbnails to be a static grid

Technical Q&A
1

Hi there!

If I can get some assistance with this I would be really appreciative.

I am currently running the Venue Theme. The Product page has some slight differences when viewed from a desktop compared to a mobile. The one that I am interested in getting some help with is the thumbnails that display under the main image on the Product Page when viewed from mobile.

Currently, when viewed on a mobile, the thumb nails have a horizontal scroll feature that lets you move through them. I would like to replace this with the same kind of static grid that is displayed when viewed from a desktop. I know it is a small difference but it would be awesome to get it to display like this!

Any help is hugely appreciated! Thanks very much.

This is the website: www.cartographychronicles.com

DESKTOP & MOBILE DISPLAY CURRENTLY

desktop_static_grid.jpg
desktop_static_grid.jpg1000×703 95.4 KB

mobile_thumbnail.jpg
mobile_thumbnail.jpg400×866 58.4 KB

2

Some CSS like:

@media screen and (max-width: 767px) {
  .product-single__photo__nav__dots.product-single__photo__nav__dots {
    display: contents;
  }
}

Should do this if you put it at the bottom of your main css file. There are better ways, like modifying the JS for the slider library the theme is using as it should have options for this, though that would require access to the code.

1 Like
3

Hi there!

I have already added in some code to change mobile to display thumbnails instead of a carousel. This code is on the Venue Theme website. Is there anything in here that would be easy to change to implement the change? Thanks again for the help :slightly_smiling_face:

/*SHOW THUMBNAIL IMAGES ON MOBILE*/

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

  .product-single__photos.product-single__photos .slick-dots .product-single__photo-thumbs__item.product-single__photo-thumbs__item {
    background-color: rgba(240, 240, 240, 0.8);
    width: 56px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 0;
  }

  .product-single__photo-thumbs__img.product-single__photo-thumbs__img, .product-single__photo-thumbs__badge.product-single__photo-thumbs__badge {
    display: inline;
  }  

  .product-single__photo__nav.product-single__photo__nav.product-single__photo__nav {
    padding: 0 0px;
  }

  .product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item {
    display: none !important;
  }

  .product-single__bottom.product-single__bottom.product-single__bottom {
    padding-top: 6px;
  }

  .product-single__photo__nav__dots.product-single__photo__nav__dots {
    width: calc(100vw - 36px);
  }

  .product-single__photo__nav__dots .slick-dots {
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 9px;
  }

  .product-single__photo__nav.product-single__photo__nav {
    width: 100%;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar {
    height: 12px;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb {
    background: #f0f0f0;
    border-radius: 10px;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb:hover {
    background: #e4e4e4;
  }
}
4

Just a not that display: contents is currently not supported in IE 11 if you need to support that browser.
https://caniuse.com/css-display-contents

5

Yeah just below your rule:

.product-single__photo__nav__dots.product-single__photo__nav__dots {
    width: calc(100vw - 36px);
  }

You can add:

.product-single__photo__nav__dots.product-single__photo__nav__dots ul {
    display: contents;
  }
1 Like
6

This is a mobile only query so I don’t think that’ll be an issue.

7

Hey thank you very much that has now worked! :slightly_smiling_face:

1 Like