Troubleshooting tabs not displaying on your product pages
Updated on December 25, 2022
Even though we support a wide variety of themes out of the box, there are still some situations where some manual work will need to be done in order to have the tabs displaying properly. Two common causes of non-displaying tabs are:
- Missing product descriptions on one of more of your products - products with missing descriptions can oftentimes not find the section of the page where to display the tabs
- Theme is not supported currently
Please note: this guide will start from the very beginning of the Tabs+ setup, to ensure that all steps have been properly followed.
Initial setup
- Enable the theme extension in the Shopify theme editor
- Make sure the Tabs+ toggle is to the right
- Press save when finished
Add tab(s) to your products
- Quickly read over the instructions for Tabs+
- Give your tab a custom title
- Give your tab some content - using the rich-text editor you can add tables and charts and HTML formatting to your tab
- Publish your changes to make them visible on your storefront (hopefully)
Verify that tabs are displaying
- Is your custom tab displaying on the product page of your recently updated product?
- If not, then Tabs+ is having trouble guessing where to put your content. To figure out if this is the case, you can confirm in a number of ways, depending on your current web browser:
- Chrome: Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux)
- Firefox: Cmd + Shift + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
- Safari: Option + ⌘ + C
- Microsoft Edge: Command + Option + J (on macOS), or Shift + CTRL + J (on Windows/Linux)
How to fix your theme
- Go back to the Tabs+ app extension settings
- Scroll down to the field “Description CSS selector” and enter
.tabsplus-container - Press the publish button to make sure your settings are saved
- Go to the appropriate section below depending on your configuration:
If you have an online store 2.0 theme (supporting app blocks)
- Go to the product page template in the theme editor
- Click on add new block somewhere below the description field
- Select custom liquid so you can enter some code
- Move the custom liquid block to where you want your description and tabs to be (also hide/remove the original “description” if needed)
- Enter the custom content
<div class="tabsplus-container"></div>which will be what is used to find your new block - Press save
If you have a legacy online store theme (not supporting app blocks)
Coming soon - contact support@alumworks.co if you need more help!
Still need help?
Send us an email and we'll get back to you as soon as we can.