Editing Personal Shopper

Introduction

Upon clicking "Create" or "Edit" on one of your Personal Shoppers you will see a full-page editor (Figure 1). The editor comprises four main sections:

Top navigation bar — Basic editor-wide controls
Section sidebar — List of all sections of the shopper for easy navigation
Preview area — View of the current state of the shopper
Settings sidebar — Contains all settings and customization options for the shopper

The top navigation bar contains all the editor-wide controls for the Personal Shopper editor (Figure 2):

Back button closes the editor.
Status badge indicates whether version of the Personal Shopper you are editing is "Published" or in "Draft" state.
Preview toggle switches between "preview" and "selection" mode. In preview mode you will be able to interact with the Personal Shopper as you would on your site. In selection mode, when clicking on the Personal Shopper you will select components.
Breakpoint toggle changes the preview area between three different sizes: desktop, mobile, and full screen.
Undo and redo buttons
Primary actions of the editor. "Preview" initiates the Live Preview functionality. "Publish" will save and publish the current working version of the Personal Shopper to your site. "Save" will save the current working version of the Personal Shopper but does not update the live version on your site.

Live Preview

By clicking the "Preview" button in the top nav bar, you will access the "Live Preview" feature of the Personal Shopper editor.

Live Preview allows you to view the version of the Personal Shopper shopper you are editing live on your site without having to Publish. In order to use this feature the working version of the Personal Shopper must be saved.

To use Live Preview you will have to enter a URL and Embed Selector. The URL must on a domain you have the Fanplayr Targeting script running on. By default the URL will be the same as the "Embed URL" defined in the General Settings.

You will also need to add an Embed Selector is used to target an element on the page in which to append the Personal Shopper. The system will then generate and display a URL; click and preview the Personal Shopper.

Previewing the Personal Shopper gives you the ability to see what the shopper would look like on your site before making it available to all your users. This allows you to fine tune the look and feel of the Personal Shopper before Publishing.

Section Sidebar

On the left side of the editor is the Section Sidebar. This provides easy navigation between sections of the editor. Click each section to automatically scroll the preview area to the specific section and edit the component's settings. You can click on the left side of each section and drag it up or down to move it around the shopper.

At the top of the sidebar is a link to the "General Settings". Clicking this will allow you to edit some generic configuration for the shopper. See Settings Sidebar for more info.

Adding a Section

Click the "Add Section" button in the sidebar to select a new component to add to your shopper.

Select a component in this list and click "Add" to append a new section to the end of your Personal Shopper.

Viewing Errors / Issues

At the bottom of the Section Sidebar there is an indicator which shows how many issues that may prevent publishing are present in your Personal Shopper. Clicking the indicator will show more information about any issues and how to resolve them.

Preview Area

The main part of of the Personal Shopper editor is the preview area. It is a responsive view of your Personal Shopper that gives you an indication of how it will look on your site. By default, the preview is in "selection" mode (see Navigation Bar) which means that you can highlight and select individual sections to view and edit their settings.

Settings Sidebar

The settings sidebar is on the right side of the editor and is where a majority of the customization of the Personal Shopper is done. There are two groups of editable settings in the sidebar: "General Settings" and "Component Settings".

General Settings

If "General Settings" is selected in the left sidebar, the settings sidebar will consist of the Personal Shopper's general configuration.

The primary setting group in "General Settings" is the "Widget Level Config". These settings inform the system where to render the personal shopper. There are two settings that control this:

Embed URL — This is the URL on your domain in which the system will try to render the personal shopper once published. This string can include wildcards (*) so that the shopper can be used on more than one URL.
Embed Selector — This is the CSS element selector that will be used to find the element to which the shopper will be appended.

The remaining general settings consist of various shopper-wide styling including base font size and color, heading font sizes, and overall background color. Also, there is a setting called "Global CSS" that allows advanced users with knowledge of CSS to write CSS that will be applied to the whole shopper.

Component Settings

If a specific component is selected, the right sidebar will consist of all settings for the selected component. For example, in Figure 8, a product recommendation component is selected.

Each component will have its own unique set of settings to customize the look and feel of the component. Each setting will only apply to that specific section. For example, if you set the "Default Text Align" setting for one product recommendation component, it will not impact the same setting on any other product recommendation components.

Like with "General Settings", every component will have a "Custom CSS" setting that advanced users can take advantage of to further customize their components.

Product Source

The most crucial setting for any product recommendation component is the "Product Source". This setting's value informs the system which products to show in the component. Clicking "Change" in the setting editor will bring up the popup in Figure 9.

The specific settings here can depend on the model selected, but they generally boil down to the following four settings:

Model — Controls the algorithm used to generate the list of products
Product List — This is the list of products that the selected algorithm can source its products from. This can be used to limit your recommended products to just products on sale for example.
Minimum Items — Minimum number of items in order to render the product recommendation component
Product Limit — Maximum number of products to show in the component