Accessing the Online Store
To manage the navigation and pages on your eCommerce site, and general setup, this is done from the Online Store tab of the main back office navigation. If you can't see an Online Store tab, go to Settings > Users then click your user profile. Under the Assign to store(s) section, ensure Online is checked. You'll need to save then logout of the back office and back in again to update the tabs.
Creating your navigation and pages
To add a new page, tap on the Home navigation item, then Add child.
Give the page a name, select a page type then tap Save to create the page. You can then add the page content. There are 9 page types:
1. Product collection page
A collection page displays a list of tiles that represent each child page. Select a 3, 4 or 5 tile layout:
The collection page will display the title, collection summary and collection image of each child page:
If a collection image is not added to each page, the tiles are displayed as coloured blocks:
To add a collection image, scroll to the bottom of the page that is a child of a collection page and add the image under the collection page section:
2. Product list page
A product list page displays a list of products from a particular category, sub-category, brand or tag assigned under the Products section.
Under the Products section, define the products you wish to display on the page. Search by product category, sub-category, brand or tag, select matching results from the dropdown list displayed. Multiple can be added to a page.
The Top products section to the right, enables you to override the the products that appear first in the product list. Search for a product by name, brand, category or tag. The first 10 matches will be displayed. Refine your search if there are many matches. Select a result to add it to the list. To change the order in which products appear, drag and drop the icon displayed to the left of each product.
3. Sale page
A sale page automatically displays a list of product that are included in a promotion or have been individually discounted from the product page.
4. Gift cards
A gift card page pulls through gift card created from Products > Gift Cards.
5. Blank page
A blank page are more text or image based pages for informal purposes.
6. Blog list page
Create a list page, you can then add blog articles as a child within the Blog list page.
7. Event list page
Create a list page, you can then add events as a child within the Event list page.
8. Redirect
A redirect page enables you to add an internal or external URL should you require a link to a page that exists elsewhere.
9. Brands A-Z
A brand page automatically generates a page for every brand assigned to a product. The brands are grouped by character and listed A-Z.
Navigation Hierarchy - Sibling and child pages
The main navigation appears as below:
A child page, is a page that appears when you hover or click on the main navigation:
To add a child page, select the page, click the 3 dots and click Add child. A further child can be added if required. For example, the navigation above is 3 levels deep; Bike Parts > Brake Parts > Bike Brake Pads.
Delete and unpublish pages
Select a page and click the 3 dots to publish/unpublish a page or delete a page. A page with a green strip indicates the page is published, red indicates unpublish. A page being unpublished is useful if you wish to create a page ahead of time but not publish it for a while.
Basic page information
To the basic information to each page:
Page name
Page title (H1)
Sub-title (H2)
URL - Auto-generated but editable
SEO meta title
SEO meta description
On a collection page, product list page and sale page, you also have the option to add a header image. The optimum image sizes are either:
1800px x 600px (aspect ratio 3:1) - Deep image
1800px x 360px (aspect ratio 5:1) - Shallow image
The title and sub-title overlays a header. The layout differs per eCommerce design:
Home content
Image carousel
To add a carousel item to the image carousel, tap the + icon. Add the carousel title, sub-title, button text and button URL link. Next add the carousel image, upload a 1800px x 600px (aspect ratio 3:1) JPG, the image crops and scales depending on device type so ensure the main focus is the centre of the image. To display the carousel item check Publish item then Save to update the changes.
Once saved the carousel title and preview image will appear. Tap the item to edit or delete it. Repeat the process to add another carousel item, up to 5 items can be added. To change the order in which carousel items appear, drag and drop the icon displayed to the left of each item.
Hero categories
To add a hero category follow the same process as the image carousel. Hero categories are displayed beneath the image carousel on the homepage and up to 6 can be added depending on your eCommerce design. Dimensions differ for each design and layout, we'll communicate these to you.
Icon bar
The icon bar (depending on your eCommerce site), is displayed beneath the image carousel. Select the background and foreground colour for the section then add the items to be displayed. Adding 3 items within the icon bar is preferred as the items are displayed within 3 columns. Follow a similar process as the carousel image, but ensure the image uploaded is either a PNG with a transparent background or has a background that is the same colour as the icon bar background colour chosen. Upload an image with a maximum height of 100px.
Featured products
Featured products can be displayed on your homepage. Add a title and sub-title then up to 12 products. Start typing the product name, a list of matching results will be displayed, select a product to add it to the featured list. To change the order in which products appear, drag and drop the icon displayed to the left of each product.
Delivery & returns / policy content
Please ensure all policies are added from Online Store > Site Structure, then scroll to the bottom and you'll see 4 pages. Here's 4 example templates to get you started if you need them:
Click the "+" button and select the text editor control, then the full width option to add the text.
Contact page content
Ensure the Store name is selected. This appears as the stores setup from Settings > Stores. Select the Store name(s), rather than the Online option, as it pulls through the store name, address, contact details, and opening times. This information is displayed in the footer and the contact page.
On this page, also specify which email address you wish contact form enquiries and online orders to go to.
Adding content to your pages
To add content to a page, tap "+" then select one of 7 content types:
Accordion
Gallery
Product slider
Carousel
Text editor
Image slider
Video
Here's a definition of each content type. Page content can be added to all pages.
Once a content type is added, select Full width to display the section as full width on the eCommerce site, and select Publish if you are ready to display the section of the eCommerce site. Tap to delete the section. A dialogue will ask you to confirm deletion.
Once many content types have been added, the order of appearance can be changed by tapping the β¬β¬ icons to the left of each control to re-order their order of appearance.
β