ThemeKit eCommerce

Tel: 012 345 6789

Product Display [2]

ThemeKit eCommerce Article iBox

Artcle + Lightbox Image

The lightbox image is optional and is inserted in two sizes. The lightbox can be viewed on the EverWeb design canvas for editing.
Icon
The default icon can be changed to any of 100s available in SVG icon download folder. It can be align left, center or right and top, center or bottom.

More Info …
ThemeKit eCommerce Article & Image Lightbox
Lightbox image inserted in two sizes
ThemeKit eCommerce Article iBox

eCom iBox

In this example the layout is switched and the spyglass icon switched to an "add" icon with the padding reduced to show the background as a border.
The close tab has been ommitted since the modal can be closed by clicking/tapping it anywhere.

EverWeb ThemeKit Add To Cart
ThemeKit eCommerce Article & Image Lightbox
Image Sizes 960 x 480px & 600 x 375px

Product Images

eCom Drawer

The drawer animation works in conjunciton with the eCom Action Bar widget by inserting the same ID number in the drawer and the article's Drawer ID field.
Content
This content section can be full width or the layout can be switched to two columns with a list in the second column.

TEST

    List

  • Add up to 48 list items
  • List style types are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha
  • Ajsuts list item inset
  • Adlust list item font size and line height
  • Adjust list item spacing

Action Toolbar

The ThemeKit eCom Action Bar is used to add extra functions to the item inserted above it. In this case it is inserted below an eCom Article widget to provide a slide down drawer with info and a list, a modal with an optional image and text, a modal with a heading, text and a list and an add to cart link.

  • The icon in the drawer action tab switches from a chevron down to a close icon
  • The modal action tab has an "open" icon
  • The list modal action tab has a list icon
  • The fourth tab by default has a cart icon
  • The cart tab can open an internal or external page
  • The cart icon can be changed to any other icon in the SVG download folder.
  • The action tabs show an info span on hover
  • The spans will show on tap on mobile devices
  • An open span will close when the device's screen is tapped anywhere off the tab

Styles

The bar can have a solid background or a two color gradient. The tabs can be square with a border radius or made round by checking a box.

ThemeKit eCom Modal

Content Modal

The optional image fills the modal's width and has an alt text attribute for entering keywords for the search engines. There is an option to add a smaller mobile image. This option should be used if the main image file is wider than 720px.
Scroll
When the height of the modal excedes the viewing devices viewport height any overflow will scroll into view.
Close
The close tab is optional and isn't really necessary sinxe clicking/tapping anywhere will close the modal.
Styles
The container has controls for the border width and color and to turn on the box shadow box.
There are controls for the box shadow color and the overlay background color and its opacity.

List Modal

The list modal is opened from the ThemeKit eCom Action Bar. It can be used to display an item's specifications or a list of instructions for its use.
The modal has a heading, text block and a styled list.

  • The list can be in view for editing on the EverWeb design canvas by using the editing height control
  • The list can have up to 48 items
  • When the list exceeds the viewing device's viewport height any overflow will scroll into view
  • The list style types available are disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha
  • There are controls for list font size, list item inset, list item line height and for the list item vertical spacing
  • The container has options to add a border and/or a box shadow
  • The modal overlay has controls for the background color and its opacity