How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
People use image hover effects to gain attention or increase attraction to items on a page. A hover effect would be useful on your Shopify collection pages because it would draw your shoppers in and potentially increase interest in your products.
HTML and CSS are two seminal web scripting languages for constructing web pages and applications. You can use HTML to create image hover, CSS, or both CSS and HTML. HTML provides a web page’s structure, while CSS dictates layout and style.
There are many different types of hover effects you can execute with CSS code. CSS is an indispensable tool that makes sites more fun and exciting, as well as aesthetically pleasing. Hover effect simply means that when you move your cursor over an item, something happens. You can change your background color, bold or underline text, change font or font size, fade-in, change color, and shrink. For our purposes, we will be focusing on hover image change CSS.
Shopify Change Image on Hover
Have you ever wanted a feature on your Shopify store’s product page that changes images when the customer hovers over them? Now you can have one. In this tutorial, you will learn how to add a mouse hover effect in CSS.
A hover image effect will show one image on your product page, then another picture when you hover over it with your mouse. Add value to your store by using a Shopify mouse hover image effect.
How to Make Product Image Change When Mouse Hover in Shopify
Step 1: Duplicate your live theme
From your Shopify admin, go to your Online store and choose themes. Next to the live theme click on Actions and select Duplicate. This way, you will have a backup of your live theme if you miss some step that negatively impacts your store.
Step 2: Assets Directory
Now that you have a backup version of your live theme, click on Actions again, but this time choose edit code. From the navigation to the left, scroll down to the Assets directory and select theme.scss.liquid.
Scroll down to the bottom of the file and paste the following code:
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
secondary
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
Click on Save.
Step 3: Snippets directory
In the Snippets directory open product-card-grid.liquid. Remove all the code and paste the following:
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>
Click on Save
Shopify Product Image Change on Hover
Now you have learned how to create a hover image CSS, hover image HTML, or hover image HTML CSS. This fantastic new feature is sure to generate more interest in your products and store, yielding more conversions for you. For more information or if you have questions, don’t hesitate to contact Ecomexperts.
About Andrew Durot
He is the co-founder of Ecom Experts, a Shopify focused development agency.
Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.
Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.
Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!
Guides
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Add A Back-to-top Button On Shopify Step-by-Step Tutorial
- How To Hide Add To Cart Button On Shopify - 2021
- Ask How Customers Heard About Your Store On The Cart Page - 2021 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2021 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2021
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
1 comment
-
Dear
My theme name Venture in snippets product-card-grid.liquid not find what can i do ?
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
obligations and completely free!
1 comment
Dear
My theme name Venture in snippets product-card-grid.liquid not find what can i do ?