Storefront Website Overview
The storefront is the actual website where the products are displayed — with or without prices. The range of products available on the storefront is referred to as the Product Catalog and similar products are organized in Product Categories.
A storefront is private and secured if it can only be visited by users who have been assigned a login and password. The storefront is public if it can be accessed by anyone with internet access.
Storefront Grid
The storefront consists of a header area and a footer area which is identical for all pages of the storefront. The navigation bar provides links to the various pages.
 |
1 Logo
2 Swirl
3 Language bar with links to localized storefront pages (optional)
4 Shopping cart and account
5 Navigation bar with page links and Search
6 Page content
7 Customizable footer (optional)
Home Page
The Home page is the landing page of the storefront where the Product Catalog is displayed.
 |
1 Link names in the navigation bar
2 Banner
3 Page title
4 Content
5 Image inserted in content
6 Contact box (optional)
7 Link box (optional)
8 Product catalog with product categories
Product Category Page
Clicking a Product Category in the Product Catalog takes you to the second level of the website with pages that display all the products per Category.
 |
1 Breadcrumb navigation trail
2 Current product category title
3 Navigation to other product categories
4 Products
Product Page
Clicking a product in the Product Catalog takes you to the third level of the website with pages that display the information about the actual product.
 |
1 Product name
2 Place Order box with available quantities, media types and product options
3 Specifications of the product (system-generated, hidden or customized)
4 Available order quantities and prices with pricing table footer
5 Product description
6 Preview images
Optional Pages
Three optional pages with links in the navigation bar contain additional information. The Copyright notice and a link to the Terms & Conditions page can be placed at the bottom of all pages.
 |
1 Link names in the navigation bar
2 Page title
3 Content (can also include images)
4 Contact box (optional)
5 Link box (optional)
Search
Every storefront page has a search box in the top right corner which is designed to help shoppers find products. To understand how search works you need to know that it is based on the following principles:
•The search engine is meant to find specific products or product categories. It will not search information pages or external sites.
•Search is not case-sensitive.
•The use of wild cards, such as * or ?, or logical operators, such as AND or OR, is not supported.
•The following system fields are searched:
•Category name
•Product name
•Product description
•Product
•SKU
Regular and Suggestions Search
A regular search is performed when the shopper enters a search term and presses the Enter key or clicks the Search button. When the shopper starts typing, a list of suggestions appears in a separate pop-up window. This is the suggestions search. Clicking the View All button triggers the regular search function.
Responsive Design
If you think shoppers will be viewing your storefront on mobile devices (smartphones, tablets, notebooks, etc.) you can choose to make it responsive. This means the page grid elements will adapt automatically to the size of the screen. For example, on a smartphone, the navigation bar is replaced by the Menu button (the so-called hamburger icon), the banner picture is hidden, the Product Catalogs are displayed in 2 columns instead of 4, and the language bar becomes a menu.
This option is chosen in the Style Tab. If you have a custom footer on your pages, you also need to make some changes in the Custom Footer Tab.
The responsive design grid uses the following screen widths to show/hide certain elements and adapt their arrangement:
•smaller than 768 px
•between 768 px and 992 px
•between 992 px and 1200 px
•larger than 1200 px
You should test what your storefront will look like in responsive mode on the various devices. You can do an initial test on a full-size computer monitor by reducing the size of the browser window to see the effect.
 |
doc. version 6.0.4