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
Caution
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.
Basics
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.
Properties: Text
Product Name Text: Click the chevron to expand this section. When expanded, you can configure the text as desired.
Note
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Component 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.
Note
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.
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.