Overview of Fluid Experience

From FluidRetailWiki

Contents 1 Overview 2 Define Interactive Merchandising Strategy 2.1 Product Imagery Based Merchandising 2.1.1 Display Features and Functionality 2.1.2 Merchandiser Features and Functionality 2.1.3 Typical merchandising strategy using product imagery based components: 2.2 Brand Imagery Based Merchandising 2.2.1 Hotspot Media Features and Functionality

Overview

Fluid Experience empowers merchandisers with the latest conversion-driving interactive merchandising solutions with minimal IT involvement. This document provides an overview of key functionality and the implementation process.

Implementation is comprised of the following steps:

1. Define interactive merchandising strategy
2. Design merchandising elements and build templates
3. Import, process and deploy assets in Fluid Experience
4. Embed components in HTML and configure

Define Interactive Merchandising Strategy

In the context of Fluid Experience, merchandising components fall into two distinct categories:

• Product Imagery Based Merchandising - These elements are based on product images and therefore the publishing process should be tightly integrated to normal inventory updates and require a minimum of additional effort. Examples of these include:
  • Zoomable product displays with multiple views on the product detail page.
  • Recently viewed scroller on product detail page
  • Static images for category pages, etc.

• Brand Imagery Based Merchandising - These elements are comprised of promotional banners and other assets made specifically for category and homepage promotions. Typically, these assets are authored and published directly in the Fluid Retail admin tools on a one-off basis.

We'll discuss these two types of assets separately in this guide.

Product Imagery Based Merchandising

Core to Fluid Experience is the ability to accept a single high-resolution source image and process it for use in a wide variety of contexts. We call this Product Imagery Based Merchandising.

These presentations are created using Fluid Experience Display and Merchandiser modules:

Display Features and Functionality

• Zoom types:
  • External magnifier
  • Internal magnifier
  • Progressive zoom (also know as Click and Pan)
  • Hotspot (requires manual placement)

• Multiple variations (colors, finishes or fabrics)
• Multiple views
• Rotation
• Real-time text personalization
• Dynamic text and graphic overlays

Example: click and pan zoom with multiple views:

Additional examples can be found on the Fluid Website

Merchandiser Features and Functionality

• Transition types:
  • Scrolling
  • Crossfading
• Item types
  • Images
  • Rich text
  • Buttons
• Transition buttons - Provide as PNG assets with transparent background, up/over states
  • Thumbnails for paging - Provide inner/outer border for up, over and selected states.
• Populated via XML using:
  • JavaScript
  • URL
  • NOTE: These datafeeds are provided by the e-commerce platform, recommendation engine, etc.
• Track Recently Viewed items automatically with Display

Example: Dynamic cross-sell scroller:

Typical merchandising strategy using product imagery based components:

• Product Detail Page
  • Interactive zoomable product display with color change and multiple views
  • Recently viewed items scroller
  • You might also like (cross-sell) scroller

• Category Page
  • Static images for category thumbnails
  • Persistent recently viewed item scroller
  • "Top Sellers" scroller using feed from recommendation engine or e-commerce platform

• Home Page
  • Persistent recently viewed item scroller
  • "Top Sellers" scroller using feed from recommendation engine or e-commerce platform

Learn more about Product Imagery Based Merchandising: Designing merchandising elements and building templates

Brand Imagery Based Merchandising

In addition, marketers can use Fluid Experience to add interactivity to their static images and banners and place one or more in a single piece of page real estate. Typical uses:

• Homepage
• Category page

Example: Shoppable lifestyle imagery embedded within a Fluid Experience merchandiser:

Hotspot Media Features and Functionality

Hotspot media (shoppable lifestyle imagery, brand based imagery can be configured as follows:

• Anchors - Anchors are typically arrow-like assets that are persistent on a hotspot media image indicating that a tooltip exists. They are optional and be omitted on either a template or hotspot by hotspot basis. Anchors should be provided in PNG format with transparent background. Up and over states should be included. If directional, you can optionally include assets for left, right, up and down.
• Tooltips - Tooltips can be configured as follows:
  • animInTime="500" - Tooltip fade-in speed, in milliseconds.
  • animOutTime="1000" - Tooltip fade-out speed, in milliseconds.
  • cornerRadius="5" (pixels)
  • outerBorderWidth="0" (pixels)
  • outerBorderColor="0xFFFFFF"
  • borderWidth="0" (pixels)
  • borderColor="0xFFFFFF"
  • fill="0xBDD630"

• • default font face, color and size.
  • fillAlpha="70" (percent)
  • dropShadowAlpha="0" (percent)
  • dropShadowXOffset="0" (pixels)
  • dropShadowYOffset="0" (pixels)