Product Gallery is a slider that allows customers to scroll through available images of certain product

<aside> ℹ️

</aside>

Where this element can be seen?

The product gallery can be found on the following elements:

• Product page

How should this element be designed?

The product gallery should be displayed accounting for the following:

• Product gallery may have video from YouTube, Vimeo, self-hosted

Please account for the following states:

• Hovered video play button
• Hovered next image button
• Hovered previous image button

Design example #1

Design example #2

How to develop styles for this element?

Theme the ProductGallery component.

The Slider component is responsible for rendering the arrows and the mobile layout crumbs.

The carousel is rendered by the CarouselScroll component. There, all the carousel behavior can be modified, such as its scroll, arrows, display, etc.

To style the carousel arrows, override the CarouselScrollArrow component.

To style the carousel items, override the CarouselScrollItem component and also ProductGalleryThumbnailImage if you want to modify the images that are rendered inside the items.

To change the default number of displayed slides on the carousel:

1. Override the ProductGallery.component.js file.
2. Override its state.
3. Change the slidesCount state.

A real implementation may look like this:

state = {
		...this.state,
    slidesCount: 5
};

Here, we want only 5 slides to be rendered at the start in our carousel.

<aside> ➡️ The default behavior is to change this number when the screen size changes. This is done by the calculateGallerySize() function.

</aside>

When changing the carousel styles, make sure to update the CarouselScroll.config.js file. It contains constants that are used to implement the carousel behavior.

A real implementation may look like this

export * from 'SourceComponent/CarouselScroll/CarouselScroll.config';
/*^^^ only needed if not all consts are going to be replaced */

export const CAROUSEL_ITEM_GAP = 48; // gap between items
export const CAROUSEL_ITEM_WIDTH = 80; // items width
export const ARROW_SAFE_AREA = 32; // arrow area

Implementation example #1

Implementation example #2

Implementation example #3

<aside> ℹ️

Usually, styling this element takes from-to: 3-5h

</aside>