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.
The Featured Product component will not display in the Live Preview window until you have selected a product to be featured. The product is selected in the Properties: Product section.
Component Name: The name of the component. The default value is “Featured Product” but it can be edited as needed.
Image Position: This sets where the image will be located in the component. The choices are the Left Side or the Right Side.
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 Name Text: Click the chevron to expand this section. When expanded, you can configure the text as desired.
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.
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.
If you do not enable this function, Miva will use the description associated with the product from its page. In addition, if the product's page description is too long, the Featured Product component will truncate the text.
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.
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:
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.