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