Runner Theme
Runner is a theme with dark accents, perfect for sports retail.
View the example store
Contents
- Installing the theme
- Home Page
- First Product Banner
- Display Collections
- Featured Collections
- Second Product Banner
- Product Grid
- Footer
- Contact Page
Installing the theme
- Open Design in the Lifeboat admin interface
- Click on Install Theme
- Find the Runner Theme
- Click Install
Once installed the theme will be listed underneath the theme preview
- Click on Actions
- Click on Make Default
Home Page
First Product Banner
In Runner, you may have up to 2 products that are shown in a Banner carousel, shown as soon as the site is opened. To select these products:
- Open Design in the Lifeboat admin interface
- Click on Customise
- Choose up to two products to be shown, in the Custom Fields labelled
- Home: Banner Product 1
- Home: Banner Product 2
- Click Save
Display Collections
You may have 2 separate Display Collections on the home page, which are shown in different parts of the page.
- Open Design in the Lifeboat admin interface
- Click customise
- Select the Collection to show in the field labelled; Home: Display Collection 1
- Repeat step 2 for;
- Home: Display Collection 2
- Click Save
NoteDisplay Collection 1 is shown right after the First Banner, whilst Display Collection 2 is shown after the featured collections.
Featured Collections
In the Runner theme, you can have up to 4 collections to be featured together on the home page in between the two Display Collections. To select these collections;
- Open Design
- Click on Customise
- In the field labelled Home: Featured Collection 1 select the collection to load products from
- Repeat step 3 for;
- Home: Featured Collection 2
- Home: Featured Collection 3
- Home: Featured Collection 4
- Click Save
Second Product Banner
The second Product Banner is shown underneath the second Display Collection on the home page. To choose the product for this banner:
- Open Design in the Lifeboat admin interface
- Click on Customise
- Choose the product to be shown, in the Custom Field labelled Home: Banner Product 3
- Click Save
Product Grid Collections
Right after the second banner, you can have up to 3 collections to be shown in a Product Grid, which is 3 columns, containing a collection each, displaying up to 4 products from that collection. To choose these collections:
- Open Design
- Select the collections you'd like to show in the fields labelled;
- Home: Product Grid Collection 1
- Home: Product Grid Collection 2
- Home: Product Grid Collection 3
- Click Save
Footer
In the footer section, you can have a custom menu.
Footer: Menu
- Open Design in the Lifeboat admin interface
- Click on Customise
- In the field labelled Footer: Menu select a menu that will be used in the middle of the footer.
NoteThe Menu title is used as the header in the footer.
Submenus are not supported.
- Click Save
Contact Page
Map Location
The Runner theme gives you the option to have a map with the store's location on the site, specifically in the Contact page. To do this;
- Open Design in the Lifeboat admin interface
- Click on Customise
- Enter your shop's name and full address in the field labelled Map Location
- Get the shop's full name (1) and address (2) from Google Maps as shown below
- Input them as shown below in the field Map Location
- Click Save
NOTE:
It is important to enter the shop's name and address exactly as it is shown on Google Maps. You can follow the steps and screenshots below.
And the result should be as follows.
Product
Banner Image
In each Product, you may specify a banner image to be used on the Home page, if the product is selected to be shown in the banner.
- Open Products
- Click on the Product you'd like to edit (open for editing)
- In the field labelled; Banner Image upload the image you'd like to use
- Click Save
Product Subtitle
A product may have a subtitle that is visible in the Home banner section on the home page.
- Open Products
- Click on the product you'd like to edit (open for editing)
- Enter a subtitle in the field labelled; Product Subtitle
- Click Save
Collection
Home Banner Image
In each Collection, you may specify a banner image to be used on the home page, if the collection is chosen to be featured in the banner.
- Open Collections
- Click on the Collection you'd like to edit (open for editing)
- In the field labelled; Collection Banner Image upload the image you'd like to use
- Click Save
Collection Subtitle
A collection may have a subtitle that is visible in the banners.
- Open Collections
- Click on the Collection you'd like to edit (open for editing)
- Enter a subtitle in the field labelled; Collection Subtitle
- Click Save
Parallax Image
In each Collection, you may specify a parallax image to be used in the Parallax section in the home page, if the collection has been chosen as such.
- Open Collections
- Click on the Collection you'd like to edit (open for editing)
- In the field labelled; Parallax Image upload the image you'd like to use
- Click Save
Collection Banner Image
In each Collection, you may specify a banner image to be used on the Collection page.
- Open Collections
- Click on the Collection you'd like to edit (open for editing)
- In the field labelled; Collection Banner Image upload the image you'd like to use
- Click Save