ThemeKit eCommerce

ThemeKit eCom Jumbotron

Jumbotron

The Jumbotron can be used as a header although its main role is to draw attention to a "must see" item or a special offer.
It can have a solid color, two color gradient or image background.
The front image is optional and when it is prent the relative column widths is adjustable

Acoustic Guitars
Tel: 012 345 6789
ThemeKit eCOm Article

eCom Article

The article has an image with alt text and a text area with a heading text and an optional internal/external link.
The article can be extended by adding the ThemeKit eCom Action Bar which has options to open a slide down drawer, a content modal. a list modal and a link.

Info

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.

Info

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
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.