Storefront Development

Storefront Development
Store Framework
Configuring custom images for the SKU Selector

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

{"base64":"  ","img":{"width":2878,"height":1404,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":741866,"url":""}}

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:

{"base64":"  ","img":{"width":2878,"height":1514,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":753604,"url":""}}

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.

{"base64":"  ","img":{"width":2876,"height":1642,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":338237,"url":""}}

  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.

Specifying SKU color variations

Once you have configured the custom images, you should set a specific name to display the SKU color variations.

{"base64":"  ","img":{"width":1892,"height":756,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":390454,"url":""}}

Follow the next step-by-step on how to configure the SKU color variations.

  1. Access your store's Admin.
  2. Go to Catalog > Categories.
  3. Choose the desired categorie and in ACTIONS click on Field(SKU)
  4. In Field click in the group's Edit and in the fields Name and Text complete with a color variation name which you can check the values in the SKU Selector component. For example:

{"base64":"  ","img":{"width":1886,"height":792,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":89666,"url":""}}

  1. Click on Save to make your changes available on SKU with thumbnail images.
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Suggest edits (Github)
Cleaning cart data on log out
Creating a Black Friday page from template
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page