How to Display Multiple Products on the Homepage

10 replies
Last updated: May 19, 2022
Hi guys,
I have 2 type of products shown in the screenshot below. How do I project both of them in the homepage? This is how I project my first product:

const Home = ({product}) => {
  return (
    <div className={styles.card}>
      <img src={urlFor(product.image).width(200)}/>
      <PortableText value={} />
      <a href={product.installatiesheet}>Installatiesheet</a>

export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{

  return {
      props: {

export default Home
May 19, 2022, 9:34 AM
user F
do you have a suggestion on how to approache this ?"
May 19, 2022, 11:02 AM
Your query picks only the first product due to
. If you want to display multiple products, you need to remove that selector, and then use a loop or uses
or something like this. Basically, query your products (plural), and display them.
May 19, 2022, 11:04 AM
like this?
and I changed the range to


May 19, 2022, 11:10 AM
If you remove the range entirely, that will query all of them. But yes. πŸ™‚
May 19, 2022, 11:10 AM
Then you have an array of products.
May 19, 2022, 11:10 AM
And you can loop over that array to display info for each of them.
May 19, 2022, 11:11 AM
if i remove the range I get an error : Error: Unable to resolve image URL from source (undefined)
May 19, 2022, 11:11 AM
oh nvm my last message this works
May 19, 2022, 11:13 AM
thanks again Kitty you really help me alot today πŸ‘
May 19, 2022, 11:13 AM
May 19, 2022, 11:14 AM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.