Install tabber from your Online Shop Control Panel, Apps page. This link adds a "Tabber" page to Settings > Design where you can now set your default tab theme and customise it with colors and other options .
Users who have requested a lifetime license will be sent installation instructions. Lifetime Tabber is installed in a slightly different way and default tab settings are managed using a unique web page instead of in the Ecwid control panel.
If you are interested in a lifetime license because you use Wix, or prefer not to pay a subscription please contact me. I currently charge £50 GBP (or $65 USD or €60 EUR if you prefer) for a lifetime license, payable after a 14 day evaluation period.
Click "Show Themes" to see the tab themes available and click on one to select it.
Or, just select the style by name using the dropdown.
Note. Some tab themes have an outline. The outline color will be the same as the "active icon color" regardless of whether you use icons or not.
You can change text, icon and background colors by either clicking on the appropriate swatch, or the element within the tabs preview. Now use the color picker to adjust the color. Colors may be made semi transparent by using the slider under the color picker.
Tab text and icons can be sized between 25% and 300% of their default size.
The active tab may have different colours.
Tab text and icons may be aligned left, center or right, and you may have the icon(s) on the same line as the text, or a different line.
Text and icons that are too wide to fit in the tab space will be wrapped onto multiple lines.
If your storefront has a dark background, use the page background swatch to set a background color to match your store. This background color is not part of the tab style which will always be applied over the background used on each product page. You can use the "reset to default colors" dark button to set default colors suitable for dark backgrounds.
Save your changes
Remember to save your changes to make them apply to the storefront. The "reload" button will discard any changes since the last save.
The preview area shows five simple tabs by default. It uses the content and shortcodes shown in the box at the bottom right.
You may edit the shortcodes if you like to change the preview. This is a great way to experiment with shortcodes before using them in product descriptions. Keep the tab content between shortcodes simple for the previews. This area is a simple text area and does not support formatting like the product description editor does. However, if you know html, you can use some simple html tags in the tab content between shortcodes.
Use "shortcodes" to add tabs to your product descriptions. Simply add [tab name="tab name"] to start a new tab with the label "tab name". The tab content will continue to the end of the product description or the next tab shortcode.
Note. you cannot preview the tabs in the description editor. Look at the product in your customer facing storefront to see the tabs.
If you need normal content after the tabs, use the [endtab] short code to indicate the end of all the tabs.
The tab shortcode has some options but you must always specify either name or icon . Here are all the options that are available:
Do not apply any formatting to the shortcodes within your product descriptions, as this may cause errors. You may apply any formatting you like to the main tab content between the shortcodes.
If your tab name has a double quote (") either escape it with a backslash (\") or use single quotes around the tab name e.g. name='tabname'. You can escape single or double quotes.
Icons can be specified for your default tab style and the same icon will apply to every tab. Use the "icon=" or "iconafter=" shortcode option to specify a different icon on a specific tab in your product description.
Icons may be selected using the icon picker, or by simply entering the name. You can look up the names of icons on the Font Awesome website.
If you want a default icon, it can be before or after the tab name, and on a new line or the same line as the tab name. The default icon will show on every tab unless you override it with a shortcode option in your product description.
To use a specific icon on any tab, you use the icon and/or iconafter option on the tab shortcode in your product description e.g. [tab name="info" iconafter="info"] will place an info icon after the tab name. You can also change the icon color with the iconcolor option e.g. iconcolor="red"
The icon names are from Font Awesome where you will find many useful icons. The name does not have to include the "fa-" prefix that all font awesome icons have.
Even if you specify "none" for icons in your default theme, the newline, size and color icon settings will be used as defaults for any icon you specify using a shortcode.
The tabs normally are positioned within the product description where you placed the tab shortcodes.
However, since late 2017, early 2018, new Ecwid stores* have been using a new product details layout that allows some control over the layout by using the Ecwid API.
By default, the product description (including any tabs) appear in the sidebar. This may not be ideal if you are using Tabs, and you may prefer the description and tabs to be placed under the main product image.
The new option "Tabs location" lets you specify where the tabs should appear in the storefront. Note. this option will only work on stores using the new product details page layout.
There are four options:
*If your storefront is using the original Ecwid product details layout, these settings will have no effect. Newer Ecwid accounts use the new layout. Older accounts can enable the new layout by using the customize appearance options in the Ecwid API.
It is expected that Ecwid will soon make the new product details layout available for all older accounts as an option in the Control Panel (Settings > What's New?), with more layout controls in the design settings section.