MirandaPlace Docs
Product Layout Builder
The Product Layout Builder lets you create reusable detail-page layouts for products and structured content.
Combine rows, columns, tabs, accordions, product information, additional fields, and Joomla modules to organize each page around the information your visitors need.
To access layout management, go to:
Components → MirandaPlace → Appearance → Product Layout Builder
These layouts control the full product or content detail page. Listing cards are configured separately through Product Cards.
Create a new layout or open an existing layout from the layout management page.
Each layout has:
- Title — a descriptive name used to identify the layout in administration.
- Alias — the layout’s identifying alias.
- Status — Published or Unpublished.
Choose a name that describes its intended use, such as Clothing Product, Property Details, or Trail Information.
Building the Layout
The editor provides a canvas for the page structure and a sidebar containing available elements.
Start by adding a row and choosing its column arrangement. Then drag elements from the sidebar into the required columns.
You can continue adding rows, rearranging elements, and organizing longer sections into tabs or accordions.
The canvas represents the page structure. Check the frontend to see the final result with actual product data, images, and template styling.
Saving Changes
Save the layout using the administration toolbar. A layout must be published and selected in the applicable category or global configuration before it can be used on the frontend. Editing a shared layout affects every product or content page that uses it.
Rows & Columns
Rows divide the page into sections. Each row can use a different column arrangement.
For example, a product page might contain:
- a two-column introduction with the gallery beside the title, price, and purchase controls;
- a full-width description;
- a technical information section;
- related products at the bottom.
Drag elements into columns and arrange them in the required reading order.
Rows and columns also provide settings for titles, spacing, and visual presentation.
Changing a Column Arrangement
You can change the column arrangement of an existing row.
If the new arrangement removes columns containing elements, the editor asks for confirmation. Affected elements return to the palette so that you can place them again.
Removing a field from the layout does not delete its value from the product.
Tabs & Accordions
Use the Tabs or Accordion container from the Structure palette to group related sections.
Place rows inside the container and give the sections meaningful titles, such as:
- Description;
- Specifications;
- Additional information;
- Reviews.
Tabs present sections through a tab navigation. Accordions organize them into expandable panels.
Both container types allow you to keep detailed information organized while preserving space for the main product presentation.
The sidebar groups the available elements by purpose.
Core, Functional & Technical Fields
These groups include elements such as:
- title, gallery, short description, and full description;
- price and purchase controls;
- product identifiers and availability;
- features, stock, and reviews;
- videos and related products;
- dimensions, weight, packaging, and quantity information.
Drag the required elements into the layout.
The builder determines where information appears. Edit the product itself to change the underlying values.
The presence of an element in the layout does not guarantee visible output: the product must contain the relevant information, and the associated feature must be available.
Specific Fields
Specific fields provide information associated with a sector, such as real estate or a particular type of structured content.
A new layout starts without a selected sector.
To make specific fields available:
- Choose the sector in Specific fields.
- Select Load.
- Drag the required fields into the canvas.
Each layout is associated with one specific-field sector.
Changing the sector requires confirmation and removes the previously placed specific-field elements from the layout. General, functional, technical, and additional fields remain unchanged.
Values already saved in products are preserved.
Extra Fields
The Extra fields palette contains the additional fields configured in MirandaPlace, organized into their available groups.
Create and manage these fields through Fields, then place them in the layout where their values should appear.
See Products → Fields & Structured Content for the distinction between predefined specific fields and additional fields.
Joomla Modules
The Modules palette allows you to place Joomla site modules within the detail-page layout.
Modules are identified by title and ID.
This palette has its own publication-status legend:
- Blue — published module.
- Amber — unpublished module.
An unpublished module can remain referenced in the layout, but it is not rendered on the frontend.
Module configuration remains managed through Joomla’s module administration.
A layout can be shared by categories using different operating modes.
The builder displays compatibility information independently of the default mode selected in Store Configuration.
The Block compatibility legend identifies:
- Blue — elements available in Ecommerce, Catalog, and Content (CCK).
- Amber — commercial elements available in Ecommerce and Catalog.
- Orange — purchase functionality intended for Ecommerce.
The effective mode of the product’s category determines the frontend behaviour.
Ecommerce
The page can display commercial information and purchasing controls, subject to the product’s availability, configuration, and purchasing rules.
Catalog
The page can retain prices, product options, availability, and stock information.
Quantity selection and cart submission are disabled.
The purchase block may therefore still provide product information, even though visitors cannot complete a purchase.
Content (CCK)
Commercial and logistical blocks are hidden, allowing the layout to focus on descriptions, media, technical content, and additional fields.
Layout Data Is Preserved
Changing an operating mode does not remove elements from the saved layout or delete the corresponding product data.
An element hidden by the effective mode remains available in the builder and can appear again when the applicable mode allows it.
The builder provides styling controls for the layout’s structure and main elements.
Rows & Columns
Use the available row and column settings to adjust presentation, including:
- titles and title alignment;
- internal padding and external margins;
- spacing between columns or elements;
- backgrounds;
- borders and rounded corners.
Use spacing to separate related groups of information and keep the page readable.
Tabs & Accordions
Containers provide styling controls for their navigation or expandable headings and their content areas.
These settings allow you to coordinate the appearance of controls, backgrounds, text, and borders.
Main Elements
Select Customize elements to configure the available styles for:
- title;
- price;
- badge;
- Add to cart button.
These settings belong to the current layout.
The final frontend appearance also depends on the Joomla template and any applicable style overrides.
Checking Different Screen Sizes
Review the finished page at desktop and mobile widths.
Check column flow, long titles, gallery proportions, technical information, tabs, accordions, and purchase controls using real products or content items.
Global Default Layout
Select the default detail-page layout through:
Appearance → Shop Layout → Product Page
This provides the shared layout for products whose category hierarchy does not specify another one.
Category Layout
A category can select a different layout through Default Product Layout.
MirandaPlace resolves the layout in this order:
- The layout selected for the current category.
- A layout inherited from its parent categories.
- The global default selected in Shop Layout.
If no applicable custom layout is available, MirandaPlace uses its built-in Default layout.
This allows you to use one general layout across the website while assigning specialized layouts to particular category branches.
Reusing a Layout
Several categories can use the same layout.
For example, multiple clothing categories can share a layout containing the gallery, purchase information, description, and size-related fields.
Create a separate layout when another category needs a substantially different structure.
Exporting a Layout
Select Export layout JSON to download the current layout configuration.
The export contains the layout structure and settings, together with metadata describing referenced additional fields and field groups.
It does not export product records or their media files.
Importing a Layout
Select Import JSON file and choose a compatible MirandaPlace layout file.
Importing replaces the structure currently displayed in the editor. Review the imported result and save the layout to persist it.
When transferring layouts between websites, check the referenced additional fields and Joomla modules on the destination website. Importing the layout into the editor does not automatically create those dependencies.
Final Check
After assigning a layout, open a product from the relevant category and confirm that:
- the expected layout is being used;
- the required fields and media appear;
- tabs and accordions contain the intended sections;
- commercial information follows the category’s effective mode;
- purchase controls work where applicable;
- the page remains readable on mobile devices.