Ecwid Cart Header [2]

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 2 widget which - in this case - is inserted below the header.
This version of the widget is used in conjunction with the Ecwid Navigation [2] widget. It incorporates the " Hamburger" menu icon for the mobile version of the two level navigation.
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 at 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

Ecwid Navigation [2]

The two level navigation is used in conjunction with the Ecwid Cart Header [2] widget. It can be placed above or below the header.
The navigation can have up to six top level links and three directories - each with up to six links. The last link on the top level can be configured as an external link and open in a new tab or window if required.
The tabs have a minimum width setting and there is a setting to adjusted the drop down width to suit the amount of link text.
The mobile version of the navigation is vertical so there is a setting to adjust its width. The directories open on click accordion style.
The navigation can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for adjusting the color, hover color and the background color and its opacity.
NOTE: The icon for the mobile drop down navigation appears in the header when the page is viewed on tablets and mobile phones. It has controls for icon color, background color and border radius.

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