Shopify themes, liquid, logos, and UX
Hello Shopify community!
I am using the MINIMAL shopify theme and would like to add some CSS to allow the product image to change to the second allocated image when a user hovers over it.
My website is www.fortldn.com
Thanks so much for your help.
Solved! Go to the solution
This is an accepted solution.
This is an accepted solution.
Hi @FORTLondon
I hope you got your answer now 🙂
Kindly like and accept the solution so, other people got the correct answers.
Thanks!
Step 1: Add CSS to your stylesheet
To add a hover effect, you will need to add some CSS code to your theme’s stylesheet:
Step 2: Edit the code for your product images
To edit the code for your product images:
1 | <img |
The code for the tag varies theme to theme, but always starts with <img, and ends with either > or />. It might look similar to this:
1 | <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> |
1 | <div class="reveal"> |
On a new line below the img tag, paste the following code:
1 | </div> |
The result should look like this:
1 2 3 | <div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> </div> |
Step 3: Show an alternate product image on hover
1 | <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> |
Your code should look like this:
1 2 3 4 | <div class="reveal"> <img src="{{ featured.featured_image.src | img_url: '450x450' }}" alt="{{ featured.featured_image.alt | escape }}"> <img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" /> </div> |
Hi, I'm working out of Minimal Theme and I can only find theme.scss.liquid in Assets. There is no css.liquid files. Will this work the same?
Thank you
This solution doens't seem to apply to Minimal Theme. I have tried to implement the code but there is only scss.liquid files.
Anyone can suggest a different solution.
Hi @YHMAC ,
Please share your store url so i can check and guide you.
Thanks,
Hi Prezentech.
I'm using the Venture theme and I have a bunch of apps installed that may or may not be messing with the code. I'm no expert. I've tried your tutorial and I tried another tutorial by ecomexperts.io which were very similar and neither tutorial worked.
Could I send you a invitation to contribute on my code?
My website is https://everlastinggodkings.com/
Can you please create the staff account for info@prezentech.com so we can check in the theme?
Prezentech I've just sent you a collaborator code to the email you specified.
Thank you friend!!
We have updated in your theme and it is working as expected.
Hi, @Prezentech.
I am using Shopify's "Dawn" theme. I want the product image to show the 2nd image when the user mouse over it.
The file names of codes in Dawn theme are all different from the one that's mentioned in the first page. I wasn't sure if it is the right file to add the code.
I have sent you an invitation to info@prezentech.com. Is it possible for you to edit the theme for me?
Edit: I'm sorry. I found the solution for Dawn theme here: https://community.shopify.com/c/shopify-design/dawn-theme-how-to-show-second-image-on-hover/m-p/1408...
Hi @FORTLondon
Please check the below link:
https://fortldn.com/collections/glassware
I have implemented the hover changes for you that you want.
Thanks!
Hi @FORTLondon
Sure, we have made the changes, please check and share your comments.
https://fortldn.com/collections/glassware
Once it will work then, do not forget to like and accept the solution 🙂
Thanks!
Hi @FORTLondon
Sorry I misunderstood.
I have fixed the it as per requirement.
https://fortldn.com/collections/glassware
Please check and let me know your comments.
Thanks!
Hi Rosanna,
Sure, please check now, we have made the changes for you.
Thanks!
Yes @FORTLondon , it will work with the new products as well 🙂
This is an accepted solution.
This is an accepted solution.
Hi @FORTLondon
I hope you got your answer now 🙂
Kindly like and accept the solution so, other people got the correct answers.
Thanks!
Hi there Prezentech,
I'm having the same problem with my store. Any chance for some help on this?
https://www.slingtown.com/ is my store. Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024