Product images

Is there a way to have just one product image show and then when they change the variants then the image will show for that variant?


  • michaelsteelemichaelsteele Posts: 42Member
    yeah, but how you do it depends on your theme's code. If you have already used the theme editor and forfeited theme updates and support, feel free to share the product.rain code using gists or codepen.
  • Adrian SamuelAdrian Samuel Posts: 514Moderator, Lightspeed Staff moderator
    @sacredheart926 if you're talking about the home/index.rain page then you want to display a selection of products (most themes have this by default) and possibly have a drop down to select the specific variant. Based on the variant selection you could have an AJAX request made to toggle the specific image depending on the item clicked.

    More information can be found here:

    You might want to use indexedDB or session Storage to cache the images that you load so you don't have to make too many AJAX requests which would result in getting your shop banned.

    Instead of AJAX, you could have a cloud function respond with the a payload with the variant image etc...there are a lot of ways it could be done

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • JoeyJoey Posts: 177Administrator, Moderator, Lightspeed Staff moderator
    edited November 2018
    Switching images based on selected variant is a build in feature and does not depend on the theme. The first thing to do is to click the [+] icon next to the variant and assign one of the product images.
    Once variant images are assigned it would be up to the theme code to display them the way you want, as @michaelsteele mentioned.
    eCom Support Team
    Lightspeed HQ
  • adlamoureuxadlamoureux Posts: 11Member

    @Joey I am looking to make a minor change in how the variant dropdown reloads and displays the correct picture. Right now, if I change the variant dropdown it forces an "onchange" script to run and reloads the page to the full varient URL along with the correct picture.

    Reloading the page can with no button cause accessibility issues with screen readers. Due to this, I pulled out the following line of code from "product.rain" -  {{ product | html_product_configure | raw }} 

    I than replaced it with following raw html for testing purposes to find if the reload could be avoided. - Which worked! The reload stopped, and the add-to-cart button still added the correct product to the cart.


    <div class="product-configure">

    <div class="product-configure-options">

    <div class="product-configure-options-option">

    <label for="product_configure_option_color">Color: <em>*</em></label>

    <select name="matrix[color]" id="product_configure_option_color" onchange=" REMOVED ">

    <option value="Army" selected="selected">Army</option>


    <div class="product-configure-clear"></div>


    <div class="product-configure-options-option">

    <label for="product_configure_option_size">Size: <em>*</em></label>

    <select name="matrix[size]" id="product_configure_option_size" onchange = " REMOVED ">

    <option value="X-Small">X-Small</option>

    <option value="Small">Small</option>

    <option value="Medium" selected="selected">Medium</option>


    <div class="product-configure-clear"></div>



    <input type="hidden" name="matrix_non_exists" value="">



    However the product image would not change to show the correct color. I know it has to be possible to change the product picture without a page load, since the thumbnails do not reload the page when clicked.

    So my question is, how can I have a non-page reloading varient dropdown that also triggers the correct picture ?


Sign In or Register to comment.