Struggling with data-item-url

This process should be straightforward as the documentation states, but I am completely lost.
What exactly is data-item-url? What kind of information does it store?

If my product is an image, and data-item-image stores the image itself, what is data-item-url? I can’t get the grasp of it.

In the documentation example, the data-item-url is /paintings/starry-night. What is starry-night in the url? And is this url part of the public folder or source folder?

My images are stored in the application, but I also have them in Cloudinary, and I’ve tried adding cloudinary url of the image to data-item-url too, without luck.

I am developing locally, and then there is that post about ngrok. I am not sure if that’s mandatory to use for local development? I’ve tried it, but I always get the same error for any of my attempts.

And then there is also the notice about single page apps, stating that data-item-url should be / or a root domain. If I’m developing locally, what is my root domain here? Because placing / is not working in my case.

It’s also stated that data-item-url should be where the buy button is located. My buy button is located in src/content/content.jsx component. So according to this, should the product url be in content folder? :confused:

I can’t put the pieces together and it makes the process confusing. I read all related docs, and everything sounds logical, but I guess I am lacking a certain understanding of one of these parts of integration. I would really appreciate your help.

Hey Nina, I’m not a programmer myself but I’ll try to help you.
As of version 3.2, data-item-url is optional, so data-item-url is not needed for the buy button. See here: Products – Snipcart Documentation

To be able to test everything from Snicart properly, you should go online with your site or development site, not use localhost.