A two column grid with adjustable column widths and layout switch.
The item is set up on ECWID as a single item.
The widget requires the ECWID store ID and the item ID.
The image used on ECWID is not used and the image is inserted in EverWeb in the widget settings with alt text.
An eCommerce product page needs to have all the salient information but remove as much as possible from view on page load to reduce the amount of scrolling for mobile device users.
The tabs container is a spacing saving item that can be inserted below a product sales card to provide a description, features, specifications etc.
The first item shows by default and more are selected as required..
Items 1 through 3 have a heading and text block with styled spans for sub headings.
The last item has a heading, text and a styled list for specifications.
Panels
The first panel is visible on the EverWeb design canvas and has a control to set the editing height. This height is removed prior to publishing by checking a box.
Styles
The panel has its own controls for font color and background color and can have a border if required.
Any tab can be open on page load by selecting its number. All tabs can be closed on page load by setting the open tab number to zero.
Tabs
The tabs have a grid layout which has a minimum width control for the tabs.
The tabs have controls for the background color, active tab background color and the hover background color.
The on load/hover state has a transforn animation for asmooth action.
The tabs are inline on computers and tablets. On mobile phones the tabs display as block and stack vertically.
Animation
For a better user experience the panels have the option to have a slide down animation with a control for animation duration set in milliseconds.
The tab content for items one through three have options for aimage with alt text and an internal/external link.
Editing
Unlike most widgets of this type there is a checkbox to show all the panels while editing on the EverWeb design canvas.
Some descriptive text before the spec list …
This is an optional paragraph below the list for extra info ora disclaimer about change in specifications.
The ThemeKit Ecwid Tabs widget has the option for one to three content tabs and a list for specifications etc.
Any tab can be selected to open on page load or the content can be closed by setting the "Open on Load Tab" to zero.
Editing
All the content items can be open for editing by checking a box and setting a suitable editing height.
Links
Links are optional in the first three tabs. They can open a internal or external page and have a new window option.
Extra Functions
The image lazy load function and the content animation are optional. The animation has adjustable initial scale and animation time set in milliseconds.
When a visitor views an item and it is not quite what they want it is usefull to show some alternative items that they might want to consider.
The ThemeKit Ecwid Ad Bar has a heading with optional scroll left/right icons and a row of images links. The number of images to show is set in the widget settings and the rest will scroll into view by vertical scrolling on the mouse or trackpad and swiping on mobile devices.
Images
The image files only need to be about 100px wide or so. The image width can be set in the widget settings and the lazy loading function should be turned on before hiding the scroller.
Extras
The images can show a caption and also the optional link icon. Captions and icons can showw on hover on computers.
Styles
The images can be separated and have controls for border width and color. The container background has an opacity slider so that the page content can be seen to some extent behind the scroller.
The Ad Bar is invisible on page load and appears on scroll after the scroll down distance set in the widget settings and fades out on scroll up.
With no visitor interaction the Ad Bar will remian in view for the number of seconds set by the Display Time control.
On computers the Ad Bar will show as long as the cursor is over it. On touch devices a little vertical scrolling will make it appear.
