Solved

Hover on mobile, I want to enable seconde image when someone touches product. -Spotlight theme

Nikxj44
Excursionist
27 2 7

So I understand that hover on mobile is not possible I just wanted to explain what I wanted to do.

some websites have this function. I want it to be available on mine too. can someone help?

 

website: https://kartbagrationvalley.com/

password: KBV

 

Thank you in advance 🙏

Accepted Solutions (2)
EBOOST
Shopify Partner
952 256 291

This is an accepted solution.

Hi, 

If you would like to show the same nude-project 

May I suggest to update code these steps:

1. Remove old code

2. Go to Store Online-> theme -> edit code

3. Layout/theme.liquid

4. Add code below to end of file and before </body> tag

<style>
  .card-wrapper.showhover_image .card__media .media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

.card-wrapper.showhover_image .card__media .media--hover-effect > img + img {
  opacity: 1!important;
  transition: transform var(--duration-long) ease;
  transform: scale(1.03);
}
  
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.card__information a ').on("touchstart", function(event) {
    event.stopPropagation();
    $(this).closest('.card-wrapper').addClass("showhover_image");
 
});

$('.card__information a ').on("touchend", function(event) {
    event.stopPropagation();
    $(this).closest('.card-wrapper').removeClass("showhover_image");
});
</script>

EBOOST_0-1718108364912.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

EBOOST
Shopify Partner
952 256 291

This is an accepted solution.

Hi, 


May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
  .product-card-wrapper .card__inner:before {
    padding-bottom: 125%;
  }
  .product-card-wrapper .card__media .media img {
      object-fit: contain;
  }
}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
952 256 291

Hi @Nikxj44 ,


May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
  body .card-wrapper:hover .card--standard > .card__content {
    animation:touchImage 3s;
    -moz-animation:touchImage 3s; 
    -webkit-animation:touchImage 3s; 
  }
}

@keyframes touchImage{
  from {position: relative;} 
  to{position: static;} 
}
@-moz-keyframes touchImage{
  from {position: relative;} 
  to{position: static;} 
}
@-webkit-keyframes touchImage{
  from {position: relative;} 
  to{position: static;} 
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Nikxj44
Excursionist
27 2 7

Thank you, but it's not what I want.

Just visit nude-project website and scroll using phone, when you try to scroll down and you touch area of the product photo, it changes to seconde image, after you go past product photo area it automatically goes back to image1.

NUDE PROJECT | STREETWEAR CLOTHING (nude-project.com)

EBOOST
Shopify Partner
952 256 291

This is an accepted solution.

Hi, 

If you would like to show the same nude-project 

May I suggest to update code these steps:

1. Remove old code

2. Go to Store Online-> theme -> edit code

3. Layout/theme.liquid

4. Add code below to end of file and before </body> tag

<style>
  .card-wrapper.showhover_image .card__media .media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

.card-wrapper.showhover_image .card__media .media--hover-effect > img + img {
  opacity: 1!important;
  transition: transform var(--duration-long) ease;
  transform: scale(1.03);
}
  
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.card__information a ').on("touchstart", function(event) {
    event.stopPropagation();
    $(this).closest('.card-wrapper').addClass("showhover_image");
 
});

$('.card__information a ').on("touchend", function(event) {
    event.stopPropagation();
    $(this).closest('.card-wrapper').removeClass("showhover_image");
});
</script>

EBOOST_0-1718108364912.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Nikxj44
Excursionist
27 2 7

Thank you, you are the best 💛

I also want to increase length of the image for the mobile, for example I want to increase it like this, in short I want to make product images a bit longer, it's like a square I want them to be rectangle or about 4:5 aspect ratio :

Nikxj44_0-1718121443712.png

 

EBOOST
Shopify Partner
952 256 291

This is an accepted solution.

Hi, 


May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

@media(max-width: 749px){
  .product-card-wrapper .card__inner:before {
    padding-bottom: 125%;
  }
  .product-card-wrapper .card__media .media img {
      object-fit: contain;
  }
}  
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Nikxj44
Excursionist
27 2 7

thanks but image is same size as I checked. it's not longer 

Nikxj44
Excursionist
27 2 7

again take a look at nude-project mobile version of products and their image shape, I want mine to look like that, my images are square, they have rectangle like 4;5 aspect ratio

EBOOST
Shopify Partner
952 256 291

Hi, 

I have just checked your images. Because your original images are square.  You need to upload new images.

Like this one:

 

After we used CSS. It is the same nude-project. aspect-ratio: 0.8

EBOOST_0-1718292916075.pngEBOOST_1-1718292923313.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤