MOLECULES

Product Image

Product image molecule is currently used inside product widget organism and is responsible for showing product image with different sizes and badges.

Tempalte Details:

Name:

Product Image

Documentation:

https://www.contorion.de/designsystem/molecules/product-image

Template:

@catalog/components/product-image.molecule.twig

Twigprops:

isFirstBadgeVisible, isSalesBadgeVisible, fullWidth, isMediumSize, imageClasses, containerClasses


Product image sizes

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Medium Size

Default size

Responsive:


Product image badges

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Topseller
-20 %

Responsive: