PageBuilder - Product Carousel Component

The Product Carousel Component allows you to feature a "carousel" of different products. This allows visitors to see an image and call to action button directly from the page they are on, without navigating to the product page.

Product Carousel

On this Page

Component Name: The name of the component. The default value is “Product 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.

Heading Alignment: This aligns the Section Title. The options are left, center or right.

Heading Text: Enter the desired text in the 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.

Properties: Products

The Products section of the Properties tab is where you choose which products will be displayed in the carousel. There are two ways to establish which products are displayed: by Category or by selecting individual products.


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:


To display products based on category, click the Slider next to Select a Category.


Category: You can type in the name of the category you wish to display, or select from your website’s list of categories by clicking the Look Up button.

Number of Products: Choose the number of products to display on the carousel. The options are 5, 10, 15 or 20.

Sort Order: Select how the products will be sorted. The options are: Relevance, Display Order, Display Order Descending, Newest, Oldest, Recently Updated, Code Ascending, Code Descending, Name Ascending, Name Descending, Price Ascending, Price Descending or Best Sellers.

Select Individual Products

To select individual products to display, click the slider next to Select Individual Products.


Add Product: Click the Add Product link to add a product to the carousel.

You can type the name of the product, if you know it, or select from you website’s inventory by clicking the Look Up button.

In the Product Lookup box that opens, select the product you wish to see in the carousel, and then click OK.

Repeat the process as many times as needed.


You would typically only enable one or the other, either establshing the products by category or by using individual products. However, if both are enabled, the carousel will still work, but the products by category would be displayed first.

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.

Spacing Section

Advanced: Display Settings


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.


Items Per Scroll dictates how the arrows behave. The options are Full Page at a Time or One Item at a Time.

Image Type: This allows you to set the type of image the carousel will use.

Image Dimensions: This establishes the dimensions of the images in the carousel.

Displayed Price: This sets what price is displayed along with the item. The options are: Sale, Retail or Base.

Additional Price: This allows for the display of an additional price. The options are: Base, Retail or None. For example, this can be used when an item is on sale. You could set the Sale price to be displayed in the Displayed Price setting, and then set the Retail price to be displayed as the Additional Price, which would show the website visitor the price difference between the two.


Add to Cart Button: Click this slider to enable the Add to Cart Button to display under the products.

Button Text: Enter the text to be displayed in the button.

Click the icon next to the Button Text box to open the Text Settings pop out.

In the box that opens, there are two settings you can configure.

Button Style: Sets the type of button being displayed.

Button Size: Sets the size of the button being displayed.

Details Text: This is the text that displays in the button when the associated product has attributes. Because a customer would need to make additional selections, like a size for example, the button will provide additional details upon click. In the screenshot above, the text to be displayed in the button would say "More Details."

Next Section

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.


Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.