Product Detail Page Section Cards
The Hyvä default theme Product Detail Page (PDP) uses sections in place of the Luma “additional information” tabs. Sections are rendered as cards.
Layout XML that renders a new tab in Luma, will add a new section in Hyvä.
Adding a section card
In a catalog_product_view.xml
layout file, add the XML
<referenceBlock name="product.info.details">
<block name="my.section"
template="Magento_Catalog::product/view/my-section.phtml"
group="detailed_info">
<arguments>
<argument name="title" xsi:type="string" translate="true">More Information</argument>
<argument name="sort_order" xsi:type="number">-10</argument>
</arguments>
</block>
</referenceBlock>
The group="detailed_info"
attribute on the block is required. Blocks without it are not automatically rendered as sections (just like tabs in Luma).
The title
and the sort_order
arguments to the block are optional.
Sections are sorted in ascending order.
Customizing the title rendering
By default the section title is rendered using the template
Magento_Catalog::product/view/sections/default-section-title.phtml
.
A custom title template can be specified by adding a title_template
block argument: