Venture theme - thumbnail images

hunter_official
Explorer
73 0 14

Hello, I want to shrink the thumbnail images displayed at the product page, where i can find that code?

using Venture theme.

suyash1
Shopify Partner
2014 207 306

@hunter_official  it can shrunk using custom css... can you please share your product page link?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
KetanKumar
Shopify Partner
14570 1676 5229

@hunter_official 

Thanks how do you like thum?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
hunter_official
Explorer
73 0 14

Yes, here is a link for example: https://hntwarehouse.com/products/summer-palm-t-shirt (pass; monitest)

 

Original:

original.png

wanted:

 

wanted.png

KetanKumar
Shopify Partner
14570 1676 5229

@hunter_official 

yes, please check.

KetanKumar_0-1612008263673.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
hunter_official
Explorer
73 0 14

I want to make those thumbnail images SMALLER . 

0 Likes
suyash1
Shopify Partner
2014 207 306

@hunter_official - can you please share page link with those thumbnail images?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
hunter_official
Explorer
73 0 14

Yes, https://hntwarehouse.com/collections/t-shirts/products/summer-palm-t-shirt (pass: monitest)

 

I have search some and found this code:

/*================ Product thumbnail layout ================*/
.product-single__thumbnails.slick-vertical .slick-slide {
  border: 0;
  padding: 2px 0;
}

.product-single__thumbnails {
  display: none;
  margin: 0 ($gutter-site * 2) $gutter-site;

  &.slick-initialized {
    display: block;
  }

  @include media-query($medium-up) {
    margin: 0;
  }
}

.product-single__thumbnails--static {
  display: block;
  text-align: center;

  @include media-query($small) {
    .product-single__thumbnail-item {
      display: inline-block;
      width: 45%;
      max-width: 150px;
    }
  }
}

.product-single__thumbnail {
  position: relative;
  display: block;
  height: $product-slider-image-height;
  padding: $product-slider-padding;
  max-width: 200px;
  margin: 0 auto;

  img {
    position: relative;
    top: 50%;
    @include transform(translateY(-50%));
    display: block;
    max-height: $product-slider-image-height - ($product-slider-padding * 2);
    margin: 0 auto;

    .no-csstransforms & {
      top: 0;
    }
  }

  .is-active &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid $color-accent;
  }
}

 

But i don't know what to edit.

I will explain again, i want to SHRINK (make smaller) those thumbnails images.

0 Likes
suyash1
Shopify Partner
2014 207 306

you want something like this?

suyash1_0-1612032593879.png

 

 

if yes then following css to the end of theme.scss file, adjust numbers as per need

.product-single__thumbnail {height: 60px;    max-width: 60px;}

.product-single__thumbnail img{max-height: 60px;}

 

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
hunter_official
Explorer
73 0 14

Thank you, how i can move them closer to the biggest image?

to make it look like this; 

 

like this.png

0 Likes