How to Update Product Landing Page Thumbnail Based on Selected Attributes

0:00 Hi, welcome to the Infigo academy. In this video, we'll be walking you through how to update the product landing page product image based on the attributes of customer selects.
0:11 So why would you want to update the product image based on selected product attributes? Let's say you have a color attribute with two values, red or blue.
0:21 You can change the product image to reflect these colors when either of them are selected in a combination with another attribute like product size.
0:28 So if you select size small with color red, it will display a specific product image you've saved against that attribute combination.
0:37 To start, you want to ensure that you have two product attributes created on your storefront. You can do this via the product attribute section in the admin area.
0:46 You can also pre-create product attribute values. But in this example, we'll be showing you by creating new attribute values on the fly.
0:54 Once completed, navigate to the Product Management page and open the Edit Product Variant section for the product you want to apply this configuration to.
1:04 Under the Attributes tab, click on the Add New Record button and add two separate attributes. In this example, we'll add Size and Color, but feel free to change the attribute names based on your own needs.
1:17 Click on the Edit Values button for the Size attribute and add three separate values. small, medium and large. Repeat the same process for the color attributes and add two separate values, blue and red.
2:02 Under the Attributes Combination tab, click on the Add Combination button and under the Size drop down, select the Small value.
2:10 Under the Color drop down, select the Red value and save the attribute combination. Click on the Add Combination button again and under the Size drop down, select small again.
2:32 But this time, under the color drop down, select the blue value and save the attribute combination. Depending on how many attributes you have, you will need to repeat this process until all attribute values have a combination.
2:45 So since we have three values for size, small, medium and large, we'll need to repeat this process for all of them with both red and blue colors.
2:53 If you're following this example, you should end up with six different attribute combination like you can see here. Upon saving and re-entering the edit section for an attribute combination, you'll see a new tab appear called images.
3:20 Under this tab, you'll need to add the product image you want to display when this combination is selected on the product landing page.
3:27 For example, if you want to display a red t-shirt when the customer selects size small and color red, you'll want to upload the picture of a red t-shirt here.
3:37 Ensure you click the ad product picture button after uploading the image, and this will save the image against the attribute combination.
3:44 Repeat the same process for the other attribute combinations, so for the color blue, you'll probably want to add a picture of a blue t-shirt.
4:14 Once completed, save the product, navigate to your storefront page and open the product you've saved this configuration to. Upon being redirected to the landing page, you'll see two attributes you've saved against is product.
4:28 Right now the product landing page is displaying the main product image saved in the pictures section within the edit product area.
4:39 However if you expand the size drop down and select the small option and expand the color drop down and select the red option you'll see the product image changes and displays the image you saved against the attribute combination in the previous steps and the same will happen when you select the color
4:55 blue. And this is how you change the product landing page thumbnail based on different attributes selected by the customer. And that's all for this video.
5:05 See you in the next one.