Editing and designing your Storefront pages with 'Website pages'
When you go to the ‘Website pages’ section you will see two tabs – ‘My pages’ and ‘Page types’. Both allow you to design and lay out the content of your different pages, using Storefront’s innovative drag and drop system. You will also be able to add widgets to your pages here, too.
Using the ‘My pages’ tab, you can add and build extra pages for your store. These are additional to your category, product and manufacturer pages, and could be pages such as ‘Contact us’, ‘About us’ or any other information you want to provide customers.
With ‘Page types’, you can create templates that will be applied across certain groups of pages. So for example, you can create a template that will be used for all your category pages and another for all product pages.
My pages
The ‘My pages’ tab displays all the pages you currently have on your website. You will notice a few things on this page:
• Page names in red with a small padlock symbol next to them – these are default pages that Storefront has automatically sent up for you. Although these pages cannot be entirely deleted from your Storefront account, you do not have to have them visible or live on your store
• Add to menu – if this shows a green tick, you will find the corresponding page appears in the navigation menu on your store. If this shows a red cross, the page will not be added to your navigation menu
• Published – if this shows a green tick, the corresponding page will be live on your store. If this shows a red cross, the page will be not be visible on your store
There are also two buttons next to each page – ‘Edit’ and ‘Build page’.
Please note: Some of the options below may not appear for the default pages as Storefront has automatically created some settings for these.
Edit
With the ‘Edit’ button, you can add and amend basic information for this page. There are two tabs to complete:
Page info
Page name – Here you can edit the name of this default page
Published – tick here to publish this page on your store immediately
Add to menu – tick here if you want this page to appear in your store navigation menu
Page position – if you have ticked the box above, this option will appear. Here you can select from the drop down list where you would like this page be placed in your store – it can be a ‘Root page’ or a ‘Sub-page’
Display order – Enter a number here to reflect the order in which you want this page to appear in the navigation menu. For example, if it is a ‘Root page’ and you enter ‘1’ it will appear as the first page in your navigation menus
Click ‘Save details’ and move onto the SEO tab.
SEO
Completing this section for each of your pages will help to improve your store’s ranking on search engine results pages:
Meta keywords: Meta keywords are a brief and concise list of the most important themes about this page. When someone uses a search engine to find a website, the search engine will use the meta keywords to match up the most relevant websites – meta keywords aren’t visible to visitors, though. When deciding what your meta keywords should be, scan through your pageand make a list of the most important terms you have used. Pick around10 or 15 that most accurately describe the category’s topic.
Meta description: A meta description should be a brief and concise summary of your page, and will be used on search engine results pages. When you write a meta description, limit it to 170 characters or 200 characters at most. Again, think about the words and phrases you expect your visitors to search for in order to find your page and incorporate these.
Meta title: A meta title will be seen in the browser bar across the top of a web page. When you are deciding what your meta titles should be for this page, think about the key terms you expect your visitors to searchfor and try to incorporate these. You can have up to ten words in atitle but try and limit them to 65 characters (including spaces). Alsotry to put the most important words at the beginning.
Click ‘Save details’, followed by ‘Go back’ to return to ‘Website pages’ – you will see this edited page is in the list. Click the ‘Build page’ button to be taken through to the ‘Page builder’.
Using the ‘Page builder’
On the right hand side of the 'Page builder' screen you’ll see six different boxes, called ‘drop zones’, which represent this particular web page. You will be able to add your chosen content and widgets to the drop zones – they appear here on your store:
(A) Upper content drop zone
(B) Left column drop zone
(C) Middle column drop zone
(D) Right column right zone
(E) Lower content drop zone
(F) Footer drop zone
On the left hand side of the ‘Page builder’, you will find the ‘Widget toolkit’. Here you will see a number of different widget categories, within which you will find a selection of widgets for you to choose from. Simply click on the widget you want to add, then drag and drop it into a drop zone – you can add as many widgets into each drop zone as you like and move their order and position around to suit you. By clicking on a widget, you will see a number of options:
• Change the size of your widget, by clicking on a number under ‘Widget size’ (‘1’ being smallest and ‘4’ being largest)
• If you ever want to remove a widget from a page, click the ‘Delete’ button
• Some widgets also have a ‘Edit’ button to customise them even further – you can find out more about each widget by clicking here
Page types
With ‘Page types’, you can create templates that will be applied across certain groups of pages. So for example, you can create a template that will be used for all your category pages and another for all product pages. When you click on the ‘Page types’ tab, you will see a list of all your different page groups. You can use the ‘Edit’ and ‘Build page’ buttons in exactly the same way as ‘My pages’ – which also means you can also add as many widgets to your page types as you like!
Please note: Not all of these pages are visible on your website – for example, ‘News’, ‘News Archive’, ‘Blog’ and ‘Blog post’, will only be visible if you have enabled them in the ‘News’ section..