Understanding WebShop screen layouts
Purpose and scope
WebShop is designed to be functional and intuitive. The basic screen layout of My Account, Shop and the different formats of the Product Card listed in the Sop are described here.
Remember that many elements of WebShop screens are configurable so be sure to talk to your Onboarding Consultant about your options during onbaarding.
Basic layout - "My Account"
When your customers log into WebShop, they are presented with their Dashboard screen. The basic screen layout of this screen consists of the following elements:
1: Ribbon: may contain contact details, links to Quick Order, links to other social media integrations, such as Facebook, YouTube, LinkedIn and/or Twitter and links to translated WebShops. The ribbon is displayed on all screens, regardless of which screen you are on in WebShop. Links, layout and branding is configurable.
2: Header can provide a search box, links to Store Locator, My Account and My Cart. The header is displayed on all screens, and its contents depends on what features are switched on / off.
3: Top menu bar has links to your Shop, highlighted products, your latest news and your contact details. These links are configurable in Pages, found in Management Interface.
4: Breadcrumbs, indicating where you are in WebShop. These can be switched on or off in Management Interface.
5: Side menu bar which lists links to the key features switched on in your WebShop.
6: Main content area, containing data that is retrieved from your ERP or Digital Platform for the chosen menu option that you have selected. For example, selecting Account Details returns your account details, including your credit balance and limits which have been retrieved from your ERP.
7: An optional integration with software (such as Klaviyo or MailChimp) that allows your customers sign-up to your newsletter.
8: Footer, which may contain your contact details, store details, top categories and other appropriate links. The footer is displayed on all screens, and its contents can be configured in Pages, found in Management Interface.
Basic layout - "Shop"
Your WebShop is designed to allow to to Sell Smarter, and the basic screen layout for the Shop reflects this focus. It has the following key elements:
1: Ribbon: may contain contact details, links to Quick Order, links to other social media integrations, such as Facebook, YouTube, LinkedIn and/or Twitter and links to translated WebShops. The ribbon is displayed on all screens, regardless of which screen you are on in WebShop. Links, layout and branding is configurable.
2: Header can provide a search box, links to Store Locator, My Account and My Cart. The header is displayed on all screens, and its contents depends on what features are switched on / off.
3: Top menu bar has links to your Shop, highlighted products, your latest news and your contact details. These links are configurable in Pages, found in Management Interface.
4: Breadcrumbs, indicating where you are in WebShop. These can be switched on or off in Management Interface.
5: Side menu bar, containing a list of categories in your product catalogue. Your product catalogue is managed in your ERP, and imported regularly into WebShop. You can also manage products in Management Interface.
6: Main content area where product details are displayed. Products can be viewed in grid, list or detailed formats. Typically, pricing and stock details are retrieved in real-time from your ERP.
7: An optional integration with software (such as Klaviyo or MailChimp) that allows your customers sign-up to your newsletter.
8: Footer, which may contain your contact details, store details, top categories and other appropriate links. The footer is displayed on all screens, and its contents can be configured in Pages, found in Management Interface.
Basic format - “Product Card”
WebShop supports three different views of the Product Card. Your customers can move between the three different using the toggle in the top right of the main content area
Select Grid view to see a listing of your products in grid format. The screenshot displays a typical view, although your view may vary depending on on it is configured.
Note 1 Price: typically real-time price is retrieved from your ERP, and it can be displayed inclusive or exclusive of tax.
Note 2 Placeholder for labels: could include Product Review Rating, or Energy Rating, depending on how you have configured WebShop.
Note 3 Call to action: typically is to add the product to cart, but could be view and select product options if they are configured in WebShop.
Select list no image view to see a list of your products with no images displayed on the listing page. The screenshot displays a typical view, although your view may vary depending on on it is configured.
Note 1 Price: typically real-time price is retrieved from your ERP, and it can be displayed inclusive or exclusive of tax.
Note 2 Placeholder for labels: could include Product Review Rating, or Energy Rating, depending on how you have configured WebShop.
Note 3 Call to action: typically is to add the product to cart, but could be view and select product options if they are configured in WebShop.
Select list with images view to see a list of your products with their images displayed on the listing page. The screenshot displays a typical view, although your view may vary depending on on it is configured.
Note 1 Price: typically real-time price is retrieved from your ERP, and it can be displayed inclusive or exclusive of tax.
Note 2 Placeholder for labels: could include Product Review Rating, or Energy Rating, depending on how you have configured WebShop.
Note 3 Call to action: typically is to add the product to cart, but could be view and select product options if they are configured in WebShop.