Product details page: can I use a grid instead of slideshow for gallery images?

Site URL: http://www.idealcities.com/bookshop/hun5b02ym5imrvp8e4miktp6tpfvzm

I would rather show my books in the grid form than in the slideshow, as I'm able to do on a regular page. I don't think it's possible but am hopeful so thought I'd check. I'd prefer it to look like this: http://www.idealcities.com/a-field-guide-to-weeds but I need it to be in the commerce area.

28 minutes ago, kimbeck said:

Site URL: http://www.idealcities.com/bookshop/hun5b02ym5imrvp8e4miktp6tpfvzm

I would rather show my books in the grid form than in the slideshow, as I'm able to do on a regular page. I don't think it's possible but am hopeful so thought I'd check. I'd prefer it to look like this: http://www.idealcities.com/a-field-guide-to-weeds but I need it to be in the commerce area.

Hi there

I provide you a workaround to display 2 column grid for the product slideshow, kindly this snippet into custom css section

#productSlideshow .sqs-gallery-design-stacked-slide {
  opacity: 1 !important;
  position: relative;
  width: 46%  !important;
  height: 50%  !important;
  display: inline-block;
  float: left;
  margin: 2%;
}
#productSlideshow .sqs-gallery-design-stacked-slide img {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
}
#productThumbnails {
  display: none;
}

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

1 hour ago, kimbeck said:

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

 

You're right, let me check

10 hours ago, kimbeck said:

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

 

Hi there, tried another shot:

#productSummary {
  display: flex;
  flex-flow: column;
}
#productSlideshow {
  position: relative !important;
}
#productGallery {
  width: 100%;
  float: right;
  order: 1;
}
#productGallery .wrapper {
  padding-bottom: 0 !important; 
  position: relative;
  height: auto;
}
#productDetails {
    width: 100%;
    margin-top: 0px;
    order: 0;
}
#productSlideshow .sqs-gallery-design-stacked-slide {
  opacity: 1 !important;
  position: relative;
  float: left;
  overflow: auto !important;
  height: auto !important;
  margin-bottom: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  width: 50% !important;
}
#productSlideshow .sqs-gallery-design-stacked-slide img {
  position: relative !important;
  float: none;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
}
#productThumbnails {
  display: none;
}

thank you! But now it's just stacking all the images. I'd really just like a grid like this:

http://www.idealcities.com/a-field-guide-to-weeds

4 hours ago, kimbeck said:

thank you! But now it's just stacking all the images. I'd really just like a grid like this:

http://www.idealcities.com/a-field-guide-to-weeds

I will update the code above, you can copy from there

thank you!!

Also is there a way to put the text below the images?

10 minutes ago, kimbeck said:

Also is there a way to put the text below the images?

 

Change this line to edit the order

It worked! Thanks!

Also, is there a way to change the padding around the commerce front page grid? So that it matches what is on other pages? LIke this: http://www.idealcities.com/#/roadweavings/

or http://www.idealcities.com/

5 minutes ago, kimbeck said:

It worked! Thanks!

Also, is there a way to change the padding around the commerce front page grid? So that it matches what is on other pages? LIke this: http://www.idealcities.com/#/roadweavings/

or http://www.idealcities.com/

Here you go, add this below the current code

#canvas {
  max-width: none;
}
#header {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

for some reason that isn't changing the space between thumbnails on my end

http://www.idealcities.com/bookshop

Because shop page and product page are different ones, do you want space bigger or smaller?

Ok! For shop page, smaller padding between images, to match what it is on other pages. On site styles, it is 1.6% for the index page.

48 minutes ago, kimbeck said:

Ok! For shop page, smaller padding between images, to match what it is on other pages. On site styles, it is 1.6% for the index page.

#productList .product {
      margin-left: 1.57480315%;
    margin-top: 1.6%;
}

In case you need expand the space on product page

#productGallery #productSlideshow .slide {
    padding-left: 1.57480315%;
    padding-top: 1.6%;
}