Product Detail Panes

Owned by kristine.zvaigzne (Unlicensed)
Last updated: Apr 03, 2020
2 min read

With product detail panes you can pack additional product information into a tabbed interface. You can choose to display the product details in product pages and configurator pages.


Example product detail panes

These are example product detail panes. Actual font-sizes, colors and box widths may vary and may be influenced by the website's styling.

Managing content of product detail panes

You add content to detail panes on the product edit screen in section 'Product Detail Panes'.

 

→ And this is how it will look like in Frontend

 

You can enter heading, an optional icon, CSS classes and HTML content (CSS classes enable web designers to set specific styling for headings and pane contents).


Control where to show product detail panes:

You can show product detail panes on product detail pages and on configurator pages. On your product edit screen you find the settings for this in the sections Display in Product Detail Page and Display in Configurator.

Customization of product details location

To change the area where product details are displayed, create/edit your custom product or configurator page template and add/move this snippet:

<?php if ($this->showProductDetailPanes) { ?> <div class="product-detail-panes-wrapper"><?php echo $this->productDetailPanes; ?></div> <?php } ?>