The Enhanced Product List component brings another powerful tool to Miva’s PageBuilder abilities, allowing you to add a Product List to any PageBuilder page of your website.
The new component is designed to replace the current Category (CTGY), Product List (PLST) and Search Results (SRCH) pages. This makes editing those pages in PageBuilder easier, and allows you the ability to customize the pages within PageBuilder. It also allows you to add product lists to any page of your site, with the ability to control sorting, paging and other custom options.
Updated CTGY, PLST and SRCH Pages
For stores that are using the Shadows framework, if it is running version 10.10 or later, the CTGY, PLST and SRCH pages will be built using the Enhanced Product List component.
Navigate to User Interface > Content Management and opening the Category Display (CTGY) page, for example, and when the PageBuilder window opens, you will see the Product List component on the left side in the Component Pane, and the preview of that component on the Preview Pane.
Stores that are not on Shadows 10.10 will need to make manually assign the Sequence and Flex item to the page, and add the Sequence item template code. Finally, the old list item will need to be removed from the template code.
For example, on the PLST page, you would assign the Sequence and Flex item to the page. Then, you replace the existing content on the page with <mvt:item name="sequence" />, and remove the <mvt:item name="all_products" /> from the template.
For additional information on adding PageBuilder to non-PageBuilder pages, visit the Upgrading To PageBuilder document.
Adding Enhanced Product List Component to a Page
In the Miva admin, navigate to the PageBuilder interface, User Interface>Content Management and then select the page you want to add the component to.
Click the Add Component icon in the Component Pane, and select Product List from the component list.
Rename the Component Name as desired.
Properties: Section Title
The Section Title section is where you set the alignment for your heading, as well as the text that will be displayed in your heading.
Properties: Product List
The Product List section is where you establish what your product list will be created with and how it will be displayed.
NOTE: Each subsection can be expanded and collapsed by clicking the header.
Products: The Products subsection is where you establish what products will be displayed. The options are:
- Determined by Page Items: This choice displays products that are determined by the items displayed on the page.
- All Products: This choice displays all products.
- Assigned to Category: This choice displays a category of products, either that are “Determined by Page Items” or a “Specific Category” of your choice.
- Related Products: This choice displays related products, either “Determined by Page Items” or by choosing a “Specific Product.”
Product Columns: This subsection allows you to set how many columns will display on Mobile devices, Tablets or in a Desktop browser window.
Facets: Facets, also referred to as filters, the Facets subsection allows you to title the section, set the width of the filters column, and customize various aspects of how filters are displayed.
The following Settings relate to the over all Facets:
Expanded Facets (Dropdown Options): Determine how facet groups are displayed when the page first loads. Allows store owners to select "Collapse All" facets, "Expand All" facets, or "Expand First.." facets when the page loads.
Hide Facets on Desktop: When enabled, hides the facet column by default on desktop views. A "Show Facets" button will appear, allowing users to toggle visibility.
The following are related to individual Facets:
Display Show More Links: Allows store owners the option to hide facet-values (filters) beyond a certain count behind a "Show More" link.
Show More Options: Show More, and Show Less, and Show More and Show Less Text.
Show More, and Show Less: Allow store owners the option to hide facet-values using a "Show More" link. When the "Show More" link is enabled all facet-value links are displayed and the link changes to "Show Less".
Show More Threshold: default set to 8, sets the amount of facets displayed in the Filter Column.
Facet Styles: This subsection is where you stylize the text in the filter column along the side of the page.
The next four subsections can be enabled/disabled by the toggle.
1. Sort By: Enabling this allows your customers to sort the product list. In the Default Sort dropdown you set the default sort you want your customers to see. There are a number of options.
Sort By default is set to Relevance:
If no sort order is explicitly selected, newly added Flex Components with sort functionality will default to Relevance. This behavior applies only to components added after the 10.13.03 update. Existing components will retain their previously configured sort settings.
2. Sort Options: This subsection allows merchants to define how products are sorted and which sorting methods are available to customers on the storefront.
Merchants can choose from a predefined list of sorting options and control which ones appear on the page. By default, five sort options are included, but options can be added or removed as needed. Options can be removed by clicking the X on the right side, and reordered using the drag handle on the left.
Available Sort Methods:
Relevance (default if no sort is specified)
Display Order
Display Order Descending
Newest
Oldest
Recently Updated
Code Ascending
Code Descending
Name Ascending
Name Descending
Price Ascending
Price Descending
Best Sellers
Custom Field Ascending
Custom Field Descending
3. View Per Page: This subsection allows your customers to decide on how many items they wish to see per page. There are three listed by default, and customers can use them as one-click options, just like the Sort Options above.
You can add an option by clicking Add Per Page Option. And as in the Sort Options subsection, the Per Page Options can be reordered as well.
4. Pagination: This subsection helps you stylize additional aspects of the Product List. This establishes how the links to additional pages display at the bottom of the list, and the navigation for next/previous.
Details: This subsection has three checkboxes that displays or omits the information for: Total Products, Current Page and Search Term.
Properties: Product Card
The Product Card section controls how each product is displayed within the product list, including:
Details – Displays product information such as name, price, and other selected details
Rating – Displays product review ratings using icons (such as stars or hearts)
Attribute Swatches – Displays variant options (such as color or material) as selectable swatches
Wishlist – Allows customers to save products to a wishlist directly from the product card
Image
The Image subsection can be enabled or disabled to control whether product images appear in the product list. Click the header to expand the settings, where you can select the Image Type, define the dimensions, and determine how the image fits within the Product Card.
Details
The Details subsection controls what product information is displayed on each product card. Several details are included by default and can be edited, reordered, or removed.
To add a new detail, click Add Detail, expand the section, optionally enter a name, and select a Detail Type. Available types include options such as Price, Weight, Custom Fields, and Review Rating.
Depending on the selected detail type, additional configuration options may appear. For example:
Price – Select which price to display
Weight – Displays the product’s assigned weight, with optional prefix and suffix (e.g., “Weight: 10 lbs”)
Review Rating – Displays product ratings using icons (such as stars or hearts), with optional review count
Some detail types also include Text Styles, which can be enabled to control alignment, typography, and theme-based styling, with additional options available under Override Styles.
Rating
The Rating detail allows you to display product review ratings directly within the product card.
When enabled, ratings are displayed using icons (such as stars or hearts) based on values from product custom fields. Configuration Options include:
Rating Custom Field (required) – Select the custom field that stores the rating value
Count Custom Field (optional) – Select the field that stores the number of reviews
Max Rating (default: 5) – Defines the maximum possible rating value
Icon – Choose between Star or Heart icons
Active Color – Color used for filled icons
Inactive Color – Color used for unfilled icons
Attribute Swatches
If a product has Variants with swatch attributes, swatches can be displayed beneath the product image in the Product List, Product Display, and Featured Product 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.
To learn how to add Inventory Variants click here.
Add Variant Attribute Swatches to Product Lists
On the Product List Component click the Image drop-down > located on the Product Card above the Wishlist toggle.
On the Product List Page under Properties, toggle Attribute Swatches as shown below in the first image.
Attribute Swatch Settings
1. Attribute Codes: Specify which attributes should display swatches (e.g., color, material).
The first attribute with option images and inventory enabled will be used for swatches. To target specific attributes, enter a comma-separated list of attribute codes.
2. Attribute Types: Define which types of attributes to include for swatch display.
3. The first matching attribute with option images and inventory enabled will be used. Acceptable types: radio, select, swatch-select. Enter a comma-separated list to limit which types are considered.
4. Maximum Swatches to Show: Limit how many swatches are displayed per product.
5. Image Size: Defines the display size of each swatch image.
6. Corner Radius: Choose between Square or Circle swatch shapes.
7. Border Thickness: Set the width of the swatch border.
8. Border Color: Select a border color to match your design palette.
Add to Wishlist
The Add to Wishlist feature displays a (Heart, Star, or Flag) icon, allowing customers to save items to their wishlist. This feature is powered by AJAX, so customers can interact with the wishlist without leaving the product list page. When clicked, customers are prompted to log into their customer account, where their Wishlist is saved.
The Add to Wishlist feature is located on the Product List Flex Component and the Product List Page on the Properties tab under Product Card.
Customizable Features:
Icon style and color – Select an icon from the dropdown: Heart, Star, or Flag.
Login behavior – Customize the login process. Select from Form, Link, or no method.
Create Wishlist – Customize the wishlist heading and button text shown when a shopper creates a new wishlist.
Product Options – Edit the heading text and button label for the product options section to reflect your brand voice.
Dialog text – Adjust typography, button design, and other text styles shown in wishlist-related dialogs to match your store’s theme.
Note: The original Add to Wishlist button remains available for stores currently using it.
Advanced: Spacing
This section is where you set the spacing of the Enhanced Product List Component from the page elements above and below it. It is set in pixels.
The Spacing section is also where you decide how the Miva admin will handle an Empty Results list.
Clicking the box next to Display Empty Results will display a message when there are no results available. The test displayed is entered in the Empty Results Message field.
The Submit Method tells the admin what to do when results are empty. You can choose either Replace Products or Reload Page.
The Params Prefix field is mainly used when there is a page using multiple product lists flex components. The Params Prefix field is used to give the additional product list(s) a custom parameter namespace such as BestSeller_Offset or Related_Per_Page.
The first instance of the product list component will have the default params of Offset, Per_Page, Sort_By, etc. So adding a custom prefix parameter for the default list as well as the second list, provides a more descriptive URL when a user selects a new page, chooses a sort order or filters the any of the lists.
For example without using custom parameters, the URL for two lists on one page could look like this: www.domain.com/product-list.html?Per_Page=24&ProductList1_Price=500-1000; while using custom parameters, the URL looks like this: www.domain.com/product-list.html?Related_Per_Page=24&BestSeller_Price=500-1000.
NOTE: The next four subsections can be enabled/disabled by the toggle.