The Product Tabs from Journal > Product Extras > Product Tabs are special position containers for the product page which work like the Extra Modules but without the page builder interface so content can be added directly in the modules, thereby bypassing the need to first create separate Blocks modules and then assigning them to the product page via Extra Modules.
The Product Tabs modules are the recommended way of creating default product tabs with pre-defined product page content such as (Description, Specifications, Reviews).
Each module is an actual tab so multiple modules with different content need to be created, one for each purpose. All modules added in the same position will be grouped together and displayed as blocks, tabs or accordion. See example
The Position option dictates where the group of modules will be rendered. All modules added in the same position will form a group and each will become a block, tab or accordion item.
Choose initial position for all devices: See example
Optionally choose a different position for a different device type See example
Product Tabs modules can be displayed as:
- Blocks (all visible one under the other),
- Accordion (mostly suitable for mobile display)
Device Display - Each module can selectively be displayed as either Blocks, Tabs or Accordion per device. The initial display is chosen for All devices meaning the same look will show up on all devices See example unless specified otherwise in a particular device tab See example
Custom modules for different products
In order to add custom extra modules which only appear on certain products you need to work with the Product Assignment and Product Rules options inside the module See example
See Product Assignment for more info on how this concept works. You can assign modules to all products, individual products or a custom set of products matching a certain criteria or rules.
Tabs and Accordion styles for the group is assigned in the product page style in Journal > Styles > Product Page > Edit Style > Product Tabs. There is an additional layer of container styles (background, margin, padding, etc.) as well which are applied on the entire group container.