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

Page Builder - Featured Product Component

The Featured Product component is a way for you to showcase a specific product, for example for a product launch or for a product that has been improved and updated, within its own component.

On this Page

• Properties: Layout
• Properties: Product
• Properties: Text
• Advanced: Spacing
• Advanced: Display Settings

Component Name: The name of the component. The default value is “Featured Product” but it can be edited as needed.

Properties: Layout

Image Position: This sets where the image will be located in the component. The choices are the Left Side or the Right Side.

Properties: Product

Product: This is where you choose which product to feature. You can type the product in if you know it, or you can use the Look Up button.

Product: Text

Product Name Text: Click the chevron to expand this section. When expanded, you can configure the text as desired.

Subheading Text: Click the chevron to expand this section. When expanded, you can enter the desired text. Clicking the icon next to the text box opens the Text Settings box.

Description Text: Click the chevron to expand this section. When expanded, you can configure the text as desired.

Overwrite Product Description: To enable this function, click the slider. Once enabled, you can enter a description in the Description Text box.

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

Product Image: This sets which image will be used in the component.

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.

Display Multiple Images: Clicking this allows you to show more than one image in the component. Users will be prompted to view the other images with arrows on either side of the image.

Display Discount Info: Click this if you wish to display the discount information for the product in the component.

Add to Cart Button: To enable this, click the slider to the right.

Button Text: Enter the text you wish to have in the button. Clicking the icon next to the text box, opens the Text Settings box. Inside, you will choose the Button Style, and establish the Button Size.

Next Section

• PageBuilder - Category Carousel