Configuring custom images for the SKU Selector

Introduction

By default, the SKU selector component uses miniatures of SKU images when rendered.

sku-selector-images

These images that the component uses are taken from the SKU's previously given information in admin's Catalog.

However, you can configure the SKU selector to display a custom image, meaning an image different than the default one used by the SKU. For example:

sku-selector-image-custom

Follow the step-by-step below to see how to apply this configuration in your store.

Step by step

  1. In the admin's Catalog, access Products and SKUs.
  2. Select the desired SKU and access the Images tab.
  3. Upload the desired custom image, by clicking on Insert.

configuring-sku-selector-images

  1. Upload the file in the File field and set an ID for the recently uploaded file in the Label field. Click on Save after performing all your changes.
  2. In your theme's code sku-selector block, add the thumbnailImage prop, whose past value should be the same as the label added in the catalog. For example:
"sku-selector":{  
  "props": {  
    "thumbnailImage": ["LabelName"]  
  }  
},

After completing step 5, you will be able to check a brand new image for your SKU selector.

The problem is that this image is link to the SKU through the catalog information, and therefore will also be rendered in its original format when users select the SKU in question.

The way out of this scenario is to hide the custom image that's linked to the SKU in the product-images block.

  1. In the product-images block you can use the hiddenImages prop to activate a sort of image blacklist. This prop's value should be the custom image's label, the same one used in the previous step. For example:
"product-images": {  
  "props": {  
    "displayThumbnailsArrows": true,  
    "hiddenImages": ["LabelName"]  
  }  
},
Remember to replace the value inserted in the brackets with real values, according to your SKU label.

Consequently, you'll be able to configure a customized image exclusively for your SKU selector component, without it affecting your store's layout or that of the SKU images displayed to users.

For this configuration to properly work, all SKU custom images must have the same label value (which must be the only value given between brackets). Otherwise, even by following the steps above, the SKU selector will continue to render the default images.
Edit this page on GitHub