0345 466 2666
Mon - Fri: 9am - 5:30pm
Sat - Sun: Email Only
Mon - Fri: 9am - 5:30pm
Emergency support during
evenings and weekends
Bluepark Solutions Ltd
Unit 18, Thorney Leys Business Park
New User Guide
This guide is an introduction to the Bluepark CMS (Content Management System). It does not attempt to demonstrate everything the system has to offer, by any means, but it will give you a broad level of understanding as to how it works in practice. The guide uses a step-by-step approach to help you become familiar with the main functions of the system. When you understand how it works in general, you will be in a position to experiment further and with ever increasing levels of confidence. Don't be afraid to try different things, it's the best way to explore the system's potential.
A cautionary word - don't expect to do everything at once. Remember, you are building a complete online shop to your individual specifications and this takes time. The degree of time taken will depend on the amount of work you decide to undertake. You might choose to adopt one of our "stock" templates, making very few changes to the design, or you might decide to modify the template extensively for a more bespoke end result.
If you don't have a great deal of knowledge regarding the Internet, how it functions or the languages and protocols it uses, you will benefit from carrying out some research on certain terms to obtain an overview of how it all fits together.
The Admin Console, accessed via your domain name forward-slash "admin", is used to build the site itself - your online shop. There are several support resources available within the Admin Console itself. Click on the red Help System (question mark) button on the right-hand side of the dark blue header bar, and the accompanying red FAQ (Frequently Asked Questions) button in the bottom left corner of the page. These resources will always provide information relevant to the section of the Admin Console you are currently working in. The FAQ button will only appear in sections where FAQ articles are available.
The Admin Console generally uses a "tabbed" interface, separating each section into pages with form fields to be completed. Every field name features a small red [?] icon, signifying a Tooltip. Hovering your mouse over this icon will provide you with additional information concerning the field, i.e. what it should contain and in what format.
Now, let's get started! We'll begin by making some simple changes.
Sign in to the Admin Console with the Username and Password provided. You will be presented with the Setup Wizard, which will require you to enter some important company information. You can also select an initial colour scheme for your custom site design, known as the Template.
The site logo can either be plain text, or a logo image that you select from your PC. Should you wish to upload your own logo image, we recommend a large, wide image on a white or transparent background. A wide image will fit the dimensions of the header far better than a tall image. The uploaded image will be trimmed and resized automatically, a white background will be made transparent. The Template can be fully modified, in much greater detail, following completion of the initial setup stage.
After submitting the required information, you will arrive at the Admin Console's Home page. As you will see, there are two ways to navigate the Admin Console. The first is the light blue horizontal Menu Bar at the top of the page, with drop-down options sorted into categories. The second is the collection of buttons on the Home page providing access to some of the more frequently used functions, for added convenience.
The following exercise will take place in the Configuration section of the Admin Console. This is an important section, as it contains settings which can alter the way in which various aspects of your site will function and display.
Your initial impression when viewing this section, and other sections as you explore our system, may be that there are large numbers of customisable fields and options. The reason for this is the flexibility of the Bluepark platform, so don't panic - our system is capable of a great many things.
Some features and settings can safely be ignored in the initial stages, maintaining the default values which will be ideal for most users. They will almost certainly become useful at a later date, as you begin to use the site with greater experience and confidence.
From the Admin Console Menu Bar:
SEO (Search Engine Optimisation):
We advise you to undertake some research before you input any Meta Data, being the Default Title, Meta Description and Meta Keywords fields. Please consult our Search Engine Optimisation introduction before you attempt this. There is also a lot of information on the Internet regarding search engines to help you get your site as close to the top of the "organic" listings as possible and in the shortest time. The organic or "natural" listings are those in the main body of the search results page, as opposed to the PPC (Pay Per Click) listings along the top and the right-hand side (such as Google's Adwords scheme). Google Adwords can be an effective way to generate instant traffic for a new site, but it is important to monitor your spend and ROI (Return On Investment) very closely.
Web space, or hard disk storage, is defined as the amount of data stored against your account. This includes all files, the site database and e-mail storage. You have a generous amount of web space available for storing files such as images, documents and other media.
You can upload, rename and delete your files by navigating to the Site menu and selecting the File Manager, or via an FTP (File Transfer Protocol) client installed on your PC. You can also click on the white Your Files link on the right-hand side of the dark blue header bar to access the File Manager at any time.
The EasyEdit feature is perhaps the most powerful and helpful tool at your disposal in terms of building your site and maintaining its content. Rather than having its own section within the Admin Console, the EasyEdit system is actually built into the site itself, enabling you to create and edit site content without having to constantly navigate through the Admin Console. It provides an alternative way to edit your site.
In order to access the EasyEdit system, click on the white View Site link on the right-hand side of the dark blue header bar from any section within the Admin Console. This will launch your site in a new window. Because you are still signed in as an admin user, your site will look slightly different as it will be displaying additional information (please note that your customers will not see this information).
Notice the blue EasyEdit Bar across the top of the page. As well as providing instant access to key sections of the Admin Console, this also indicates the Template and Layout currently assigned to the page you are viewing. The Template is essentially the site design, the "look and feel". This includes the images, colours and fonts common to every page. The Layout is the structure of the page, and determines:
Understanding the relationship between Layouts and their Blocks, particularly, will enable you to get the most out of the Bluepark system. Feel free to experiment in this area, and the subject will be discussed in more detail later.
The links on the EasyEdit Bar can be clicked to reveal drop-down menus, each with various functions to make building your site quicker and easier. You can also use the F9 key to toggle on or off the various coloured Pencil icons which appear on top of the page itself, these icons will be discussed in more detail below.
Every Block on the page can easily be identified as it will have both a yellow Pencil icon and a yellow Drag (and Drop) icon in the top right corner. Clicking on the Pencil icon enables you to edit the Block in various ways, or to remove it from the Layout being used by the page. The Drag icon enables you to move the Block up or down within the column, allowing you to easily reorder your Blocks.
The green Pencil icon works in a similar way, but relates to the main focus of the page. This might be a category, product, blog post or standard information page (such as the Home page). Assuming that you're viewing an information page, select Edit Content from the drop-down menu after clicking on the green Pencil icon (you can also double-click on the page content itself to make it editable). Make your adjustments and click either the green Tick to confirm your changes or the red Cross to discard them. For more comprehensive editing options, select Edit Page from the drop-down menu after clicking on the Pencil icon. This will open up the Page Editor via the EasyEdit bar.
Finally, there are some other yellow Pencil icons which relate to the Header and Footer of the site. These sections are part of the site's Template and will be found on every page of the site.
If you add, remove or reposition a Block on any page, it is important to take note of the Layout being used on that page. Any other pages on the site using that particular Layout will be altered in the same way. If you want the change to take place on that page only, create a copy of the existing Layout for that specific page.
The Template defines the overall "look and feel" of the site, and is quite often the first thing that new users wish to customise. As web design is a complex skill in its own right, this can be one of the most challenging aspects of building a new site. Because you have already completed the Setup Wizard, you will currently have a Default Template with your selected initial colour scheme and either a plain text or image logo in the top left corner.
The Default Template is a customised copy of one of the "stock" Templates provided as standard with the system. You are always required to create a copy of the stock Template you wish to use so that you can revert to the original version at any time, should you want to.
Navigate to the Site menu and select the Template Manager, where you are able to view all of the available Templates. Your Default Template is initially assigned to all areas of the site. However, you may wish to give a particular product category its own "theme", and to do this you could assign an alternative Template to that category. Bluepark always uses this system of "inheritance" - the Default will be used unless it is overridden by you.
More detailed Template editing techniques will be introduced later.
Your information pages are known as "static" pages on the site, meaning that they simply provide content rather than "doing" something. All of your static pages are created and modified via Content -> Page Manager. Within this section, you will see your existing pages with a green Flag icon for an Active page and a red Flag icon for an Inactive page.
From the Page Manager:
If you now return to the Page Manager, you will see that the Title of the page you've edited has been changed to "Contact Info". This is the same Title that is used in the left-hand Information menu on your site (take another look to familiarise yourself with this). The Information menu is an excellent example of a Block - an element which can be used on more than one page. Feel free to change "Contact Info" back to "Contact Us"!
You will notice that the order of the pages in the Information menu is identical to the order of the pages in the Page Manager. Use the green Arrow icons to move pages up and down the list. Next, click on the green Flag icon next to any Active page to toggle its status to Inactive. View your site again to see the reordered page list in the Information menu, with the Inactive page removed. Inactive pages can still be viewed, they simply won't show up in the Information menu. Another good place to link to static pages is via the Navigation Bar or the Footer section.
You have now successfully edited your first page, and you understand the relationship between Active pages and the Information menu Block - but you're probably wondering how to edit the other elements of the page. The answer lies in understanding the relationship between Blocks and Layouts.
You can think of a Layout as an organisational tool. Its application is similar to the Template in that the Default Layout will be used throughout the site unless it is overridden, such as on specific pages or individual product categories.
You may recall that every page has its own Template and Layout assigned in the Page Editor - this time, take a look at the Home page of your site. The Template field is set to "Default". The Layout field, however, is set to "Home Page". This means that the Home page has its own individual Layout assigned. You can confirm this by viewing your site's Home page and checking the EasyEdit bar.
Let's take a closer look at this particular Layout by navigating to Layout -> Layout Manager. You will see the "Home Page" Layout listed along with all of the other Layouts available to use. These are installed by default and may be edited, copied or deleted. Always copy an existing Layout to create a new one.
From the Layout Manager:
Now that we understand how Blocks are organised within Layouts, let's take a closer look at one of them in greater detail. Navigate to Layout -> Block Manager and you'll see the list of Blocks currently available. All of them will be Active by default. Although it is possible to make Blocks Inactive via this page, it is not advisable to do so as this will hide the Block globally throughout the site, in all Layouts. You will particularly notice the now familiar Information menu Block in the list.
Click on the Information Block's title or the Edit button to enter the Block Editor. Other than the Title field, there is very little to edit. This is because the Information Block is generated automatically by Bluepark, populated with the Active pages listed in the Page Manager, therefore there is no WYSIWYG editor with which to make changes. There are many other functional Blocks such as this one, Blocks that "do" something.
The alternative is a Custom Block. These may contain any type of content you wish, and are assigned to Layouts in exactly the same way.
As was mentioned earlier, "static" pages are editable via the Page Manager, using the WYSIWYG editor. This editor provides many useful text-editing functions, along with the ability to create hyperlinks and insert images. However, it also gives you the opportunity to override the font colour and style settings defined in the Template, something which we recommend you avoid doing (except on rare occasions).
Specifying font settings via the WYSIWYG editor "forces" the selected text on the page to conform to a specific font colour and style. This means that the font settings you have defined for your site as a whole are being overridden. It is only wise to do this for spot colour on a page, rather than creating an ongoing theme. The best place to specify font colours and styles is via the Template Editor, to ensure you maintain consistency of design throughout your site.
Aside from the static variety, the pages you'll be most involved in creating and maintaining are the Category and Product pages. These are termed as "dynamic" in that they are partially generated by Bluepark. They are essential in building your product catalogue.
Navigate to Catalogue -> Category Manager and you'll see a list of categories. Similar to the relationship between the Product Manager and the Information menu Block, activating and reordering categories via the Category Manager results in changes to the Catalogue menu Block.
From the Category Manager:
Once you have created your category, a new tab entitled Products will appear. You have the option to assign products to your category, and also the option to create a custom order or sequence in which your products will be displayed. Returning to the Category Manager, don't forget to make your new category Active.
Categories can be many levels deep, meaning they may contain sub-categories. Of course, categories may also contain products. However, a category may NOT contain both sub-categories and products. This is important to remember when planning your category structure. The Refine Results Block, using Brands, Attributes and Options to filter your product list, is one possible alternative to using sub-categories.
Navigate to Catalogue -> Product Manager and you'll see a list of products. The list can be searched, sorted and filtered in various different ways, including displaying just the products within a particular category.
From the Product Manager:
Importing a Product Database:
As it can be a time-consuming job to create a large number of products by hand, there is a powerful import tool available to make the job a little easier. In order to take advantage of this feature, you will need a CSV (Comma Separated Values) file containing your product database (and all of the relevant fields). CSV files are compatible with Microsoft Excel, and a standard Excel spreadsheet can easily be saved as a CSV file.
Navigate to Catalogue -> Import Product Data to begin the process. This involves creating an "import template", which is essentially the process of mapping fields in Bluepark's database (such as SKU, Title) to columns in your CSV spreadsheet (such as 1/A, 2/B). The image files themselves are, of course, not contained within the CSV file (which is essentially just a text file). However, the filenames should be listed in the relevant columns. The image files may be uploaded to the corresponding folders via an FTP client to speed up the process. Once again, the smaller images may be generated from the Large (zoom) images. It is also possible to specify full image URLs relating to an external site, which will cause the Bluepark import to download the images and store them in your local file area.
From the Import Manager:
Your import template is now prepared and ready. Any Categories, Brands, Attributes or Options you've assigned should already exist in their respective Category, Brand, Attribute or Option Managers, otherwise the import will offer to create any that are missing on your behalf. If you're uploading your entire product database and you wish to replace any products already existing on your site, select the Wipe Database option (but please treat this with caution).
It is important to note that the product SKU is always a required field. When importing your product database for the first time, the SKU is created as the unique identifier for the product. Subsequent imports will update any products that already exist, and the SKU will be used to identify these products.
The most time-consuming aspect of importing your product database is the preparation of the CSV file itself, ensuring the formatting meets Bluepark's requirements. Please feel free to ask for our advice in this area.
A product may have more than one Variant, i.e. a shirt may be available in two sizes - Small and Large. Each of these Variants is essentially its own product, with its own SKU, price and stock level.
Once again, "inheritance" is used to determine the Variant's values. The Parent values, those already defined in the Values tab of the Product Editor, are used unless they have been purposely overridden. Product Variants are generated by assigning Options to products.
From the Admin Console:
You can assign more than one Option to a product, meaning that you could have, for example, both Size and Colour. Multiple Options and their values generate what we could call a "Variant matrix", as a result of the possible combinations of Option values. Consider a product with Sizes of Small and Large, and Colours of Blue and Red. This configuration would result in 4 Variants - Small: Blue, Small: Red, Large: Blue, Large: Red.
You may wish to assign Options to products which DON'T create Variants, this is possible by using Additions instead of Options. An Addition can be any kind of form field, including a text or file input field, and can also have an associated additional cost. An Addition can be optional or required, and there is no limit to the number of Additions that can be assigned to a product. Additions are particularly useful for creating customisable products.
Every Template has its own folder of images. These can be viewed by navigating to Site -> File Manager and exploring the "templates" folder, or by clicking on the blue Folder button in the top right corner of the Template Editor.
The "Bluepark Glass" Template, our default "stock" Template, is the easiest to customise in terms of changing the initial colours. This is because the Template uses semi-transparent PNG files to apply the smooth gradients and textures which make up the coloured elements such as the Navigation Bar, the Block titles and the buttons. This means that you can simply change the colour values in the Template Editor without having to edit any images.
The remaining stock Templates provided are developed using Adobe Photoshop, and the layered PSD files used to generate the Template images are provided in their respective folders. It is advisable, when editing one of the older stock Templates, to edit the relevant PSD file in either Photoshop or another compatible application. This way you can insert a new logo, or alter colours and images, but maintain the original structure of the Template. Once you have edited your layered PSD file, save the final image as either a PNG, GIF or JPEG for use on the site.
The differences between PNG, GIF and JPEG files are the number of colours they can store, and the way they are stored. PNG files can store a virtually unlimited number of colours with no visible loss of quality, but the file sizes tend to be rather large. If your image has very few colours, such as black and white or spot colour, GIF files can store up to 256 colours without any loss of quality. JPEG files can also store a virtually unlimited number of colours, but JPEGs are saved compressed - i.e. there is a visible loss of quality. If you're unsure, save your image in various formats and decide which one looks the best with an acceptable file size.
If you have a look at your site, you will see that it's divided up into 3 separate sections. These are the Header at the top, the Footer at the bottom and the Content between the two. The Content is divided into (up to) 3 columns, the Centre (main) column, and the Left and Right (side) columns. Let's try replacing the image used in the Header section.
From the Template Editor:
Now that you've saved your changes, you'll notice that the dimensions of the image (width and height) are displayed beneath the Background Image field. These dimensions are important, as they determine how large the image will appear on the page. As you're still viewing the Header tab, scroll up to the Header Height field at the top. Always consider the size of the image you're adding. Either resize the image to fit the height available, or alter the height of the Header to accommodate the size of the image.
The Header section may optionally contain 3 other elements, known as Bars. These are the Account, Navigation and Search Bars. They literally sit "on top" of the Header section, and can be positioned wherever you like within this area.
The other section you're more than likely to want to change is the Footer. Click on the Footer tab and scroll down to the Footer Content field. By default, this contains a series of links and copyright information. You can alter this by using the WYSIWYG editor to add, edit or remove content.
For many users, changing the Header and the Footer will be enough to customise the "look and feel" of the site. Needless to say, however, this is only scratching the surface of the Template Editor's potential. Designing and building a site Template is something which takes time, experience and attention to detail. You will most likely need design skills with software packages such as Adobe Photoshop (which we recommend).
If you don't feel confident designing a new Template, it may be wise to consult with a professional design company. We would be very happy to recommend one of our accredited Design Partners, any one of which will be able to offer you a completely bespoke and original design, based around your individual requirements and specifications.
It is important to bear in mind that every section of a page on your site has finite space. The Header, Footer, side columns and main content area (if you're using a fixed-width Template) all have limited space available. Text, due to the way it "wraps" to fit any given area, is unlikely to generate display problems.
Images, however, do not wrap, nor are they automatically resized by Internet browsers. Inappropriately sized images can distort the structure of a page, forcing the intended dimensions to change and look untidy. For this reason, you always need to consider the space available, in pixels, and the size of any images you're placing inside. In order for images to maintain a high level of quality, they should be resized via a graphics package and saved, rather than specifying new dimensions on the page.
If you're using a "fluid" or "100% width" Template, you still need to think carefully about image sizes, and the number of images you feature in a row. Check your screen resolution settings, meaning the number of pixels displayed horizontally and vertically on your monitor, and consider whether you're running at a higher level than the average Internet user. Current research suggests that the average screen resolution for today's Internet user is 1024 x 768, and your site should look presentable with this setting. We recommend a fixed width of 960px.
If you're using a very high screen resolution to develop your site, it's easy to fall into the trap of filling up all of the available space on your pages. However, your users may be having a very different viewing experience, being forced to scroll horizontally to see all of the page. Many users will simply abandon such websites as they are significantly more difficult to navigate, and they look considerably less professional. Getting image sizes right will enhance the usability of your site for the widest possible audience.
There are some commonly used words and phrases throughout the site that you may wish to change. Consider, for example, that you might like to replace all occurrences of the phrase "Shopping Basket" with "Shopping Cart". This can be accomplished easily via Site -> Language Manager.
As with stock Templates, you are required to create a copy of the stock Language to begin making changes.
From the Language Manager:
Along with standard text and phrases used throughout the site, you can also edit the text used for outgoing e-mail correspondence via the E-Mail Content section at the very bottom of the list.
Unfortunately, such uplifting sentiments do not hold true for websites. You can design and build the greatest site in the world, but if it's not marketed effectively then the response will be very poor. It is notoriously difficult to achieve high rankings with search engines such as Google, especially in the short term. Your online "reputation" is something which needs to be developed over time.
You must, therefore, be prepared to consider other marketing strategies and opportunities. PPC (Pay Per Click) advertising campaigns, such as Google's Adwords scheme, can be a great way to launch your new site with virtually instant results. You simply identify your "keywords", the words and phrases your potential customers are likely to use to find your site, and set an acceptable budget - the amount you're prepared to pay for each referral. Take full advantage of the marketing tools available to ensure that your new site is visible, busy and profitable.
Well done! You've reached the end and by now you should have a good overview of the system and its main functions. We hope you have found this guide, and the Help System in general, very useful.
At Bluepark, we are constantly striving to improve what we do. We welcome your feedback and will be pleased to receive your comments in connection with any aspect of our system. Let us know what you found helpful and what we could do to improve it for future users.
Contact us to let us know what you thought of this guide.
Try Bluepark for FREE for 14 days
Full access to everything including our support team, no card details required