How to change product images with arrow keys
You're likely coming across this tutorial because you are either a Shopify store owner or you work alongside with a Shopify store owner. In both instances, you understand the importance of providing a seamless and intuitive user experience (UX) to your visitors.
Now, imagine if you could elevate that experience further by allowing your customers to navigate through your product images by barely touching their mouse. It surely is possible, and we're here to show you how, just by copy and pasting a piece of high quality code we have spent some days developing and testing to our readers! It works out of the box and makes use of no additional Javascript libraries, such as jQuery (which wildly anchors down your website's performance).
This is particularly useful for stores selling products whose customers typically browse on computers. If in your analytics data you see that most of your traffic is coming from desktop devices, this is going to be a nice add-on to your shop.
Without further ado, please follow along to learn how you can add this functionality to your theme. You can click here to view the code working on a live store.
Step 1: adding the code
-
From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code
-
Create a snippet named exactly:
ezfy-arrow-keys
-
Paste the following code in this new file you have created and save.gist
-
Now find the file named exactly theme.liquid.
-
press CTRL + F (or CMD + F on Mac) to open the search bar and search for:
/body
-
Paste the following code above the line you found.
{% include 'ezfy-arrow-keys' %}
-
That is it!
Please bear in mind that you must have thumbnails enabled for this to work. It won't work with the other desktop layouts.
Conclusion
It is this simple! It's worth mentioning that by incorporating this type of user-friendly functionality into your Shopify theme, you also demonstrate to your customers the commitment you have to provide an exceptional browsing experience for all types of users, including those with disabilities or limited dexterity.
Accessibility is often overlooked even whilst being an essential aspect of modern web development, and this type of small features conveniently imply that you care for everyone that comes across your website.
Feel free to checkout the other recommended tutorials below - both of them are compatible with the keyboard arrow keys as well.