Product Detail Page Section Cards

Hyvä's Product Detail Page (PDP) replaces Luma's "additional information" tabs with sections, which are rendered as cards. Layout XML that previously added a tab in Luma will now create a section in Hyvä.

Adding a Section Card

To add a new section card, include the following XML in your catalog_product_view.xml layout file:

<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 is mandatory. Blocks without it will not render as sections (similar to Luma tabs).

The title and sort_order arguments are optional. Sections are sorted in ascending order.

Customizing the Title Rendering

By default, section titles are rendered using the template Magento_Catalog::product/view/sections/default-section-title.phtml.

To specify a custom title template, add a title_template block argument:

<block name="description"
       template="Magento_Catalog::product/view/sections/description.phtml"
       group="detailed_info">
    <arguments>
        <argument name="title_template" xsi:type="string">Magento_Catalog::product/view/sections/description-section-title.phtml</argument>
    </arguments>
</block>