Picture on product page too small stiletto theme

[mlmrepublic]

Hello!

I don't know how to fix this and would like some help. 

I want the main image to fill out the page and the images on the left of it to only show 4, and be more of a verticle or horizontal carousel?

Can anyone assist me with this? See image for reference.

Thank you!

[Huptech-Web]

Hello @mlmrepublic , Can you please the Store URL? It will help me to understand this better.

[mlmrepublic]

https://www.mlmrepublic.com/collections/100-recycled-cotton-collection/products/white-100-recycled-c...

[Huptech-Web]

Hello @mlmrepublic , Add the below code to your "theme.liquid" file before </body> tag.

<style>
.product__primary-left .product__media .product__media-item {
  width: 100%;
  height: 100%;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  $('.product-thumbnails__items').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    focusOnSelect: true,
    vertical: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 1
        }
      }
    ]
  });
});
</script>

Also, add the below CDN for the slick slider in the "theme.liquid" before </head>.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

[Vinsinfo]

@mlmrepublic Please follow the below steps to fix the main image to fill out the page and to display 4 images on left and in a vertical carousel. Let me know whether it is helpful for you.

1. From Admin panel, Go to "Online Store" -> "Themes"

2. Click action button from the current theme and select "Edit code".

a) To fix the main image:

1. Locate the "theme.css" file and find the element ".product__primary-left .product__media .product__media-item", update its CSS code as below like in the below mentioned screenshot.

Existing Code :

.product__primary-left .product__media .product__media-item {

width: 300px;

height: 300px;

}

Updated Code:

.product__primary-left .product__media .product__media-item {
    width: 100% !important;
    height: 100% !important;
}

b) To display 4 images on left and in a vertical carousel:

1. Locate "theme.liquid" and paste the below library inclusion just before the </head> tag. If you already included jquery library, please don't add the first script "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" defer></script>

2. Paste the below code after </head> tag . Please find below screenshot for your reference.

<script>
    $(document).ready(function () {
        $('.product-thumbnails__items').slick({
            arrows: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            infinite: true,
            vertical: true,
        });
    });
</script>

3. From admin, go to "Online Store" -> "Themes" -> "Customize".

4. Click "Product overview" section and locate the "Custom CSS" field at the bottom and paste the below code like in the mentioned screenshot.

.slick-prev {
    display: none !important;
}
[data-scroll-container][data-axis="vertical"] .scroll-button[data-position="end"] {
    bottom: unset !important;
}

5. Then, the final output will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.