Skip to content

Configuring Sidebox and Centerbox Carousels

lat9 edited this page May 19, 2024 · 1 revision

v3.7.0 of the template introduces the ability to configure various sideboxes

  • best_sellers
  • featured
  • reviews_random
  • specials
  • whats_new

and centerboxes

  • featured
  • new
  • specials

to be displayed in a carousel instead of a list, thus taking up less screen "real-estate". Each of these are available in the updated Configuration :: Bootstrap Template Settings image-20240519140115198

Sidebox Carousel Configuration

There are two configuration settings that are used to display sideboxes in carousel-mode:

  1. Sideboxes as Carousels. This setting contains a comma-separated list of the sideboxes to display as a carousel.
  2. Sideboxes Carousels to Fade. This setting contains a comma-separated list of the sideboxes (set in the above setting) that should fade instead of slide.

Centerbox Carousel Configuration

Each of the "Featured", "New" and "Specials" centerboxes has a separate configuration setting. If a carousel setting is empty, then the associated centerbox displays under the control of its unique columns/row setting in Configuration :: Index Listing.

Otherwise, the carousel setting identifies

  1. The number of products to be displayed on "large" screens, like monitors or laptop screens.
  2. The number of products to be displayed on "medium" screens, like phones in landscape mode.
  3. Whether the carousel transitions from one product to the next by fading (the default is that the transition slides to the next).

As an example, the configuration 3,2;fade in the screenshot above indicates

  1. 3 products are included in the carousel on "large" screens (3,2;fade) image-20240519142626690

  2. 2 products are included in the carousel on "medium" screens (3**,2**;fade) image-20240519142755718

  3. The carousel 'fades' in its transition since (;fade) is added to the end.

Notes:

  • Carousels **always **display a single product per transition for "small" screens (phones in portrait-mode)

image-20240519142953567

  • The "medium" screen's product count is optional. If not supplied, e.g. 3 or 3;fade), then the same number of products are displayed on all but the "small" screens.