How can change the display of the product images on the PDP? Spartacus

Question

Im new with spartacus and angular and I am trying to change the style that spartacus brings by default in the PDP, more specifically the images component. I want to delete the carrousel and put the images one on top of the other, as it appears in the capybara theme. i have made a new component for this but i can't loop over the images, I can't find in the product object where the images are.

I've tried {{product.images}}, {{product.images.GALLERY[0].product}} {{product.images.GALLERY[0].thumbnail}} and i get [Object Object]

thanks in advance!

look like this

Answer 1

You can replace the Spartacus's ProductImagesComponent with your new created component, something like this:

provideConfig(<CmsConfig>{
      cmsComponents: {
        ProductImagesComponent: {
          component: YourNewProductImageComponent,
        },
      },
    }),

In your new created component, you can call this.currentProductService.getProduct() to get the current product. Images can be found in {{product.images.GALLERY[x].product}} .