Product zoom is an element which allows the user to open a product gallery in a popup and zoom over it.

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Where this element can be seen?

• Product page

How should this element be designed?

//add our design expectations

How the design may look like?

//add a link to figma, good and bad examples

How to develop styles for this element?

To theme the product zoom, override ImageZoomPopup component.

Additionally you may need to override Popup component, for example to style the popup close button.

• Implementation may look like this:

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Implementation example #1

Implementation example #2

Implementation example #3