How to Display a Shopify Query in Next.js

Looking at your two questions:

1. Displaying Shopify Image URLs in Next.js

Since the previewImageUrl from Shopify is already a CDN URL (not a Sanity image reference), you don't need to use urlFor() - that's only for Sanity-hosted images.

Simply use it directly as an image source:

<img src={product[0].previewImageUrl} width={200} alt={product[0].title} />

Or with Next.js Image component:

import Image from 'next/image'

<Image 
  src={product[0].previewImageUrl} 
  width={200} 
  height={200}
  alt={product[0].title} 
/>

Note: If using Next.js <Image>, you'll need to add cdn.shopify.com to your next.config.js image domains:

module.exports = {
  images: {
    domains: ['cdn.shopify.com'],
  },
}

2. Automatically Updating Prices from Shopify

The price updates depend on how you've configured Sanity Connect for Shopify:

If using Direct Sync:

• Go to your Sanity Connect settings in Shopify
• Make sure "Sync data automatically" is enabled under "When to synchronize"
• Prices will automatically sync whenever you update products in Shopify
• The synced data includes the priceRange field on product documents

In your GROQ query, access the price like this:

*[_type == "shopify.product"] {
  _id,
  title,
  "image": store.previewImageUrl,
  "price": store.priceRange.minVariantPrice,
  "variants": store.variants[]-> {
    store {
      price,
      compareAtPrice
    }
  }
}

The store object contains all the Shopify-synced data, including pricing that updates automatically when you change prices in Shopify.

Important: Be aware that inventory changes (sales) also trigger sync updates. For high-traffic stores, you may want to consider using a custom sync handler to control how frequently price updates occur and manage API CDN cache invalidation.