Knowing id of the product page images

Ask the community
,
1

Hello All,

I want to add a zoom hover effect on my product pages; this is only available for the classic layout of the image. I want to use the spotlight layout only which does not have that feature.

So, in order to add the zoom effect, I would be required to do that using the Velo code.

Can someone help me to access/ know the ID of the product image so I can access it in Velo code and add the zoom effect?

2

You can try this

  • Open your Wix Editor.
  • Turn on Developer Mode by clicking on Dev Mode in the top menu bar.
  • Inspect the Spotlight Layout Product Page:
  • Go to your product page in the Editor.
  • Click on the product image you want to add the zoom effect to.
  • Check the Properties Panel:
  • When you select the image, the Properties Panel (on the right side of the Editor) will show the element’s ID.
  • By default, the ID might look something like #productImage. If it is not set, you can assign a custom ID in this panel.
  • Add Custom Code for the Zoom Effect:
  • Use the identified ID in your Velo code. Below is an example of how you can implement a zoom effect using CSS with JavaScript: