Table Of Contents

Description
Create a Lookbook
Manage a Lookbook
Settings
Template Areas

Once installed, and your first slideshow (a.k.a. lookbook) is built and activated, the Homepage Slideshow Manager app will display the slideshow when users visit your webstore’s homepage.

The Homepage Slideshow Manager allows you to build and administer multiple lookbooks that can be scheduled to display on your homepage during specified dates (and date ranges).

Follow instructions in Lightspeed eCom to purchase the Homepage Slideshow Manager app from the App Marketplace.

During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list (see Exhibit A), which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops. To manage this app, click on it's name "Homepage Slideshow Manager" under the appropriate shop. This will take you to the Homepage Slideshow Manager’s settings form.

Under settings, you can control the following:

1. Show - Tell the system how to determine which lookbook should load to show on your webstore’s homepage. This defaults to “Lookbook Determined by Date Schedule”, meaning the schedule you setup will determine which lookbook loads, but you can set this to “Default Lookbook”, meaning the schedule will be ignored and the homepage will only load the Default Lookbook you’ve selected.
   
   
2. Default Lookbook - If “Show” is set to use the schedule, but no lookbook is currently scheduled to show, or “Show” is set to “Default Lookbook”, then this Default you setting will be the lookbook shown on your homepage.
   
   
3. Position - Determines where on the homepage your lookbook will load. Currently the options are:
   1. Above Header (default) - will attempt to show the lookbook above/before the header section in your theme
   2. Below Header - will attempt to show the lookbook directly below/after the header section in your theme

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

The next step in setting up your Homepage Slideshow app is to setup your first lookbook. Lookbooks (also called slideshows) are the banners/images/content that display on your webstore. You can setup multiple lookbooks in your account, and within each lookbook setup unique content to show your customers. To start, click the “Lookbooks” link in the menu (see Exhibit B), which will take you to a page that will list any existing lookbooks you have setup in your account.

Create a Lookbook

To build a new lookbook, click the “Create a New Lookbook” button, which will load the form to start a new lookbook. In this form, simply fill in the “Title” (name of the lookbook so you can easily identify it, not shown publicly) and “Choose a Template” to use for the lookbook. The template you choose determines what the lookbook display will look like (i.e. where and how images and content will show). Once done, click “Save”. On save, the lookbook will be created and you’ll be forwarded to the lookbook edit page to manage its settings and content.

Manage a Lookbook

When managing a lookbook, at the top you can change the basics, like “Title” (name of the lookbook, something unique so you can easily identify which lookbook is which) and, under “Select a Template”, if you want to change the template the lookbook is using, simply click on the template to change it.

Under “Current Template”, you’ll see a larger display of the template layout along with the preview link. Click the preview link to view the lookbook as it would show in your webstore’s homepage (handy to see the content as you work on it).

Below the basics, you get into the lookbook’s settings and template areas for manage the content the lookbook will display.

Settings

There are system settings that are available for all lookbooks (General, Thumbnails, Arrows, Maps), but there may also be template specific settings (i.e. settings specific to the template you’re using for the lookbook). If you want to edit a setting, simply uncheck “Use Default” and change the setting. Some of the system settings for lookbooks include:

1. General
   1. Background Color - set the background color of the lookbook display area (may not show after lookbook loads if images or content on top is filled in with another color)
   2. Loading Icon Color - set the color of the loading icon that shows when the lookbook is loading for the user (can take time for lookbook content to load depending on connection speed, image/content size, server availability, etc.)
      
      
2. Thumbnails (used if you set thumbnails to show for any areas in your lookbook; see “Template Areas” section below for more information)
   1. Thumbnail Width - set the width you want thumbnail images to show. Default = 50
   2. Thumbnail Height - set the height of thumbnail images to show. Default = empty (i.e. variable/dynamic)
   3. Active Thumbnail Border Color - if you have multiple images in an area, the image currently showing is “Active”. The corresponding thumbnail for an activate image can show a highlighting border color . Default = white
   4. Background Overlay Color - set the background color for the thumbnails to display on (most templates show thumbnails on top of the active image, so the background overlay is semi-transparent to not completely block the image display behind it). Default = Black at 40% Opacity
      
      
3. Arrows (used if you set arrows to show for any areas in your lookbook; see “Template Areas” section below for more information)
   1. Background Color - set the below color of arrow buttons
   2. Arrow Color - set the color of the arrow icon in the arrow button
      
      
4. Maps (used if you create an image maps on the images in this lookbook; see “Image Mapping” section below for more information)
   1. Popup Background Color - if you provide popup information for a map, this sets the background color of those popups
   2. Popup Text Color - if you provide popup information for a map, this sets the color of the text in those popups

Common template settings may include a “Footer Text” section (most lookbook templates include a Footer Text section for improved SEO) in which you can apply specific background and text colors and padding.

Make sure to click “Save” after making any changes to a lookbooks settings.

Template Areas

This is where you manage the different areas of content that are used by the template you’ve selected for your lookbook. There are two types of areas: image areas and text areas. Most templates include at least one image area (usually called “A” or “Area A”) and at least one text area (usually called “Footer Text” for SEO rich text to show directly below the image areas). However, each template is unique and can have more areas for content to display.

Image Areas

When working in an Images area, you see the name of the area (usually lettered, like “A”, “B”, “C”, etc.) along with the area’s size (in pixels) as a guideline to the size of images you should use in the area. For example, one of our standard templates includes an image area named “A” with a max width of 2000px and variable height (see Exhibit D), meaning any images you upload/add to that area should be 2000 pixels wide and whatever height you want.*

* A note on variable height: some template areas may have a variable height, indicating that the images you use for that area don’t have to have to be a specific height, but this doesn’t mean the height’s shouldn’t be uniform. It’s recommended that any images you use in area be the same size so the page doesn’t move or shift when the slideshow moves between images.

To add an image to an area, you can either click the “Search Images” or “Upload New Images” button. If you’ve previously uploaded an image into your account (on another lookbook) that you’d like to use in this area, using Search Images you can enter a keyword, click “Find” and click “Add” next to the image you want to use from the results found. When you add an existing image to an area, the image is resized (if needed) to fit in the area’s dimensions. If you need to upload a new image into your account and use it for this area, use Upload New Images to select the image file you want to upload. The file you select will be uploaded, resized (if needed) and added to the area.

Once an image is added to an area (see Exhibit E), there are several settings you can control:

1. Link - If you want the image to simply link to a URL, you can enter that URL into the link field
   
   
2. Rank - Determine the order that images in the area should display in (low to high; i.e. 0, 1, 2, 3, etc.)

If you want to remove an image from an area, simply click the “Remove” button next to that image. This will remove the image from the area, but the image will still exist in your account so if you want to use it again you can find it under “Search Images”.

There are several settings you can control independently in each image area of a lookbook:

1. Is Static - If you don’t what the image area to display the multiple images you’ve added in a slideshow, you can check “Is Static” for the area, then select from the “Static” column the image you want to show. Doing this will cause the image area to only load that one image for the area. Simply uncheck “Is Static” if you want the area to go back to working as a slideshow.
   
   
2. Show Thumbnails - If you want the area to show a thumbnail for each image in the area, simply check “Show Thumbnails”. See the Settings section above for information on thumbnail settings you can manage for the lookbook.
   
   
3. Show Arrows - If you want the area to show arrows (next/previous buttons) to allow the user to manually page through the images in the slideshow, simply check “Show Arrows”. See the Settings section above for information on arrow settings you can manage for the lookbook.
   
   
4. Timing - Set the amount of time (in seconds) that the slideshow should pause for each image (i.e. the time delay before automatically transitioning to the next image in the slideshow). Default = 1.0
   
   

Make sure to “Save” after making changes to any of these fields in an image area.

Additional features available for each image you upload to your account include “Captions & Translations” and “Maps”. To use either, click the appropriate link under the image in the lookbook area and see the below for detailed instructions on the use of each feature.

 
Captions & Translations

Captions and translation images are for multi-language support, allowing you to provide different captions and images (if you have text embedded in the image) based on the language the user is viewing your site in.

To manage an image’s captions and translations, click the “Caption & Translations” link below the image in the lookbook area, which will load a popup containing any existing captions, keywords or translation images.

In the captions and translations form, you can manage:

1. Caption - set the default caption for the image (used if no language specified)
   
   
2. Keywords - provided any keywords you want to use so you can easily find this image in the future (when using the Search Images feature in your account)
   
   

Lower in the form, you can manage the captions and translation images for each language you want to support. For each language, you can:

1. Upload a Translated Image - If the image you’re working on has text embedded in it, you should upload a version of the image with that text translated into the appropriate language. If there is no text in the original image, you can ignore this (no reason to upload a translated image if no text to translate).
   
   
2. Caption - provide a caption for appropriate language
   
   

Make sure to click “Save” after making any changes in the popup, you can then close to popup to go back to the edit lookbook form.

Maps (Image Maps)

Maps, aka Image Mapping, allows you to build hotspots for a specific image in a lookbook’s area. This means you can link to several different pages from the same image by “mapping” hotspots on the image to be clickable by the viewer.

To manage the maps of an image, click the “Maps” link below the image in the lookbook’s area. This will load the Map management view in a popup where you can edit existing map areas or create new ones.

To create a new map area, click “Add Map Area”, then with your cursor, click on the image where you want to start the map area. Moving over the image, click each time you want to place an “anchor” for the map area you are building. For example, if I want to create a square area, I’d need four corner anchors, so I’d start with a click in the upper left portion of the area I want to map, then move to the bottom left (click), then to to the bottom right (click), then to the top right (click). As you click you should see the area you’re building highlighted in an overlay, semi-transparent color. You should also see a new button at the top next to “Add Map Area” called “Finish Area”. Once you’re done laying out the anchors for the area you want, click the “Finish Area” button to complete the area you’re mapping. Once you click finish, you can no longer edit or add new anchors to that area, though you can move the whole area or resize it when you select it (to select an area, just click on it). Once you’re happy with the new area you’ve mapped, click “Save”. If you’re not happy with the area, select and you’ll see a button at the top labeled “Delete Map Area”, which you can click to delete the area and start over.

After you’ve mapped a new area and clicked “Save”, the popup will reload and show a list of “Image Map Areas”. This list includes any areas you’ve built into this image. Each map area has the following:

1. Link - If you want to link this map area to a particular page, enter the full URL in the link field.
   
   
2. Popup Information - If you want to build some popup content to show when a user hovers over the area, you can do so here. Click the “Popup Information” link to see the popup fields, include:
   1. Position - Determine where you want the popup to show. The positions with “Relative to Area” means the popup will show in the position you select in relation to the map area, whereas “Relative to Image” means the popup will position based on the relation to the image the map area is built on, NOT the map area itself. I.e. “Top/Left (Relative to Area)” means the popup would display to the top and left of the map area that’s being hovered over, but “Top/Left (Relative to Image)” means the popup would display in the upper-left corner of the image.
   2. Width - Set the pixel or percentage width you want the popup to display. For example, if you want the popup to be 200 pixels wide you’d enter “200px”, or if you want the popup to be a third of the width of the image enter “33%”.
   3. Horizontal Offset - If you want the popup to be offset by a certain amount, you can enter a pixel or percent value (i.e. 20px or 20%). The direction of offset depends on the Position field, so if Position is Top/Left, horizontal offset would be from the left, but if position is Top/Right, the offset would be from the right.
   4. Vertical Offset - If you want the popup to offset by a certain amount you can enter a pixel or percent value (i.e. 20px or 20%). The direction of offset depends on the Position field, so if Position is Top/Left, the offset will be from the top, but if Position is Bottom/Left, the offset will be from the bottom.
   5. Titles and Descriptions - For each language you support, enter the title and description you want to display in the popup. Descriptions do support HTML, though it’s only recommended if you know what you’re doing.
      
      

Make sure to click “Save” after making any changes in the Image Map popup. Once done, click the popup to return to the edit lookbook form.

Text Areas

The text areas in a lookbook are built to display text content instead of image slideshows. Most lookbook templates come with at least one text area, commonly a “Footer Text” area for SEO rich content. Text areas are not required to be filled in, if you do not want to use it simply leave the fields empty.

Within each text area, a rich text editor is displayed for each Language activated in your account. Fill in the content for each language you want to support. HTML is supported though it is only recommended for users that know what they’re doing.

Make sure to “Save” after making any changes to the content in a text area.