Product Details Flex Component

The Product Details Flex Component gives you complete control over your product page layout, allowing you to replace the default Miva structure with a fully customizable design that aligns with your brand and merchandising strategy, no coding or developer support required.

Why the Product Details Flex Component Matters

This component brings Miva closer to a true no-code platform, giving you:

• Full control over product presentation
• Increased design flexibility
• Faster updates without technical support
• Dynamic content rendering for any assigned product

Unlike static components, the Product Details Flex Component is dynamically sourced. This means it can display product information based on assigned page items, making it reusable across multiple product pages while maintaining consistent styling and behavior.

Using the Product Details Flex Component

To access the component:

1. Go to User Interface in your Miva admin.
2. Open the PROD page.
3. Select the Product Details component from the left panel.

Properties: Product 

Source: There are two options; Determined by Page Items or Specific Product. Using Determined by Page Items here is ideal, because it relies on the dynamic sourcing of the component.

Details: The Details section offers four "levels" of configuration, with myriad options within each level. Each level builds off the previous level. This provides a greater level of flexibility and customization to create the product listing you need.

Within each level, you can choose one of the following types to display, with each type having its own setting. Use the “Add Detail: Level 1” button to begin. 

Layout Types:

• Layout: Side By Side (Children of this entry displays horizontally)
• Layout: Inline (Groups content in a single line, usually for text elements)
• Layout: Vertical (Children of this entry displays vertically stacked)
• Layout: Accordion (Creates expandable/collapsible sections)
• Layout: Tabs 

Detail Types:

• Detail: Code
• Detail: Custom Field
• Detail: Description
• Detail: Name
• Detail: Quantity in Basket
• Detail: SKU
• Detail: Weight

Pricing Types:

• Pricing: Discounts
• Pricing: Price
• Pricing: Volume Pricing Table

Inventory Types:

• Inventory: Available
• Inventory: Message (Long)
• Inventory: Message (Short)

Button Types:

• Button: Add to Cart
• Button: Add to Wishlist

Feature Types:

• Feature: Attributes
• Feature: Combination Facet Fitment
• Feature: Custom Text
• Feature: Fragment
• Feature: Images
• Feature: Product Charges
• Feature: Quantity Input

Advanced: Attribute Settings

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.

Adding Swatches to the Product Card:

1. Open the Product Details Flex Component.

2. Navigate to the Details section.

3. Click Add Detail: Level 1.

4. A new detail item will appear (e.g., Detail Name Here).

5. In the Type dropdown, select Feature: Attributes.

6. The Swatch Settings panel will become available.

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.

Properties: Preview Setting

The Preview Setting section allows you to see the changes you make with a specific product, or category.

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.

Update URL with Variant ID checkbox: If checked and the variant_id is passed in the URL the attribute options will be selected. This allows for specific variant URIs to be added to marketing URLs.

Use Cases

Given the myriad options available within the Product Display Flex Component, there are virtually limitless ways to use it.

The general way, as a Product Display page is just one possible use.

You could create a special Product Display page with offering a specific discount.

You could create a special page that encourages shoppers to call for a quote, which would be useful for bulk purchases as well as B2B purchases.

<mvt:elseif expr="l.settings:page:code EQ 'PROD'">

<mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:fragment:code EQ 'product_details_additional_data'">

<mvt:if expr="l.settings:page:code EQ 'PROD'">

<mvt:if expr="l.settings:page:code EQ 'PROD' OR l.settings:fragment:code EQ 'product_details_additional_data'">