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
- Basics
- Properties: Layout
- Properties: Product
- Properties: Text
- Advanced: Spacing
- Advanced: Display Settings
- Advanced: Attribute Settings, Swatches
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.
Advanced: Attribute Settings, Swatches
If a product has Variants with swatch attributes, swatches can be displayed beneath the product image in the Product Display, Featured Product, and Product List Flex Components. Swatches can represent options such as colors, textures, or other visual differentiators.
You can customize the style of your swatches using controls for size, border, outline, and shape to align with your site's design.
When a shopper selects a swatch, the main product image updates to show the corresponding variant image, offering a quick visual preview without leaving the page.
Creating Swatch Attributes
Attribute Creation example: Create the Product Attribute for Color by going to:
PATH: Catalog > Products > Select Product > Attributes tab
Create an Attribute for Color, for the Attribute Type select Swatch - Drop-down.
Create Options for the color Attribute. Click the ( + ) button to add the image column shown below. Upload the your swatch image here.
To learn more about Inventory Variants click here.
Using Feature Product Flex Component and Swatch Attributes:
Located under the Advance Tab, Attribute Settings.
Attribute Settings:
1. Attribute Prices Show/ Hide: Choose visibility of pricing for an attribute (e.g., "+ $5.00"). Useful when the main product price includes all options.
2. Include "Select One" in Drop-downs?: When enabled, adds a default “Select One” placeholder to attribute drop-downs.
3. Select One Text: Customize the default placeholder text (e.g., “Choose a size”).
4. Attribute Swatches: Customize the visual appearance of swatches to match your site design.
5. Image Size: Defines the display size of each swatch image.
6. Corner Radius: Choose between Square or Circle swatches.
7. Border Thickness: Set the width of the swatch border
8. Border Color: Select a border color to match your design palette.