How to use own next/image component for commerce product images?

Developer Support
1

using the commerce Product Image component - and they’re coming through original size. I have a Next/Image shopify loader I can use. But not sure. how to go about replacing the baked in component with my own

2

Hey @efficient_pelican! Are you using headless API or codegen?

3

headless api

4

is there a useProduct() hook i can pull from anywhere to get the product from the Product Box context?

5

I’m currently working on this

6

Hey @efficient_pelican! It’s available on prod. We’re providing the data with the selector product and you can consume it importing our useSelector from @plasmicapp/loader-nextjs .
Here it’s an example:
import { useSelector } from "@plasmicapp/loader-nextjs";
import Image from "next/image";
export const ProductMedia = ({ mediaIndex }: { mediaIndex: number }) => {
const product = useSelector("product");
const image = product?.images[mediaIndex];
return <Image src={image.url} width={image.width} height={image.height} />
}

7

awesome! i’ll give this a try asap

8

is there a selector for collection inside the Collection grid view? I’m trying to wrapChildren and inject react-infinite-scroll component