Solved

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

mad4maps
Tourist
4 0 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.jpgmobile_thumbnail.jpg

Accepted Solution (1)
iDoThemes
Trailblazer
207 43 91

This is an accepted solution.

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;
  }
Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line

View solution in original post

Replies 6 (6)

iDoThemes
Trailblazer
207 43 91

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.

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
mad4maps
Tourist
4 0 1

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 🙂

 

/*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;
  }
}

  

iDoThemes
Trailblazer
207 43 91

This is an accepted solution.

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;
  }
Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
mad4maps
Tourist
4 0 1

Hey thank you very much that has now worked! 🙂

joseph-dc
Shopify Partner
4 0 2

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

iDoThemes
Trailblazer
207 43 91

@joseph-dc wrote:

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


 

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

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line