How to use tabs widget in Magento 2?

In Magento 2, the tabs widget is used to organize and display various types of information in a tabbed format on your store’s product pages. This feature allows you to present diverse content about each of your products in a way that’s clearly structured and easy for your online shoppers to navigate.

By organizing product information into tabs, you can enhance your ecommerce store’s user experience. Customers can use tabs to easily navigate between different sections of your online store without having to scroll through lengthy product descriptions, making it easier for them to find the products they’re looking for.

In this guide, we’re going to show you how to set up the tabs widget in your Magento store and how to use it to its fullest potential.

How Do You Use The Tabs Widget In Magento 2?

Let’s break down the Magento 2 tabs widget step-by-step:

1. Log in to your Magento 2 admin panel.

2. In the admin panel, go to Content > Elements > Widgets.

3. Click on the "Add Widget" button to create a new widget.

4. Select "Catalog New Product Tabs" as the widget type. This type is specifically designed for displaying product information in tabs.

5. Fill in the required fields, including Widget Title, Store Views, Layout Updates, and Sort Order.

  • Widget Title: Provide a title for your widget.
  • Store Views: Select the store views where you want the widget to be visible.
  • Layout Updates: Define where the widget will be displayed by selecting a container and specifying the conditions.
  • Sort Order: Set the order in which the widget should appear if there are multiple widgets on the same page.

6. Scroll down to the "Widget Options" section, where you can configure individual tabs. These tabs will display different types of information about your products.

  • General: Configure the general settings of the tab, including Title, Sort Order, and Tab Content.
  • Products: Specify the products that should be associated with this tab.
  • Content: Add HTML content or use the WYSIWYG editor to create rich content for the tab.
  • Design: Customize the design and appearance of the tab.

7. Click on the "Save and Continue Edit" button to save your widget configuration. Then, click on the "Save" button to apply the changes.

8. To ensure that your changes take effect, clear the Magento cache by navigating to System > Cache Management and clicking on the "Flush Magento Cache" button.

9. Visit your product pages on the front end to see the tabs in action. Verify that the information is displayed correctly and that the tabs enhance the user experience as desired.

Help Your Customers Find What They Need with Product Tabs

By following these steps, you can use the tabs widget in Magento 2 to conveniently showcase varied product information while keeping the user experience as smooth as possible. If you want to enhance your store’s product experience even further, check out our Product Tabs plugin for Magento 2. With the Amasty Product Tab plugin, you can further tailor the default Magento 2 tabs to your ecommerce business’s specific needs.

How can we help you?

Didn’t you find the answer to your question? We are always happy to help you out.