• Miva Docs
• Reference Guide
• Miva 10 Page Builder Product Carousel Component

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.

On this Page

• Properties: Section Title
• Properties: Products
• Advanced: Spacing
• Advanced: Display Settings

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.

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:

• 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.

Category

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.

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: 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

• PageBuilder - Header-Footer