Grocerly Theme

A Light coloured theme featuring various product placement options, optimised for the retail of groceries and other food products.

View the example store

Contents

• Installing the theme
• Home Page
  • Banner Collections and Products
  • Tabbed Carousel Collections
  • Featured Collections
  • Display Collections
  • Parallax Collection
• Footer
  • Footer: First Menu
  • Footer: Second Menu
• Product Page
  • Banner Image
  • Product Subtitle
• Collection
  • Home Banner Image
  • Collection Subtitle
  • Parallax Image
  • Collection Banner Image

Installing the theme

1. Open Design in the Lifeboat admin interface
2. Click on Install Theme
3. Find the Grocerly Theme
4. Click install
   Once installed the theme will be listed underneath the theme preview
5. Click on Actions
6. Click on Make Default

Home Page

Banner Collections and Products

In Grocerly, you may have up to 2 collections and 2 products that are used as banners on the home page.

1. Open Design in the Lifeboat admin interface
2. Click on Customise
3. Choose up to two collections and/or up-to two products to be shown, in the Custom Fields labelled 
   • Home: Banner Collection 1
   • Home: Banner Collection 2
   • Home: Banner Product 1
   • Home: Banner Product 2
4. Click Save

Carousel Collections

Underneath the Banner section, you may have up to 4 collections in a tabbed carousel, shown as a carousel with tabs to choose the different collections. To add these;

1. Open Design in the Lifeboat admin interface
2. Click customise
3. Select the Collection to show in the field labelled; Home: Carousel Collection 1
4. Repeat step 2 for;
   • Home: Carousel Collection 2
   • Home: Carousel Collection 3
   • Home: Carousel Collection 4
5. Click Save

Featured Collections

In the Grocerly theme, you can have up to 3 collections to be featured together on the home page underneath the tabbed carousels. To select these collections;

1. Open Design
2. Click on Customise
3. In the field labelled Home: Featured Collection 1 select the collection to load products from
4. Repeat step 3 for;
   • Home: Featured Collection 2
   • Home: Featured Collection 3
5. Click Save

Display Collections

These sections enable you to have a carousel of products from up to two collections of your choice.

1. Open Design
2. Click Customise
3. Scroll to the custom fields labelled Display Collection 1, Display Collection 2
4. Select the collections you would like to show in these sections
5. Click Save

Parallax Collection

In between the two Display Collections, you can have a parallax section featuring a collection. To do this;

1. Open Design
2. Select the collection you'd like to show in the field labelled;
   • Home: Parallax Collection
3. Click Save

Footer

In the footer section, you can have two custom menus.

Footer: First Menu

1. Open Design in the Lifeboat admin interface
2. Click on Customise
3. In the field labelled Footer: First Menu select a menu that will be used on the middle left-hand side of the footer.
   Note
   

   The Menu title is used as the header in the footer.
   Submenus are not supported.

4. Click Save

Footer: Second Menu

1. Open Design in the Lifeboat admin interface
2. Click on Customise
3. In the field labelled Footer: Second Menu select a menu that will be used in the middle of the footer.
   Note
   

   The Menu title is used as the header in the footer.
   Submenus are not supported.

4. Click Save

Map Location

The Grocerly 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;

1. Open Design in the Lifeboat admin interface
2. Click on Customise
3. Enter your shop's name and full address in the field labelled Map Location
   1. Get the shop's full name (1) and address (2) from Google Maps as shown below 
   2. Input them as shown below in the field Map Location
4. Click Save

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.

1. Open Products
2. Click on the Product you'd like to edit (open for editing)
3. In the field labelled; Banner Image upload the image you'd like to use
4. Click Save

Product Subtitle

A product may have a subtitle that is visible in the Home banner section on the home page. 

1. Open Products
2. Click on the product you'd like to edit (open for editing)
3. Enter a subtitle in the field labelled; Product Subtitle
4. 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.

1. Open Collections
2. Click on the Collection you'd like to edit (open for editing)
3. In the field labelled; Collection Banner Image upload the image you'd like to use
4. Click Save

Collection Subtitle

A collection may have a subtitle that is visible in the banners. 

1. Open Collections
2. Click on the Collection you'd like to edit (open for editing)
3. Enter a subtitle in the field labelled; Collection Subtitle
4. 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.

1. Open Collections
2. Click on the Collection you'd like to edit (open for editing)
3. In the field labelled; Parallax Image upload the image you'd like to use
4. Click Save

Collection Banner Image

In each Collection, you may specify a banner image to be used on the Collection page.

1. Open Collections
2. Click on the Collection you'd like to edit (open for editing)
3. In the field labelled; Collection Banner Image upload the image you'd like to use
4. Click Save