Custom product information tabs

You can display an unlimited amount of information tabs on your product pages. A tab below the “Add to cart” button will be displayed and you can add any content into the panel.

1. To get started, create a new page by visiting backoffice > content > pages. In this page, you’ll add the custom product information tab content. You can add any content you want and you can keep the visibility off (hidden) if you don’t want the pages to be displayed in the footer links or menus.

   If you want to use the same example as in the demo, copy the following code and paste it into the code editor of your page.

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   <table style="border-collapse: collapse; width: 100%;" border="1">
   <thead>
   <tr>
   <td style="width: 25%;">Size</td>
   <td style="width: 25%;">Neck</td>
   <td style="width: 25%;">Chest</td>
   <td style="width: 25.2632%;">Arm length</td>
   </tr>
   </thead>
   <tbody>
   <tr style="height: 18px;">
   <td style="width: 25%; height: 18px;">XS</td>
   <td style="width: 25%; height: 18px;">13.8-14.6"</td>
   <td style="width: 25%; height: 18px;">31.1-33.1"</td>
   <td style="width: 25.2632%; height: 18px;">31.1-32.3"</td>
   </tr>
   <tr style="height: 18px;">
   <td style="width: 25%; height: 18px;">S</td>
   <td style="width: 25%; height: 18px;">14.6-15.0"</td>
   <td style="width: 25%; height: 18px;">33.1-35.0"</td>
   <td style="width: 25.2632%; height: 18px;">32.3-33.1"</td>
   </tr>
   <tr style="height: 18px;">
   <td style="width: 25%; height: 18px;">M</td>
   <td style="width: 25%; height: 18px;">15.0-15.4"</td>
   <td style="width: 25%; height: 18px;">35.0-37.4"</td>
   <td style="width: 25.2632%; height: 18px;">L33.1-34.3"</td>
   </tr>
   <tr style="height: 18px;">
   <td style="width: 25%; height: 18px;">L</td>
   <td style="width: 25%; height: 18px;">16.1-16.5"</td>
   <td style="width: 25%; height: 18px;">37.8-39.8"</td>
   <td style="width: 25.2632%; height: 18px;">34.3-35.0"</td>
   </tr>
   <tr style="height: 18px;">
   <td style="width: 25%; height: 18px;">XL</td>
   <td style="width: 25%; height: 18px;">16.9-17.7"</td>
   <td style="width: 25%; height: 18px;">39.8-42.1"</td>
   <td style="width: 25.2632%; height: 18px;">35.0-36.6"</td>
   </tr>
   </tbody>
   </table>
   <p class="hint-text" style="font-size: 14px;">* Consectetur adipiscing elit, sed do eiusmod tempor</p>

2. Once done, note the page URLs (the last part, as highlighted in the image below) you wish to include as tabs for products in your store. For example: “shipping”.

   

   You can add additional specific tabs on specific products.

   • Site wide

     You can display extra information tabs site wide, on all products, by adding a comma separated list of the content page URLs you want to display under section “9.1 Product page – Extra information tabs”. For example: “size-guide, shipping-and-returns, warranty”.

   • On specific products

     You can display additional product-specific information tabs on some products. Simply add a comma separated list of the content page URLs you want to display under the “Data 2” field of the product editor. For example: “size-guide, shipping-and-returns, warranty”.