Category Carousel Component
Much like the Product Carousel, PageBuilder’s Category Carousel allows you to feature a “carousel” of different categories. This allows visitors to see an image representing an entire category of products and navigate to that category of products right from the component.
On This Page
Basics
Component Name: The name of the component. The default value is “Category Carousel” but it can be edited as needed.
Properties: Section Title
Click the slider if you wish to enable a Section Title for your Product Carousel. This title appears above the carousel.
Heading Alignment: This aligns the Section Title. The options are left, center or right.
Heading Text: Enter the desired text in the box. Clicking on the icon next to the text box opens the Text Settings box.
Note
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Component Text Settings document, here.
Properties: Categories
The Categories section of the Properties tab is where you choose which categories will be displayed in the carousel.
Image Height: This establishes the height of the image in the carousel. The options are: Defined by Smallest Image Size, Small, Medium or Large.
Image Fit: This sets how the content of the product image is resized to the image container within the carousel. The options are:
Cover: The image is sized to maintain its aspect ratio while filling the element's entire content box. If the aspect ratio of the image does not match the aspect ration of its box, it will be clipped to fit.
Contain: The image is scaled to maintain its aspect ratio while fitting within the element's content box. The entire image is made to fill the box, while preserving its aspect ratio, so the object will be letterboxed if its aspect ratio doesn't match the aspect ratio of the box.
Fill: The image is sized to fill the element's content box. The entire image will completely fill the box. If the image's aspect ratio does not match the aspect ratio of the box, the image will be stretched to fit.
None: The image is not resized.
Scale Down: The image is sized as if None or Contain were selected, whichever would result in a smaller concrete image size.
By default, there are five categories shown, but that can be changed to more or fewer.
Clicking on one of the categories opens up the configuration options for that category.
Category: If you know it, enter the name of the category in the box. Otherwise, use the Look Up function to find it.
Image
Category Image: Click the slider to enable the Category Image.
Image: In the drop down, select Category Tree or Category Title.
Custom Image: Click this slide if you wish to use a custom image rather than the Category Image.
A custom image can be useful because it can support the use of responsive images, for things like mobile and tablet, with a little better experience for the customer.
You can select the image with the button, or enter the URL to link to the image.
Clicking Image Settings opens the settings for a Mobile Image and a Tablet Image if desired.
Alt/Title Text: This is the text that appears over the image on mouse hover.
Note
The configuration options for each category are the same across the board.
Properties: Text Styles
This section allows you to configure the location and styles of the text elements in the component.
Text Alignment: This aligns the text with the category images in the component. The options are left, center and right.
Note
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Component Text Settings document, here.
Advanced: Spacing
The Spacing section of the Advanced tab allows you to alter the spacing, or padding, on the top and the bottom of the component. This establishes the space between this component and the page elements adjacent to it. It is set in pixels.
Advanced: Slide Controls
Items Per Page: This establishes how many products are on a carousel page. The options run from 2-8.
Items Per Scroll: This establishes what happens when you have more items in the carousel than spaces on a carousel page. For example, if you have seven items in the carousel, but you have set Items Per Page to five, two of your items will not be displayed unless the website viewer clicks the arrows to the side of the page.