The hero image component is used to display the main image of a product or variant. It needs to be inside the product card. The image will dynamically change based on the variant selected.

​
Setup

  1. Add the following custom attribute to the image inside product card component:
looop=hero-picture