This article explains how you can change a product fields using Tabs to a collapsable pane container display.

  • Login as admin in the storefront
  • Navigate to the bottom of the page and locate View Details using debug configuration mode

debug-config-fe

  • From the admin panel, navigate to jApps >> Design >> Views
  • Search for the view detail of the page from step 1 (product_page_item)

product-page-views-fe

  • Click "Elements" under Elements column
  • Locate "Description" and "Fields" or any fields you want to change
  • Edit "Description / Fields" element and set the "Type" to Collapsable Pane Container
  • Click [Save] once you are done

field-collapsable-be

These are the lists of element type you can use:

  1. Tab container
  2. Pane Container
  3. Collapsable Pane Container
  4. WidgetBox
  5. Create Column
  6. Create Row
  7. Div Container

Product page using Tab Container looks like this:

tab-product-page-fe

Product page using Collapsable Pane Container looks like this;

collapsable-front-fe