An eCommerce website needs to keep the onload content for a product to a minimum to help the visitor focus on the basic info about the item. All the other details such as more images, video, specifications, features etc should be offscreen and easily accesible.
The slide over panels opened using the action tabs bar below offer one solution.
Other options are a slide down info drawer and modals.
The ThemeKit Ecwid Slide Tabs can open a content panel, an image grid, a card grid, an MP4 video, a YouTube video and an internal/external link.
The tabs are added to the bar by selecting the various types using checkboxes. The first three tabs can be used for content, image grid and cards.
Tabs four and five are used for MP4 video and YouTube video respectively. Tab six opens a slideshow.
The last tab can be configured as an internal or external link.
The tabs can be spaced out by increasing the maximum width setting and can be made round by dragging the border radius slider to the right.
Each is assigned an ID which must be the same as the ID assigned to the corresponding slide panel.
Tooltips
When viewed on computers the tabs show a tooltip on hover to indicate their purpose. Tooltips have their own control for font size, color, background and border radius.
The panels can slide in left, down, right or up. They are closed by clicking the overlay or the optional close tab.
Position
Since the panels have a fixed position they can be inserted out of the way below the footer or footer bar widget on the EverWeb design canvas.
Editing
The panels have a control to set a convenient height for editing the content. This should then be reduced somewhat - to about 200px or less - before checking the box to hide the content.
Styles
The overlay background color and its opacity can be adjusted.
The close tab has controls for icon color and for its background color and opacity.
Each item has an image with alt text, a heading, optiom for a styled span for price/date etc, text and a full width link.
The items can be styled with a border with radius control and/or by adding a bottom box shadow
The video has a poster image and loads two sizes of video file for computer and mobile devices. To prevent it from compromisong the page download time the video is lazy loaded when the slide panel opens rather than on page load.
The video stage has a maximum width setting and can be styled with a border and/or a bottom box shadow.
The YouTube slide panel is similar to the MP4 video in terms of operation and styling the video stage.
The YouTube video is inserted by entering its YouTube ID. To make it suitable for displaying on mobile devices the YouTube iframe is lazy loaded.
The slide over slider lazy loads a full size and a mobile image with alt text and a caption. There is an option to add a portrait image for mobile phones to give a better visitor experiemce.
There is a control for hiding the previous/next tabs on mobile devices and a control for selecting the breakpoint at which this happens.