ThemeKit eCommerce [2]

  • ThemeKit eCom Cart Slider 1

    Slides

    The slide images have the option to add a smaller file for mobile devices.
    The images have a lazy load option.

  • ThemeKit eCom Cart Slider 2

    Thumbnails

    The thumbnail images should be sized to no more than 200px wide and optimised.
    The number of thumbs to show can be specified

  • ThemeKit eCom Cart Slider 4

    Links

    The optional links can have common or individual text.
    Common text is used when the links are for adding the item to the cart.

  • ThemeKit eCom Cart Slider 4

    Links

    The optional links can have common or individual text.
    Common text is used when the links are for adding the item to the cart.

  • ThemeKit eCom Cart Slider 5

    Link Icon

    The link has the option to add an icon which is available in three types - bag, basket & cart. Icons are black or white.
    The icons are SVGs for better efficiency and quality.

  • ThemeKit eCom Cart Slider 6

    Controls

    The previous next action tabs have controls for the icon color and the background color and its opacity.
    Controls can be hidden if required.

Add To Cart Slider

This slider has been designed for maximum efficency so that it doesn't adversely effect the download time and the time to become interactive.
Read the slide captions for more info and note that the demo links don't go anywhere!
Images
A responsive slideshow must have properly sized main images, mobile images and thumbnails. These should be optimised and lazy loading.
The demo is centered with a max width of 960px. The images were cropped and sized to …

  • Main images 960 × 640px - file size less than 100KB
  • Mobile images 720 x 480px - file size less than 50KB
  • Thumbnails 200 x 133px - file size less than 8KB

Controls
The slides can be navigated using the action tabs or theumbnails.
The previous/next tabs are inserted together at the bottom right for convenience and can also be hidden if required.
Slides can be navigated using grab and drag on computers or swipe on touch devices.
Slider Stage
The stage has its own controls for background color and opacity, padding, border width and color and for adding a bottom box shadow.

Show Cart

It is essential to have a show cart function in a fixed position so that it is always in view. The cart tab shows a basket, bag or cart SVG icon which has adjustable size.
Position
The tab can be position relative to the top or bottom and left or right. The values for positio X and Y can be adjusted.
Animation
The optional animation has controls for the animation duration set in milliseconds and the delat which is set in seconds.
The tab inimates in on the X-axis from the direction selected for the tab's position - left or right.

Icons

Professional website designer use SVG icons and for good reason. The are far more efficient than PNG or font icons.
The quality is superior to Font Awesome - unless you spring for their pro version. Font Awesome also requires a large stylesheet or Javascript to be downloaded - even if you only need a few.
PNG icons have no place in a responsive design due to their large file size and the fact that they require separate server requests.
The ThemeKit Themes have a link in the download folder's "Read Me First" file to download 100s of SVG icons.
Many widgets have a default SVG inserted. To change or insert an SVG, double click the fie to open it in TextEdit - set to plain text mode - or a code editor, copy the code and paste it into the widget settings.

Show Cart