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-cotton-flat-sheet

[Huptech-Web]

Hello @mlmrepublic , Add the below code to your “theme.liquid” file before tag.

Also, add the below CDN for the slick slider in the “theme.liquid” before .

[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 tag. If you already included jquery library, please don’t add the first script “”.

2. Paste the below code after tag . Please find below screenshot for your reference.

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.