How do I create a typical WebShop page using Pages?
Purpose and scope
Pages, our Content Management System, allows you to customize your WebShop so your brand and your products shine. All content is created, edited and deleted in Management Interface. Many options and functionality is available in Pages, including features that improve your search engine optimisation, set permissions for different customer groups and customize the look and feel of WebShop.
This feature guide describes a typical WebShop page. It explains how to view or edit each section in Management Interface.
Each WebShop page is built by combining a number of different sections to showcase your company and product to its best advantage. Each section can contain blocks, pages or links, or a combination of these three items.
During your product onboarding, our consultants guide, educate and support you in how to use our tools to build content for your WebShop.
Introducing terms and concepts used in this article
Term | Definition |
|---|---|
Block | one or more elements that are stored under the same branch within the navigational tree. |
Branch | set of nodes where a node can be a link, a page or a block. |
Link | link to an existing page. |
Navigational tree | file directory that contains WebShop content consisting of branches and node. |
Node | can be a block, a page or a link. |
Page | a specific piece of text or particular image stored in the node location of the navigational tree. |
Page template | preset design for a specific page. |
WYSIWYG editor | a text editor that displays your content as you would see it on WebShop. |
How it fits together
Our consultants guide, educate and support you in how to use our tools, including Pages and Visual Page Builder, to build the content for your WebShop as part of your product onboarding.
Read Understanding WebShop template and themes for more information
Header
Key points
You can not view or edit the structure of the header in Management Interface.
You can modify the following elements of your header:
Stock locator - on the left hand menu, click on Stores, and modify the content as required
Contact us - on the left hand menu, click Pages, locate the “Contact us” page in the navigational tree and modify the content as required
Example
Shows three element:
Hero banner set
Typically contains one or more product clickable images. When clicked, the images open up the product page where your customers can add them to their cart for purchase.
Key points
There are two menu options used in conjunction with each other to view or edit a banner set:
To view or edit the content (the images that you see), on the left hand menu, select Banners → <page in navigational tree to view or edit>. This opens the banner management system, which allows you to specify a hero banner set name and images associated with that banner set.
To view or edit how the content is displayed, on the left hand menu, select Pages → <page in navigational tree to view or edit>. This opens the CMS editor, with the relevant options under the two tabs: General and Options.
As an example of this, the following image shows the options for the “Banner - Slider” block.
Example
Showcases the following block type:
a “Banner - Slider” block containing a number of clickable images that can be swiped left or right
Content sections
Typically consists of a number of sections, where each section can be made up of blocks, pages and links. There are endless ways for you to create and showcase your products and company using the many different block types that are in the CMS. Click for more information about the different block types available and get your creative juices flowing!
Key points
To view or edit any of these content sections, on the left hand menu, select Pages → <page in navigational tree to view or edit>. This opens the CMS editor with the relevant options under the two tabs: General and Options.
Example
The Popular Categories section consists of two blocks:
a “CMS Content” block containing the section title,
a “Category grid select” block containing links to categories in your product catalogue.
Footer
Typically consists of links that you wish to remain anchored to the bottom of each WebShop page.
Key points
To view or edit what you see in the Footer, on the left hand menu, select Configuration → Settings → CMS. Modify Footer links 1, Footer links 2 and / or Footer links 3.
The default value for these three settings is Root. However, you can change them to different content. For example, you may want to set one to Latest News. The Latest News page must exist in the Content → Pages hierarchy.
Example
Shows two elements:
Block containing an option to sign up to the company’s newsletter
Footer containing contact information, links to Latest News, Store Information and Promotions
Step by step
Step 1: Log into Management Interface
Log into Management Interface using your username and password. This opens the dashboard of your Management Interface.
Step 2: Open Pages
Click Pages. This opens the Content Management System.
Action 1: Create new page, block or link
Click New on the top right of the screen, and select New Page, New Link or New Block.
When you select New Page, the WYSIWYG editor opens. Use the editor to create your page, specify its location and configure it as required. Click Save to save changes.
When you select New Link, the WYSIWYG editor opens. Use the editor to add in new link information and click Save.
When you select New Block, the following screen is displayed:
The General settings are the same for each block type. Settings are dependent on block type selected; read our guide on available block types for more information.
Field name | Description | ||
|---|---|---|---|
1 | Name | Specifies the name of this block. |  |
2 | Block type | Specifies the block type you wish to use. | |
3 | Parent | Specifies where in Pages hierarchy that you wish this block to be located. | |
4 | Menu index | Specifies where the block is located on the screen. The lower the number used here, the lower the block is displayed on the screen. Minus numbers can be used. | |
5 | Visibility | Specifies whether this block can be seen by your customers. It is always set to Hidden when you initially create the block. Remember to change this setting to Visible when you want your customers to see this content in your WebShop. | |
6 | Permissions | Specifies which of your WebShops (B2B, B2C or guest) can view this block. | |
7 | Customer groups | Specifies which customer groups can view this block. |
Remember to click Save once you make changes to any of these settings. The changes are made immediately to your WebShop.
Action 2: Manage existing page, block or link
Select the page, block or link you wish to edit from the navigational tree. This opens the editor with details of the selected page, block or link. Update as required. Click Save.
Remember to click Save once you make changes to any of these settings. The changes are made immediately to your WebShop.