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.
Component Name: The name of the component. The default value is “Category Carousel” but it can be edited as needed.
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.
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Text Settings document, here.
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:
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.
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.
The configuration options for each category are the same across the board.
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.
For the rest of the configuration options for the elements used in the component, please visit the Text Settings document, here.
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.
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.