This is a demo store. No orders will be fulfilled.

Style Guide ETC

Lists

An Unordered HTML List

  • Coffee
  • Tea
  • Milk

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk

Layered Navigation

Layered navigation allows customers to search and browse products using facets by category or by attribute.

The attribute properties, combined with the product input type determines which attributes can be used for layered navigation. Layered navigation is available only for “anchor” categories, but can also be added to search results pages. The Catalog Input Type for Store Owner property of each attribute must be set to “Dropdown,” “Multiple Select,” or “Price.” To make the attributes filterable, the Use in Layered Navigation property of each must be set to either “Filterable (with results)” or “Filterable (no results).”

 

By default, all options are closed and can be opened on click. Example of the price filter shown here.

Product Compare

Compare Products generates a detailed, side-by-side comparison of two or more products. The Compare Products block usually appears in either the left or right sidebar of a catalog page.

Newsletter

Admin has options for confirmation templates, unsubscribe emails, and success emails. Located in the footer. 

input[type="email"] -
background: #fff;
background-clip: padding-box;
border: 1px solid #c2c2c2;
border-radius: 1px;
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
height: 32px;
line-height: 1.42857143;
padding: 0 9px;
vertical-align: baseline;
width: 100%;
box-sizing: border-box;

 

 

Divider


width: 100%;
display: inline-block;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 20px;