TABLE OF CONTENTS

Summary

The CC Product Carousel component displays products from several categories or specific SKUs in a carousel format.

Demo

User guide

2.1.8. Product carousel

Magesuite standard

Open

Desktop view

Open

Mobile view

The carousel consists of:

1. Scrollable list with tiles. The list has a native scroll and can be swiped on touch devices.

2. Pagination - pagination displays the number of groups (the group consists of tiles that are visible on one screen). Pagination is not clickable and is purely informative. Pagination is displayed as a number (in the format 1/10) when there are more than 10 items. This setting can be configured for every project.

3. Navigation - (prev button and next button). It scrolls the carousel to the next group. By default navigation buttons are not shown on mobile but can be enabled there. The inactive button can be greyed out, can have opacity, or can be fully hidden. The carousel does not apply a loop.

Magesuite scenarios

Show part of the next tile on mobile

The common pattern is to show part of the next tile on mobile. The goal is to inform the user, that there are more tiles in the carousel and the list can be scrolled.

Use the whole screen on desktop

A carousel can use the whole available screen. This setting must be applied globally, for all carousels in a given project.

Live shops customization examples