Shopify is extremely powerful, and I use it across many projects, but some of the themes and apps have strange limitations. I’ve started publishing small fixes & modules where I could not find a solution online in the form of a tutorial, accurate Stack Overflow post or a free app. Many of the paid apps in the Shopify App Store do not add enough value to justify their large monthly fees, often they are just a few lines of code that are not updated, and victims are paying US$5/month for this code in perpetuity thinking that it is difficult.
Shopify :: Trigger Product-Variant-Change
Trigger a product variant change outside of the default select input in Shopify e.g. via a color swatch or thumbnail image. Here we’re trying to trigger the select change event as though the user actually changed the variant by clicking on the select and picking a new variant. We want to maintain the integrity of the change event so that all downstream triggers are also activated e.g. updating inventory levels, availability, and ensuring that the Add to Cart button adds the active variant selection originating from the swatch or thumbnail.
A few simple lines of code to trigger a change in a product variant on product pages in Shopify from two colour swatches. Many projects in the Shopify App Store are a) expensive or b) do not work with the default Shopify Theme in 2021 (Debut) or c) do not work at all. I found it difficult to find a single article on Stack Overflow or other developer community websites that explained how to do this with maximal cross-browser support.
This is very simple to implement:
- Login to Shopify, Go to Themes -> Actions -> Edit Code
- Put the JS into the theme.js file in the Assets folder, make any changes you want.
- Put the CSS into the theme.css file in the Assets folder, make any changes you want.
- Adjust your triggering objects in the product-template.liquid file in the Snippets folder from the example provided. These are the color swatches or thumbnail images that you want the user to be able to click on to change the active product variant.
Observations:
Many of the guides on Stack Overflow, etc do not work because they’re trying to hook into very busy DOM elements that have a lot of javascript from Shopify or they simply do not understand the interaction of jQuery events and browser events.
Code: https://github.com/phillipkingston/Shopify—Trigger-Product-Variant-Change
Shopify :: Change Product-Image On-Hover
A few simple lines of code to swap product images on hover across collection pages and feature product sections on homepage and product pages in Shopify. Many projects in the Shopify App Store are a) expensive or b) do not work with the default Shopify Theme in 2020 (Debut) or c) do not work at all. This method doesn’t use any JavaScript.
This is very simple to implement:
- Login to Shopify, Go to Themes -> Actions -> Edit Code
- Put the CSS into the theme.scss.liquid file in the Assets folder, make any changes you want.
- Make a few lines of insertions into the product-card-grid.liquid file in the Snippets folder and adjust product.images[1] with whatever array index you want as the swap image on hover. Note this counts from 0 as it is an array of images linked to the product in Shopify. If you want the last image in the image array, you can use product.images.last
TODOs:
- Error handling if there are not more than 1 images per product
- Dynamic sizing of the swap image to match the image sizing setup in the theme, currently its hardcoded e.g. 450×450 but you can change to what you want in the meantime
- Use more obscure class names so as to not conflict with other Shopify plugins.
Observations:
- Why are people charging $4.99 per month for a plugin that does this? 6 lines of code.
- Many of the guides on Stack Overflow, etc do not work because they’re trying to hook into very busy DOM elements that have a lot of javascript from Shopify and are getting confused finding two clean hover events to harness for the image swap.
Code: https://github.com/phillipkingston/Shopify—Change-Image-On-Hover