EverWeb Widgets
Ecwid e-Store

Ecwid Cart Header

The header contains a logo with a link option, an h1 heading for the website name and an Ecwid cart widget. It works in combination with the Ecwid Navigation widget which - in this case - is inserted above the header.
Responsive Layout
The header is a grid layout with 3 columns and 2 rows. When viewed on computers, all the items are inline.
The first layout switch occurs for tablets in landscape. The cart moves down to row 2 and can be positioned either in the center or to the right.
The navigation switches to a mobile drop down and the "hamburger" icon appears to the right in row 1, column 3.
On mobile phones, the display is switched to block with the logo at the top navigation icon at the top, the heading in row 2 and the cart centered in row 3. Note that the mobile phone layout will not show properly in a desktop browser. Use the iOS Simulator or an actual phone to preview it.

iOS Simulator

Ecwid Cart Header Widget Setup

Ecwid E‑commerce
The first box in the widget settings is for inserting the ECWID ID. To get an ID click the ECWID link below and sign up for a free store.
Insert a logo if required and set it up as an internal or external link to the home page.
Heading
The heading allows for more than one line. Lines are created using the return key. As can be seen from the example, the font can be Google hosted with a web safe fallback font. The heading has controls for font size and line height, phone font size and line height, style, weight, color, top/bottom padding, letter spacin, and for text shadow radius and color.
Cart & Custom Icons
The default icon is an SVG bag. Custom SVG icons are included with the widget in the download folder. The icons are for both shopping bag and cart and are supplied in eight primary colors plus black and white.
To insert a custom icon, drag the SVG file from the folder and drop it into the EverWeb Assets, check the "Use custom icon" box and then choose the file from the list.
The cart inherits the font selected for the header. There are controls for changing the default cart styles. These are text size and color, hover color, background color and its opacity and border width, color and radius.
Layout Styles
There is a drop down for selecting the ECWID layout style options. These are …

SMALL_ICON, SMALL_ICON_COUNTER, COUNTER_ONLY, TITLE_COUNTER, MEDIUM_ICON_COUNTER, MEDIUM_ICON_TITLE_COUNTER, BIG_ICON_TITLE_SUBTOTAL, BIG_ICON_DETAILS_SUBTOTAL

The last control is a checkbox to move the cart from the center to the right when viewed on tablets.

ECWID

Tel: 012-345-6789

Ecwid Contact Bar

The contact bar has an optional phone number which switches to a phone icon on mobile phones, a contact link and an email link.
The contact link can open an internal or external contact page and the email link inserts the email name, domain name and domain extension in separate boxes. The @ and period are inserted using Javascript and this prevents spammers for harvesting the email address using scraping software.
The icons are SVGs so their size, color and hover color can be adjusted. The contact and email icon links can show a title on hover when viewed on computers.

Ecwid Ionicon Links

The inline links shown below above the footer are created using the Ionicon range of icons. There is a checkbox to open the Ionicon Cheatsheet to find icon names quickly using the search feature.
The links can be square or round and there is the option to add a border. The link and icon size can be adjusted. All the links have the same icon color and hover color. Each one can have an individually set background color.
The horizonta and vertical spacing can be adjusted and there is the option to add a scale on hover animation when viewed on computers.
Email
The email link is optional. The email name, domain name and domain extension are entered in separate boxes. The @ and period are inserted using Javascript and this prevents spammers for harvesting the email address using scraping software.
Phone
The optional phone link can either show the phone number on hover when viewed on computers and tablets or be hidden. It appears when the page is viewed on mobile phones and will place the call when tapped.

Ecwid Info Footer

The footer has a three column, two row grid layout. The info icon is in column 1 and spans both rows. The center text section is in column 2 and also spans both rows. The scroll top and email icons are in column three and each occupy a row.
Break Point
The break point is preset for phones in landscape mode and, at that point, the text drops down to row 2. The info, email and scroll top icons position themselves in row one.
The phone number if present switches to a "Call Me" phone icon.
Info Menu
The menu pops up on clicking or tapping the info icon. The icon has controls for setting its color, hover color and the background color and its opacity.
The menu is open for editing when viewed on the EverWeb design canvas. There is a checkbox to close it prior to publishing the page.
Links
The phone link is turned on using a checkbox. The rest of the links are added using the Assets List and can be configured to open internal or external pages and files.
The links inherit the text section's font family and have controls for font size, color, hover color and separator width.
Text Section
The text section is centered in the footer in an HTML5 <article> and can have several lines of text. The footer height can be adjusted to suit. It is entered into a large text box using the return key for line breaks.
As can be seen from the example, the font can be Google hosted with a web safe fallback if required. There are controls for font family, fallback font, size, color and line height.
The last line can have the copyright info and the copyright year can be added and updated automaticlly by checking a box. The copyright sign © is created by inserting the HTML which is &copy;
Email Link
The email link has a field for the email subject line and the address is entered in three boxes for email name, domain and domain extension. The @ and the period are filled in using Javascript and this gives basic protection from spammers using scraping software to harvest email addresses from websites.
Scroll Top
The smooth scroll to the top function has a control for setting the scroll time in milliseconds.