Tabber Help

Installing

Tab styles

Customising

Shortcodes

Icons

Installing the Tabber app

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. 

Choose a default tab style

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.

Customising the default tab style

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.

Dark backgrounds

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.

Preview

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.

Using 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:

  • name="tabname" - the optional tab name or label
  • color="color" - optional color for the tab name (if any). Any   valid CSS color may be used here e.g. red, #f00, rgba(255,0,0,1), hsla(0,100%,100%,1) etc. 
  • icon="iconname" - the name of an optional icon placed before the tab name (if any)
  • iconafter="iconname" - the name of an optional icon placed after the tab name (if any)
  • iconcolor="color" - optional color for the icon(s). Any  valid CSS color may be used here e.g. red, #f00, rgba(255,0,0,1), hsla(0,100%,100%,1) etc.

    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.

    Using Icons

    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.