Tabs Section
On this page:
How to Clear cache every time after making any changes
Why i can not see tabs on my product pages
Why am I experiencing delays while loading my tabs
Why are my tabs displaying vertically not horizontally
Can i change the font on my tabs
Why do i see a white space above the tabs and how can i remove it
What to do if product pages show the wrong shared tabs
How can i customize my tabs
Can i get different tabs on different pages
How to remove tabs
After making any changes to your store using the HelpCenter Tabs feature, please clear your browser’s cache. Otherwise, you may not be able to see the change. The clearing of the cache helps your store load faster and with all changes visible.
How to clear the cache on your website: Windows: press CTRL + F5. MAC: press Command + Shift + R
Your website will reload automatically, and the cache will be cleared
Check if you have activated Tabs feature. You can activate Tabs in Tabs page.
Note : To activate your Tabs, the Tabs extension needs to be turned on.
To check this, from Shopify admin go Sales channels > Online Store > Customize
If tabs do not appear on your product pages, make sure you have cleared your browser’s cache. This is something you should do every time after updating your store. On Windows, you can clear your browser’s cache by pressing
CTRL + F5. On MAC, click Command + Shift + R
If the changes were made inside the HelpCenter’s Tabs feature, clearing of the cache for 1-2 times should work. If the changes were made using Shopify (e.g. adding an H5 tag), clearing the cache might take longer and will likely require you to repeat the process.
As an alternative, you can also try a different browser to see if your tabs are visible.
Also pay attention if you are using the same heading (e.g. H5) in the Product description text and in the Tabs feature settings.
This is also expected with some custom or not as popular themes. If you have one, we recommend contacting our support, so we could fix this.
HelpCenter Tabs load using Javascript which means that it first fully loads your page, and then the tabs follow. The fact that you’re experiencing a slight delay isn’t affected by the HelpCenter Tabs feature. This is simply how your Shopify theme loads our scripts.
HelpCenter Tabs load using Javascript which means that it first fully loads your page, and then the tabs follow. The fact that you’re experiencing a slight delay isn’t affected by the HelpCenter Tabs feature. This is simply how your Shopify theme loads our scripts.
Yes, you can change the font of your tabs by following these steps: Visit Customization Add custom CSS inside HelpCenter Tabs feature and paste this code with the font that you’d like to add:
.hc-tabs-wrapper__navigation__item {font-family: 'Teko', sans-serif}
.hc-tabs-wrapper__content {font-family: 'Teko', sans-serif}
If you want to add this code directly to your current theme’s CSS file, follow these steps: Go to “Online Store”, click “Action” and then “Edit code” Find the stylesheet called style.scss.liquid and insert the following code with the code you’d like to add at the bottom of it:
.hc-tabs-wrapper__navigation__item {font-family: 'Teko', sans-serif}
.hc-tabs-wrapper__content {font-family: 'Teko', sans-serif}
Reminder: Clear your browser’s cache after making any changes to your website
The white space above the tabs sometimes appears due to HTML elements, which adds more space horizontally above the product description. To fix it, there are two options:
Find your current theme, click "Actions" and "Edit code" Enter this text in a search bar: product-template.liquid. Along with the product description, you should see this code:
<br><br>
Space will disappear once you delete it. Alter the margins in the app setting or remove a piece of code within your Shopify theme.
Please check if any of your individual products aren't assigned to multiple tags, as this might be the reason for it. If that is the case, please assign those products only to tags you want this shared tab displayed, or chose other tags. You can check this in Shared tabs section.
Tabs can be customized in the Template section, select the Tab template > Save > Customize:
Here you can change text and background colors, borders, padding, fonts, etc. You can also preview the changes you’re about to make to be sure it’s what you want. Also, you may add your custom CSS.
Yes. If you want different tab for one product page, use Specific tabs function. If you want to have different tabs for a group of product pages, follow these steps: Go to Shared Tabs > Edit > Create New Tab and name it. Select the collections/categories that you want to add this tab to. In the “Applies to” section, click on “Some products” and select the product type in the drop-down menu.
If you want to remove tabs, you should deactivate tabs in the top right corner of the dashboard menu.
How to Clear cache every time after making any changes
Why i can not see tabs on my product pages
Why am I experiencing delays while loading my tabs
Why are my tabs displaying vertically not horizontally
Can i change the font on my tabs
Why do i see a white space above the tabs and how can i remove it
What to do if product pages show the wrong shared tabs
How can i customize my tabs
Can i get different tabs on different pages
How to remove tabs
How to Clear cache every time after making any changes
After making any changes to your store using the HelpCenter Tabs feature, please clear your browser’s cache. Otherwise, you may not be able to see the change. The clearing of the cache helps your store load faster and with all changes visible.
How to clear the cache on your website: Windows: press CTRL + F5. MAC: press Command + Shift + R
Your website will reload automatically, and the cache will be cleared
Why i can not see tabs on my product pages?
Check if you have activated Tabs feature. You can activate Tabs in Tabs page.
Note : To activate your Tabs, the Tabs extension needs to be turned on.
To check this, from Shopify admin go Sales channels > Online Store > Customize
If tabs do not appear on your product pages, make sure you have cleared your browser’s cache. This is something you should do every time after updating your store. On Windows, you can clear your browser’s cache by pressing
CTRL + F5. On MAC, click Command + Shift + R
If the changes were made inside the HelpCenter’s Tabs feature, clearing of the cache for 1-2 times should work. If the changes were made using Shopify (e.g. adding an H5 tag), clearing the cache might take longer and will likely require you to repeat the process.
As an alternative, you can also try a different browser to see if your tabs are visible.
Also pay attention if you are using the same heading (e.g. H5) in the Product description text and in the Tabs feature settings.
This is also expected with some custom or not as popular themes. If you have one, we recommend contacting our support, so we could fix this.
Why am I experiencing delays while loading my tabs?
HelpCenter Tabs load using Javascript which means that it first fully loads your page, and then the tabs follow. The fact that you’re experiencing a slight delay isn’t affected by the HelpCenter Tabs feature. This is simply how your Shopify theme loads our scripts.
Why are my tabs displaying vertically, not horizontally?
HelpCenter Tabs load using Javascript which means that it first fully loads your page, and then the tabs follow. The fact that you’re experiencing a slight delay isn’t affected by the HelpCenter Tabs feature. This is simply how your Shopify theme loads our scripts.
Can I change the font on my tabs?
Yes, you can change the font of your tabs by following these steps: Visit Customization Add custom CSS inside HelpCenter Tabs feature and paste this code with the font that you’d like to add:
.hc-tabs-wrapper__navigation__item {font-family: 'Teko', sans-serif}
.hc-tabs-wrapper__content {font-family: 'Teko', sans-serif}
If you want to add this code directly to your current theme’s CSS file, follow these steps: Go to “Online Store”, click “Action” and then “Edit code” Find the stylesheet called style.scss.liquid and insert the following code with the code you’d like to add at the bottom of it:
.hc-tabs-wrapper__navigation__item {font-family: 'Teko', sans-serif}
.hc-tabs-wrapper__content {font-family: 'Teko', sans-serif}
Reminder: Clear your browser’s cache after making any changes to your website
Why do I see a white space above the tabs, and how can I remove it?
The white space above the tabs sometimes appears due to HTML elements, which adds more space horizontally above the product description. To fix it, there are two options:
Find your current theme, click "Actions" and "Edit code" Enter this text in a search bar: product-template.liquid. Along with the product description, you should see this code:
<br><br>
Space will disappear once you delete it. Alter the margins in the app setting or remove a piece of code within your Shopify theme.
What to do if product pages show the wrong shared tabs?
Please check if any of your individual products aren't assigned to multiple tags, as this might be the reason for it. If that is the case, please assign those products only to tags you want this shared tab displayed, or chose other tags. You can check this in Shared tabs section.
How can I customize my tabs?
Tabs can be customized in the Template section, select the Tab template > Save > Customize:
Here you can change text and background colors, borders, padding, fonts, etc. You can also preview the changes you’re about to make to be sure it’s what you want. Also, you may add your custom CSS.
Can i get different tabs on different pages
Yes. If you want different tab for one product page, use Specific tabs function. If you want to have different tabs for a group of product pages, follow these steps: Go to Shared Tabs > Edit > Create New Tab and name it. Select the collections/categories that you want to add this tab to. In the “Applies to” section, click on “Some products” and select the product type in the drop-down menu.
How to remove tabs
If you want to remove tabs, you should deactivate tabs in the top right corner of the dashboard menu.
Updated on: 18/06/2024
Thank you!