MirandaPlace Docs
Product Cards
Product Cards controls how products and structured content appear in frontend listings.
Use this editor to arrange card elements, choose which information is visible, and configure separate designs for vertical and horizontal cards.
To access the editor, go to:
Components → MirandaPlace → Appearance → Product Cards
The editor controls the individual listing card. The full product detail page is configured separately through the Product Layout Builder.
MirandaPlace provides two independently configurable card layouts:
- Vertical — the image appears above the content.
- Horizontal — the image and content appear side by side.
Each orientation has its own configuration. Changes to the vertical card do not modify the horizontal card, and vice versa.
These configurations are shared: categories using the same orientation use the corresponding card design.
Choosing the Card Orientation
For an individual category page, select the orientation through the category’s Listing card setting.
For the global Shop and Products listings, use Cards in global listings in Shop Layout. This setting can select a shared orientation or use the orientation configured for each category.
The Product Cards editor defines the composition of each orientation. It does not select which orientation a listing uses.
The content area supports the following elements:
Element | Frontend content |
|---|---|
Title | The product or content title, linked to its detail page. |
Category | The category name. |
Short description | The item’s short description, when available. |
Stars / reviews | The rating, when reviews are enabled and the item has reviews. |
Price | The applicable price information, subject to the effective operating mode. |
Add to cart | The purchase action, subject to the item’s purchasing rules and operating mode. |
A separate Product status element displays applicable availability information, such as preorder, unavailable, on request, or discontinued.
Information Comes from the Item
The editor arranges information already associated with each product or content item. It does not edit titles, descriptions, prices, images, or availability settings.
An enabled element may produce no visible content when the corresponding information is unavailable. For example, an empty short description does not create a text block, and an item without reviews does not display a rating.
Price formatting and related tax information follow the applicable store settings.
Drag content elements to change their display order below the image.
The vertical card also provides positions over the image for compatible elements:
- Product status;
- Stars / reviews;
- Add to cart.
The full-width position at the bottom of the image accepts Add to cart.
The purchase action adapts to its position: an image overlay uses a compact cart icon, while the full-width position displays a labelled action.
Elements cannot be placed in incompatible positions. Title, category, short description, and price remain in the content area.
Horizontal Card
Drag elements to arrange their order within the content column.
Reviews and the purchase action belong in this column. Product status retains its designated image position.
Showing or Hiding Content
Use the eye icon beside a content element to show or hide it.
Hiding an element preserves its position in the configuration, allowing you to enable it again later.
Each element occupies one position within a card layout. Moving an element changes its position rather than creating a duplicate.
Save your changes using the administration toolbar, then check the corresponding frontend listing.
The same card configurations can serve Ecommerce, Catalog, and Content (CCK) categories.
The information displayed follows each item’s effective category mode.
Effective mode | Price | Purchase action |
|---|---|---|
Ecommerce | Displayed when available and enabled in the card layout. | Available when allowed by the item’s purchasing rules. |
Catalog | Displayed when available and enabled in the card layout. | Hidden. |
Content (CCK) | Hidden. | Hidden. |
Placing Price or Add to cart in a layout does not override these rules.
This allows a shared card design to serve different areas of the same website.
Purchase Availability
In Ecommerce mode, the purchase action also respects product availability, stock rules, and applicable Access purchase restrictions.
Depending on the item, the action may be available, disabled, omitted, or use a more specific label.
The card editor controls the action’s placement and visibility; purchasing conditions are configured elsewhere.
Reviews
Reviews appear only when the feature is enabled and the item has reviews to display.
Hiding the rating in a card does not disable reviews on the product detail page.
Category Card Chips
Category Card Chips display selected technical values, such as floor area, number of bedrooms, or other sector-specific information.
Configure these through the category’s Card Chips settings.
They are separate from the draggable elements in the Product Cards editor and appear after the configured card content.
Use the category settings to select their fields, order, and label or icon presentation. See Categories → Card Chips for details.
Card Images
The card uses the image associated with the product or content item.
Manage the item’s images in its editing form. Use Images & Galleries for the related image configuration.
The Product Cards editor positions elements around the image; it does not upload or replace it.
Visual Styling
Use Shop Layout → Custom Styles to configure the available visual styling for cards and their elements.
The final appearance also depends on the Joomla template and any frontend style overrides.
Checking the Result
After saving, review both orientations on the frontend. Include items with different characteristics, such as:
- long titles or short descriptions;
- discounted prices;
- reviews;
- availability restrictions;
- category technical chips.
Check the layouts at desktop and mobile widths to confirm that the information remains readable and purchase actions are easy to use.