How can I make a clickable slideshow in a cave theme?

Store Design
1

I’m trying to add image link in the theme customization section, where I can add an image in the slideshow that can be clickable. Yesterday a wonderful technician helped me to make slideshow clickable and was able to hide the button. Unfortunately today I noticed that part of code is showing under the slideshow. I really would appreciate the help.

URL IS

https://earthtreasuresusa.myshopfiy.com

2

Hi @earthtreasures ,

You can check it out for me in the slideshow section. I see this part showing it’s css, but it’s not in the tag, so the above problem occurs. You can wrap it inside copy all the code currently displayed outside the homepage into this

Hope can it help you

3

it worked, thank you very much. but I have another issue, how can I resize my slideshow images, in another word make them smaller, some of my images are outside the safety boarder.

4

Hi @earthtreasures ,

Because your pictures are not the same size. So currently on your site the image is being cropped so that all images are of the same size. If resized to the correct image size, the image may not be as good.

If you still want to do the same then you can try the css below in base.css file:

#shopify-section-template--14480595484751__slideshow .media > img {
    background: #fff !important;
    object-fit: contain !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Nice well done, it worked. One more thing my images on the product page when zoomed they are very much zoomed to a point where the image is distorted. can we do something about it, or we have to accept it the way it is.

6

Hi @earthtreasures ,

You try below code in section-main-product.css file:

.media>img {
    object-fit: contain !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

I tried the code, but I have not noticed any changes, maybe we should disable zoom capability for the products. What do you think…

8

Hi @earthtreasures ,

You can try below code to remove zoom in section-main-product.css file:

.product__media-toggle {
     display: none !important;
}

Hope it can help you

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

it worked fantastic, question the click hand on the slideshow functional only the left side of the image, is there anything can be done to have it available anywhere on the image