Customizing Hyvä Frontend: How to Redesign Product Information into Tabs

When potential customers visit a product page, they usually seek detailed information about the item or service. The way the details look and are organized sometimes can significantly impact their decision-making process. Well-organized pages can drive sales, while cluttered and disorganized — confuse and distract visitors.
The default Magento product-sections.phtml template uses a card layout for displaying the product details. Each product section is presented as a separate card, arranged in grid columns:

Customizing Hyvä Frontend: card layout for displaying the product details

Generally, this layout is perfect for simple products with a few key features, making the information more accessible.

However, if you have an extensive product organized into multiple cards (Description, Reviews, Specifications, Shipping, etc.), it may clutter the overall design and make the navigation more complicated. In this case, we recommend customizing Hyvä frontend and redesigning cards into tabs for more convenience and clear structure.

In this tutorial, we will showcase how to transform the product page details cards into tabs, providing detailed steps and code snippets for easy implementation.

How to Redesign Product Detail Page Section Cards into Tabs

To redesign product detail page section cards into tabs, you need to create a template in a custom theme:

app/design/frontend/Plumrocket/CustomTheme/Magento_Catalog/templates/product/view/sections/product-sections.phtml

<?php


declare(strict_types=1);


/** @var Details $block */
/** @var Escaper $escaper */


use Magento\Catalog\Block\Product\View\Details;
use Magento\Framework\Escaper;


$titleRenderer = $block->getChildBlock('product.section.title.renderer');
$defaultTitleTemplate = $titleRenderer->getTemplate();
$tabIndex = 0;


?>
<div x-data="{ activeTab: 0 }" class="grid">
   <!-- Tabs Navigation -->
   <ul class="flex border-b">
       <?php
       foreach ($block->getGroupSortedChildNames('detailed_info', '') as $sectionName) {
           $sectionBlock  = $block->getLayout()->getBlock($sectionName);
           $sectionHtml   = (string) $sectionBlock->toHtml();
           $sectionTitle  = $sectionBlock->getTitle();
           $titleTemplate = $sectionBlock->getData('title_template') ?? $defaultTitleTemplate;


           if (empty(trim($sectionHtml))) {
               continue;
           }
           ?>
           <li :class="{'bg-indigo-100': activeTab === <?= $tabIndex ?>}"
               @click="activeTab = <?= $tabIndex ?>;"
               class="inline-block py-2 px-4 cursor-pointer">
               <?= /** @noEscape */ $titleRenderer->setTemplate($titleTemplate)
                   ->assign('sectionBlock', $sectionBlock)
                   ->toHtml()
               ?>
           </li>
           <?php $tabIndex++; } ?>
   </ul>


   <!-- Tabs Content -->
   <?php $tabIndex = 0; ?>
   <?php foreach ($block->getGroupSortedChildNames('detailed_info', '') as $sectionName) {
       $sectionBlock  = $block->getLayout()->getBlock($sectionName);
       $sectionHtml   = (string) $sectionBlock->toHtml();
       if (empty(trim($sectionHtml))) {
           continue;
       }
       ?>
       <div x-show="activeTab === <?= $tabIndex ?>" class="w-full py-4">
           <div class="card">
               <?= /** @noEscape */ $sectionHtml ?>
           </div>
       </div>
       <?php $tabIndex++; } ?>
</div>

The result of executing this code:

Dynamic tab management: Sections are now displayed as tabs, where navigation between them is done by clicking. Tabs are implemented using x-data and x-show from the Alpine.js library. Each tab changes the active index via the activeTab variable, which corresponds to the active tab.
Tab styling: Added styles for tabs to highlight the active tab (for example, the class bg-indigo-100 for the active tab).

Applying this template will transform PDP Section Cards into the following design:

Customizing Hyvä Frontend: Redesign Product Detail Page Section Cards into Tabs

How to Add Custom Tabs to the Product Detail Page in Hyvä Frontend

To enrich a page with more details on the product (e.g., shipping information, reviews, etc), we have to create and add a custom tab. You can accomplish this by following the guide below, we begin with building the “Delivery Information” tab.

1) Create an XML file:

app/design/frontend/Plumrocket/CustomTheme/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>


<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.details">
           <block name="delivery.tab"
                  template="Magento_Catalog::product/view/sections/delivery-section.phtml"
                  group="detailed_info">
               <arguments>
                   <argument name="title" xsi:type="string" translate="true">Delivery Information</argument>
                   <argument name="sort_order" xsi:type="number">10</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

This block adds a new section in the form of a tab that will contain the shipping information. The template for this block (delivery-section.phtml) defines how this information will be displayed.

2) Create a template for a new “Delivery Information” tab:

app/design/frontend/Plumrocket/CustomTheme/Magento_Catalog/templates/product/view/sections/delivery-section.phtml

<?php
declare(strict_types=1);
$cssClasses = $block->getData('css_classes') ?? 'prose';
?>


<div class="<?= $escaper->escapeHtmlAttr($cssClasses) ?>">
   <p>We offer fast and reliable shipping worldwide. Below is the detailed information about our shipping methods and estimated delivery times:</p>


   <h3>1. Standard Shipping</h3>
   <p>
       Delivery Time: 5-7 business days<br>
       Cost: Free for orders over $50<br>
       Carriers: UPS, FedEx, and others.
   </p>


   <h3>2. Express Shipping</h3>
   <p>
       Delivery Time: 1-3 business days<br>
       Cost: $15 for all orders<br>
       Carriers: DHL, UPS Express.
   </p>


   <h3>3. International Shipping</h3>
   <p>
       Delivery Time: 7-14 business days depending on the destination<br>
       Cost: Varies by country (starting at $20).
   </p>


   <h3>4. Order Tracking</h3>
   <p>
       Every order is assigned a unique tracking number. After completing your purchase, you will receive an email with the tracking number and a link to the courier's website for tracking your shipment.
   </p>


   <h3>5. Additional Terms</h3>
   <p>
       - Orders are processed within 24 hours of purchase.<br>
       - Delivery may be delayed during holidays or due to customs inspections.<br>
       - We are not responsible for additional customs fees that may be charged in the destination country.
   </p>


   <p>If you have any questions regarding shipping, please feel free to contact our support team.</p>
</div>

We have set static information. However, you can integrate information that can change depending on the settings or product data. Here is how it will look on Hyvä Frontend:

How to Move Reviews into the Tab Section in Hyvä Frontend

Integrating reviews into the tab section requires a bit different approach. Let’s start by creating a layout.

1) Creating an XML file:

The file: app/design/frontend/Plumrocket/CustomTheme/Magento_Review/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.details">
           <block class="Magento\Review\Block\Product\View"
                  name="review.tab"
                  template="Magento_Review::product/view/review_wrapper.phtml"
                  ifconfig="catalog/review/active"
                  group="detailed_info">
               <arguments>
                   <argument name="title" xsi:type="string" translate="true">Customer Reviews</argument>
                   <argument name="sort_order" xsi:type="number">30</argument>
               </arguments>
           </block>
       </referenceBlock>


       <move element="review_list" destination="review.tab" />
       <move element="product.review.form" destination="review.tab" />
   </body>
</page>

Here is the explanation of tags used in the code snippet:

Creating a new tab block:

product.info.details – a container that is responsible for displaying tabs on the product page.
name="review.tab" – a unique name for the block.
template="Magento_Review::product/view/review_wrapper.phtml" – path to template.
group="detailed_info” – ensures that the new tab is included in the existing tab structure without modifying core templates.
ifconfig="catalog/review/active" – display the block only if reviews are enabled in the configuration.

Tab configuration:

title – the tab title that will be displayed to the user.
sort_order – the order of tab display (smaller values are displayed first).

Moving existing blocks:

move element="review_list" – moves the standard review list block to our tab.
move element="product.review.form" – moves the standard feedback form block to the tab.

2) Defining a Wrapper .phtml Template for Reviews

The file: src/app/design/frontend/Plumrocket/CustomTheme/Magento_Review/templates/product/view/review_wrapper.phtml

<?php
/**
* Template for displaying reviews in a tab
*/
?>
<div class="product-reviews-container">
   <div class="product-reviews-list">
       <?= $block->getChildHtml('review_list') ?>
   </div>
  
   <div class="product-review-form">
       <?= $block->getChildHtml('review_form') ?>
   </div>
</div>

Here is the explanation of tags used in the code snippet:

$block->getChildHtml('review_list') – displays the contents of the review_list block that we moved to our tab.
$block->getChildHtml('product.review.form') – displays the contents of the product.review.form block that we moved to our tab.

Customizing Hyva Frontend: Defining a Wrapper .phtml Template for Reviews

Ready to Enhance Your Product Pages with Hyvä Frontend?

Transform your product pages with a clean, modern design using Hyvä Frontend. Our experts can help you improve user experience and boost conversions.

Get Started with Hyvä Frontend Development