Product Details Flex Component
The Product Details Flex Component lets you fully customize your product pages—replacing the standard Miva product layout with one tailored to your brand and marketing goals. 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, meaning it can display product information based on assigned page items—making it reusable across multiple pages.
Using the Product Details Flex Component
To access the component:
Go to User Interface in your Miva admin.
Open the PROD page.
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:
Layout: Side By Side (children of this entry would be displayed next to each other)
Layout: Inline
Layout: Vertical (children of this entry would be displayedvertically stacked)
Layout: Accordion
Layout: Tabs
Detail: Code
Detail: Custom Field
Detail: Description
Detail: Name
Detail: Quantity in Basket
Detail: SKU
Detail: Weight
Pricing: Discounts
Pricing: Price
Pricing: Volume Pricing Table
Inventory: Available
Inventory: Message (Long)
Inventory: Message (Short)
Button: Add to Cart
Button: Add to Wishlist
Feature: Attributes
Feature: Combination Facet Fitment
Feature: Custom Text
Feature: Fragment
Feature: Images
Feature: Product Charges
Feature: Quantity Input
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.
Caution
When upgrading to Miva version 10.12.00, the Product Display Flex Component will not be added to the PROD or PATY pages unless the 10.12.00 Shadows framework is installed. To install, review the Upgrading To PageBuilder document.
Warning
If your store uses AmazonPay v2 and/or PayPal Complete Payments, and want to use the Product Details Flex Component, you MUST update your existing ReadyTheme content sections due to the new product_details_additional_data fragment used in the component. These changes allow the respective buttons to be displayed on the PROD page.
For AmazonPay v2:
Replace:
<mvt:elseif expr="l.settings:page:code EQ 'PROD'">
With:
<mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:fragment:code EQ 'product_details_additional_data'">
For PayPal Complete Payments:
Replace:
<mvt:if expr="l.settings:page:code EQ 'PROD'">
With:
<mvt:if expr="l.settings:page:code EQ 'PROD' OR l.settings:fragment:code EQ 'product_details_additional_data'">