FLUID
Fluid Configure User Guide

# Fluid Configure User Guide

# Intro

Fluid Configure is a robust, web-based suite of tools built specifically for creating and managing virtual product customization experiences. Visitors to a retailer's website (customers) interact with customizable products using an all-javascript, fully styleable instance of the Configurator; an interface to interact with Configurable Products embedded directly on the retailer's website. Products are created as photo-realistic product models, and managed through the Configurator Admin Tools (Admin Tools). Admin Tools are a hosted "dashboard" where teams have fine-grained control over the details of Configurable Products such as colors, materials, product components, and lots more.

With the powerful facilities provided by Admin Tools for managing configurable products, a necessary degree of new learning is required. Don't worry! The most significant part of understanding how to use Admin Tools is understanding the language, covered thoroughly in this guide.

Fluid works closely with the retailer to develop 3D models or to integrate with the retailer's existing imagery platform (eg. Scene7). The 3D models created by Fluid will be installed with the Admin Tools account or Admin Tools will be configured to integrate with the retailer's existing platform.

# High Level Concepts

The terms used within Admin Tools are centered around the concepts of managing tangible products, and the individual pieces that make up that product or products. You've already been introduced to your first term - product models - the cornerstone of configurable products. Let's dive in and expand on the concepts around product models. We'll use a simple jacket as an example.

# Product Model

A product model refers to the digital representation of a product in its entirety. Similar to an architect designing a house - whereas the house would be the final product (or product model) - our jacket would be referred to as a "jacket model".

# Components

Product components refer to the individual parts that make up a whole product. Components are defined as separate pieces and combined through the model. For example, our jacket could have a fleece component, a body component, and a zipper component as shown below (and many others like logo, sleeves, lablel, etc...)

Composed together, all four components make up the jacket product model.

||

# The "How?" Behind Configurable Products

Bearing in mind that a product model is the aggregate of several product components, conceptually it is easier to consider a configurable product as an object with customizable components. Building on that concept, imagine all the scenarios we can accommodate with a powerful set of tools to control the product components and how they relate with each other.

The Admin Tools give us a robust visual interface for:

• Defining the exact details of product components (color, pattern, texture, etc.),
• Theming the interface users will see when configuring a product,
• Configuring social sharing, and templates for how it should appear when a user shares what they've designed,
• Creating relationships between components and triggering actions based on user input (if a user chooses blue sleeves on our jacket, we can define a relationship/trigger that will automatically set the collar component to blue as well),
• Categorization of product attributes, to use for setting up filters and drill-down style choices for users

and much more. Throughout the rest of this guide, we'll dive deep into each category and more.

# Terminology Overview

Please note, this intro aims to provide a high-level conceptual overview of the core terminology prevelant throughout Fluid Configure. Each topic is covered in greater depth in a dedicated guide below, accessible through the menu on the left.

Common Terms and Abbreviations:

• Facets + Facet Values (FV)
• Attribute Values (AV)
• Value Sets (VS)
• Configurable Attributes (CA)
• Configurable Products (CP)
• Value Usage (VU)
• Sympathetic Attributes (SA) + Filters (SF)

Term definitions and related concepts are introduced below

# Facets + Facet Values

Facets are a powerful concept used throughout Admin Tools, which provide a categorization mechanism (like tagging) for Products, Configurable Attributes, and grouping of data. Facets make it possible to filter sets of data and to define behaviors based on classifications/tags defined by Administrators. Facets are name/value pairs. A Facet (eg. name: "Fabric"), can have any number of possible Facet Values (FV) ("Cotton", "Wool", "Linen"). Think of Facets as category types, and Facet Values as categories.

# Attribute Values

An Attribute Value (AV) is a choice available on a Configurable Attribute. For example, our jacket collar might have color choices red, green, or blue, which would be values of our Configurable Attribute.

# Value Sets

Attribute Values can be grouped together, into Value Sets (VS). When assigning Attribute Values to a Configurable Attribute, instead of assigning values individually to every Configurable Attribute, a Value Set can be assigned to link all values in the set to the Configurable Attribute. With the capability to assign Value Sets instead of individual Attribute Values, it becomes much easier to reuse Attribute Values across multiple Configurable Attributes.

# Configurable Attributes

In Admin Tools, the components of a jacket which can be customized would be its' Configurable Attributes (CA). Or, the attributes of any given component which are configurable.

# Configurable Products

A product that can be customized by an end-user is simply referred to as a Configurable Product. Configurable Products contain a list of Configurable Attributes (the components that have configurable options)

# Value Usage

Should there be special properties applied when a particular Attribute Value is applied to a Configurable Attribute? For each Attribute Value, special properties can be defined which will take effect only when a specific Attribute Value is applied:

• Vendor ID - This specific Attribute Value / Configurable Attribute combination is tied to a SKU
• Upcharge - Apply an upcharge when this Attribute Value is selected
• Pricing Description - Optional text to display when Attribute Value is selected
• Model Component - Should the Attribute Value apply to a different component as well?
• Associated View - Should the view of the model change when this Attribute Value is selected?
• Active - Toggle whether this Attribute Value should be offered for this Configurable Attribute

# Sympathetic Attribute + Sympathetic Filter

Sympathetic Attributes provide a way of creating relationships between one Configurable Attribute to another. With Sympathetic Attributes, the selections made for one Configurable Attribute can affect the selections of another. There are three types of Sympathetic relationships: Selector, Filter and Match.

• A Selector can pass the selected value made on the 'master' Configurable Attribute to one or more 'slave' Configurables Attributes.
• A Filter can narrow or expand the available selections for one or more 'slave' Configurable Attributes, based on the Facet Values associated with the selection made on the 'master' Configurable Attribute.

Consider an example where a user chooses yellow zippers, and we want to automatically trigger the logo to become yellow as well. With Sympathetic attributes, we have the capability to do so.

# Recipe & Starting Points

A Recipe is a saved configuration (current state) of a product. As a user interacts with the Configurator on a retailer's website, the choices of Attribute Values a user assigns to the product's Configurable Attributes compose a product Recipe. However - defining and saving a Recipe isn't strictly an end-user function. With Starting Points, Recipes can be defined directly in Admin Tools, and provide end-users with initial product templates.

# Localization

Admin Tools provides powerful internationalization tools through configurable Localization files, as well as currency conversion tables and number formatting.

# Image Rendering Engines

Fluid Configure allows for two different image renderers, via Reality Server's 3D modeling, and Adobe Scene7 Vignettes.

In addition, Fluid Configure allows to use your own images through the External Images option.

Note that only one of these three options can be used in a single Admin account.

# Reality Server

Reality Server uses custom built 3D models, and pre-renders the Configurable Product's two-dimensional component imagery. At runtime, component images are composited to create a complete image of the configured product. This compositing approach allows for building the the Configurable Product image on the client side, yielding more interactive behavior through the Configurator. Further, using Reality Server's 3D models has the advantage of more fully adjustable lighting and camera angles.

# Scene 7

Adobe Scene7 is a SaaS solution used for generating static images on the fly. Simply by altering the URL request, the composition and format of the resulting image can be updated.

Adobe Scene7 leverages a proprietary file format, called Vignettes (.vnt), to create configurable product images. These vignettes are essentially layered image masks whose content is interchangeable. The images/textures/colors substituted automatically have lighting and surface contours applied to them.

Fluid Configure uses the product configuration to assemble calls to Scene7 at runtime, and Scene7 uses static images to represent that design. When using Scene7, Admin Tools automatically adapts to the selected render strategy, displaying different properties relevant to building Vigenettes with Scene7.

Fluid Configure has integrated with this existing technology to offer a two-dimensional product configurator experience.

# External Images

For 2D rendering, if you already have all the necessary images hosted on a server. Fluid Configure can connect to this server and use your images.

# Next Steps

With a grasp on the high-level concepts of Fluid Configure, we recommend continuing on to the Facets guide. As mentioned, Facets are an integral and powerful part of working with Fluid Configure, and will be instrumental to properly defining and configuring a Configurable Product in Admin Tools.

# Configurable Products

The cornerstone of Fluid Configure, Configurable Products are the final entity which are displayed within an instance of the Configurator. Configurable Products are composed of Configurable Attributes, which are the individual components of a product that can be configured.

Its helpful to think of a Configurable Product as the bucket containing all the information about Configurable Attributes, how CAs are populated with values, and where relationships between CAs are defined.

# Primer

Before a Configurable Product can be viewed in a Configurator instance, it must be assigned to a _workflow (_workflows are covered in-depth in the Publishing guide). For purposes of this guide, remember the high-level concept:

A workflow resembles a folder to which Configurable Products can be published. A common scenario would be to have a Dev and a Production workflow, whereas the stable version of the Configurable Product would reside in the Production workflow, while incremental "test" publishes could go to the Dev workflow.

# Management Interface

Configurable Products (CP) are managed in the tab labeled "Configurable Products", fourth from the left under the top-level Configure tab. The Configurable Products interface displays a list of all existing CPs, as well as options to Add, view Details (Edit), Delete, and Clone. Notice in the CP table the information displayed for quick viewing: Vendor Id, Product Name, Workflow Status, and Published status.

The left "Narrow Items By" column contains a list of Facets which have been associated with any existing CP. The Facet checkboxes can be toggled to filter the list of CPs.

# Add, Edit, Delete, Clone

On the right side of the CPs interface, notice the following buttons.

To create a new CP, choose Add. To edit an existing CP, select it from the table list and click Details (alternatively, just double-click the table row to edit the CP). To remove a CP, select it from the table list and click Delete. The delete button should be used with caution, as the CP cannot be recovered once deleted. The system will provide warnings before proceeding with a delete.

The Clone button will create a verbatim copy of an existing CP. Once cloned, the new CP copy can be adjusted freely without affecting the original.

The process of creating and subsequently editing Configurable Products are expanded below.

# Creating a Configurable Product

As mentioned above, the interface for creating a new Configurable Product consists of the following basic inputs:

• Vendor Id: for most retailers, this would reflect the Catalog ID of the product. Field *is* validated for uniqueness.
• Product Name: visible name for the Configurable Product.
• Tooltip: hoverable text to display in tooltip (cannot be empty, but is not always displayed to end users)
• Description: short description of the Configurable Product
• Base Price: standard price of the product. The base price is used as the initial point, from which discounts and ad-hoc selections of other product properties can add upcharges.
• Discount: current discount for the product. Instead of adjusting the base price down, the Discount field should be used to apply temporary adjustments.
• Model: product model selection (eg. model "geometries"). Admin Tools accounts are prepopulated with models available to a retailer's account.
• Current Workflow Status: the workflow which the CP should be published to (details on workflows are extended in Publishing).

The Published checkbox can be toggled to manually indicate whether this CP has ever been published.

• Facets: CP can be categorized by assigning Facet/Value pairs. It is always recommended to apply at least one Facet, in order to help categorize the CP.

# Walkthrough Start

For this guide, we'll setup a new CP using the Wind Pro jacket from Wild Things as an example. We start with the following details. Note - the model Wild_Things_WindPro will not be available to other Admin Tools accounts. Accounts will always have at least one Model with which to create a Configurable Product; while following this guide, simply use a model available to your account.

Upon clicking OK, the main CP list will be displayed, and we'll now see our newly created product in the table. With the basic details of our CP in place, we're ready to further build out its' configurable properties.

Double-click the table row to view the Details of the Wind Pro Jacket product. The Details view (or the "edit" interface) will appear, with the Product Properties tab visible initially.

# Configurable Attributes

With the basic details of our Wind Pro Jacket CP in place, we'll focus on the most integral step of creating a Configurable Product: defining Configurable Attributes (CA).

Configurable Attributes (expanded in the Configurable Attributes) are the individual components of a CP that can be customized. In effect, a Configurable Product is simply the aggregate of a number of different Configurable Attributes.

For example, with our Wind Pro Jacket, we'll be able to customize the Shell, Side Panels, Zippers, Cuffs, and Logo. We'll need to create a Configurable Attribute for each.

# Creating a Configurable Attribute

Still in the Details view of our Wind Pro Jacket, click the Configurable Attributes tab. The list should be empty.

Click Add. The following window will appear, titled "Add Configurable Attribute".

Use the selected defaults and click OK. Another window will appear titled "Configurable Attribute Properties", with defaults filled in for the required fields. The number appended to the end is automatically determined based on the number of existing CAs in the CP.

• Vendor Id: recommended for use by the retailer with downstream systems. The Vendor Id is an optional field which can be used to pass pertinent data about the specific Configurable Attribute. *Not* validated to be unique. By convention, underscores should replace spaces.
• Label: text label visible to the end user. In the accordion pane of the Configurator, the Label of a Configurable Attribute is reflected as the accordion header.
• Description: optional text description of the CA. Can easily be displayed in the Configurator to end users.
• Tooltip: text to display on hover event of the CA label
• Alias: a text-friendly *unique* handle for the CA. Not displayed anywhere to end users. An alias provides an easy way to assign a human readable identifier to a CA. By convention, underscores should replace spaces.
• Active: toggle the CA on or off in the UI. It is recommended to *always* set Active status to on or off instead of deleting a Configurable Attribute. Setting to unchecked will make the CA disappear from the UI.
• Index In Catalogs: Allows indexing the attribute as a search filter when a recipe is saved by a user.
• Selector Type: how should selectable values for the CA be displayed? A dropdown presents the values as an html select list (the same style as the list being used to choose a Selector Type). Swatch presents the list as clickable swatch boxes (color previews or thumbnails). A checkbox will present the Configurable Attribute as a single checkbox. CAs that use a checkbox can have two values at max.
• Admin Selector Type: TODO
• Selector Class Name: assign css class names to the selector element. Good for customizing the styles via css / javascript.
• Swatch Width / Height: if selector type is set to swatch, the width and height of the swatches can be set. By leaving to zero (the default), swatch sizes will default to 25 x 25 pixels (pictured).
• Associated View: in the Configurator, when an end user focuses on a CA, force the view to change to a specific camera.
• CA Group: CAs can be assigned to one or more groups; groupings *can* influence the views to the end user in the Configurator.

# Walkthrough Continued

For purposes of building out our example Jacket CP, we'll create Configurable Attributes for the jacket shell, side panels, _and _zippers. Pictured below is the setup for the shell CA. The side panels and zippers are setup similarly.

With our three CAs setup, the sidebar of the Configurable Attributes tab will reflect the existing CAs.

With one or more Configurable Attributes defined, the next step is to build out the options, values, and relationships of the CAs. Notice that once a CA is defined and selected in the list, the extended setup options for the CA are displayed in an accordion pane on the right. Note that while CAs are covered below, a more thorough explanation of the functions performed by the setup options available to CAs are covered in the Configurable Attribute Guide.

The setup options available in the accordion pane cover many possible scenarios; in order to publish a minimal working version of a Configurable Product, not everything in the accordion panes requires configuration.

The accordion provides setup options for the following details of a CA:

Hierarchy Definition: manage the relationship between parent / child Configurable Attributes. CAs can be nested with parent / child relationships

Configurable Attribute Properties: main properties of the CA

Rendering Options: manage the geometry component to be configured. The model selected in the initial Configurable Product setup contains a list of "Model Components", which are made available to the Rendering Options list of choices.

Visibility Rules: determine visibility of the CA based on selections of other CAs. For example, the CA "Chest Pocket" could be set to appear only if a specific selection is chosen on the "Shell" CA. Visibility rules are mutually exclusive.

Value Sets: define which Attribute Values can be selected by the CA, by assigning Value Sets. Attribute Values are made available to the CA through Value Sets.

Value Usage: configure adjustments based on Attribute Value selections. For example, "add $10 if Attribute Value X is selected".

Sympathetic Attributes: create relationships between CAs based on Facets or Attribute Value selections. For example, a relationship could be created between the "Shell" CA and the "Zipper" CA, whereas selecting a specific shell color could trigger the zipper to change to the same color as well. In effect, a Sympathetic Filter controls one list based on a selection made in another list.

Facet Management: control the display of Facets for filtering purposes, and configure whether Facets influence an item number (eg. a SKU).

Z-Order: forceably layer sprites. "Z-order" is synonymous with the concept of the z-index CSS property.

# Walkthrough Continued

In order to create a minimum working Configurable Attribute, once the CA has been created, two more steps are required:

• Assign Model Component (in Rendering Options accordion pane)

Open the Rendering Options accordion pane, and click Edit. In the Model Component dropdown list, choose the component represented by the Configurable Attribute, then hit OK.

• Assign Value Sets (in Value Sets accordion pane)

Open the Value Sets accordion pane, and click Add. A modal window will appear with a list of Value Sets, as well as Facet Filters available on the left. To assign a Value Set, click to highlight it in the table, and hit Select. Only one Value Set can be assigned at a time.

# Configurable Attribute Groups

Configurable Attributes can be assigned to Configurable Attribute Groups. CA Groups influence appearance in the Configurator, whereas CAs are placed in independent accordions, based on group assignments.

In the Configurator, without any CA Groups, all CAs are displayed in one accordion group (based on top-down order from Admin Tools).

However, with CA Groups, the CAs are displayed inside of independent accordion blocks. Further, placing the CAs into groups allows for greater flexibility with determining visibility of specific CAs.

# Using Attribute Groups

CA Groups are managed in the Configurable Attribute Groups tab. CA Groups must be created before a CA can be assigned.

To create a new group, click Add. A name for the group is all that is required. Optionally, an Associated View can be set so that when any CA in the group is focused on, the view of the product in the Configurator switches to the associated view.

With the CA Group setup, head back to the Configurable Attributes tab, select a CA in the list, and open up the Configurable Attribute Properties accordion pane. Hit Edit, then click the Choose button next to the CA Group field at the bottom.

A Configurable Attributes Groups modal will appear. Click the check box for the Main group we just created to assign this CA to the group.

*Note*, CAs can only be assigned to one CA Group at a time.

# Views

Configurable Product Views are managed in the Views tab. By default, Configurable Product views are inherited from the views defined at the project level. By default, the list of views will be populated from the project views. However, views can be overridden in the Views tab interface for Configurable Products.

Cameras must be assigned to the views (cameras are defined in the Product Model), and views can be added or removed to accommodate specific Configurable Product definitions. Consider the scenario where cameras are available in one Configurable Product but not another.

Views only include associated Configurable Attributes. Naturally, different geometry is required for every view of a Configurable Attribute.

# Managing Views

To edit a view, select one from the table and click Edit. A modal window will appear with configuration options. Note: If Override Views is unchecked (the default), only the Camera Name field can be configured.

Before a Configurable Product can be published, at the minimum, a Camera Name must be assigned to all views.

# Views Load Order

View load order indicates to the embedded Configurator in what order it should start downloading assets for the different views. In order to make the Configurator "usable" as quickly as possible, its recommended to start with the default (normally the front view) first, then other views in order by which will most likely be viewed next in the rotation.

# Item Numbers

Frequently retailers will have a base SKU code that represents a Configurable Product (e.g., a jacket may have SKU "123"). However, a variation of the same jacket - say with a hood - may have a different SKU "123h". In the context of configurable products, its easy to imagine there being many SKUs required for different variations of a given product.

Primarily for the purpose of accommodating downstream systems, Fluid Configure has built-in support for tying unique Item Numbers (synonymous with SKU codes) to different product configurations as selected by customers. While customizing a product with the Configurator, if the mix of choices by the customer matches an Item Number stored in Admin Tools, that Item Number is accessible via the javascript API as data that can be passed to the E-Commerce and other downstream systems.

# Relationship With Facets

Recall that when a Configurable Attribute is created, a Value Set must be assigned to it. By creating an association between the CA and the Value Set, the CA automatically has a relationship with the Facet Values in use by the Value Set. In other words: the CA inherits whatever Facets are in use by the Value Sets assigned to it.

Item Numbers are composed of the Facet Values in use by a Configurable Product. However, not every Facet Value used by a CP necessarily influences Item Numbers. So Item Numbers are determined by opt-in use of Facets. Setting a Facet for use with Item Numbers is called "Influencing an Item Number".

# Usage

By default, the Item Numbers tab of a CP will be empty.

To assign a Facet for use with Item Numbers, navigate to the Configurable Attributes tab, select the CA (we'll use "Hood" for an example), and open the Facet Management pane.

With the "Hood" Facet selected, click Edit. In the last column "Influences Item Numbers", we'll set the drop down to "Yes".

Next, go back to the Item Numbers tab, and notice the table is now populated with two rows, corresponding to the Facet Values we have setup: "Yes" and "No". Now, we can assign specific Item Numbers to product configurations that have Configurable Attribute "Hood" set to either "Yes" or "No". Note: to set an Item Number, simply double-click the table cell underneath the column Item Number in the row corresponding to a Facet.

# Multiple Facets

Naturally, many retailers will have SKUs assigned based on multiple attributes of a product. For example, a jacket could have a SKU based on both the shell colors and whether or not it has a hood. Repeating the process of navigating to a Configurable Attribute, and setting "Influences Item Numbers" to Yes for more than one Facet will cause the Item Numbers tab to generate a table matrix with all the different possible combinations. Once the table is regenerated, Item Numbers can again be assigned based on the combinations of different Facets.

# Custom Settings

By default, Configurable Products inherit all settings aside from Configurable Attributes from the project defaults (ie. visible components, accordion settings, sharing settings, print templates, images, analytics, etc). However, all defaults inherited from the project settings can be overridden at the Configurable Product level, in the Custom Settings tab. The interface mirrors the contents of the Configurator Settings tab at the project level.

# Override Locations

Expanding on the concept of using Custom Settings to override project defaults at the Configurable Product level, we can take this a step farther and dictate custom settings based on specific URLs. Therefore, if an instance of the Configurator were to exist at more than URL, we could use settings for that specific URL.

To add an Override Location, navigate to the Override Locations tab and click Add.

In the modal window that appears, fill in the Location field with a fully qualified URL where an instance of the Configurator will reside for the Configurable Product. Then, URL-specific settings can be setup and saved.

# Configurable Attributes

Fully grasping the concepts of Configurable Attributes will be difficult without first reading the Configurable Products Guide.

A Configurable Attribute (CA) is an individual component of a Configurable Product. One or more CAs are attached to a Configurable Product, which together compose the configurable entities of a CP. For example, a jacket may have CAs "shell", "side panels", "pockets", and "zippers" - each of which can be customized in the Configurator.

As a customer is designing their product in the Configurator, the selections made on the Configurable Attributes of the given product become part of the Recipe.

# Management Interface

Configurable Attributes are created and managed in the Configurable Attributes tab of Configurable Products.

With a Configurable Product created (we'll continue with our Jacket example), double-click the CP to open the modal management window. Click the second tab labeled Configurable Attributes. If the product already has CAs configured, they will appear in the list on the left.

Similar to most other areas of Admin Tools, notice the buttons Copy To, Add, and Delete. For now, we'll just cover creating (via Add) and removing (via Delete) Configurable Attributes.

# Creating a New CA

Click Add. The following window will appear, titled "Add Configurable Attribute".

Use the selected defaults and click OK. Another window will appear titled "Configurable Attribute Properties", with defaults filled in for the required fields. The number appended to the end is automatically determined based on the number of existing CAs in the CP.

Vendor Id: recommended for use by the retailer with downstream systems. The Vendor Id is an optional field which can be used to pass pertinent data about the specific Configurable Attribute. *Not* validated to be unique. By convention, underscores should replace spaces.

Label: text label visible to the end user. In the accordion pane of the Configurator, the Label of a Configurable Attribute is reflected as the accordion header.

Description: optional text description of the CA. Can easily be displayed in the Configurator to end users.

Tooltip: text to display on hover event of the CA label

Alias: a text-friendly *unique* handle for the CA. Not displayed anywhere to end users. An alias provides an easy way to assign a human readable identifier to a CA. By convention, underscores should replace spaces.

Active: toggle the CA on or off in the UI. It is recommended to *always* set Active status to on or off instead of deleting a Configurable Attribute. Setting to unchecked will make the CA disappear from the UI.

Index In Catalogs: Include the attribute as a search filter when searching on the catalog.

Selector Type: how should selectable values for the CA be displayed? A dropdown presents the values as an html select list (the same style as the list being used to choose a Selector Type). Swatch presents the list as clickable swatch boxes (color previews or thumbnails). A checkbox will present the Configurable Attribute as a single checkbox. CAs that use a checkbox can have two values at max.

Admin Selector Type: TODO

Selector Class Name: assign css class names to the selector element. Good for customizing the styles via css / javascript.

Swatch Width / Height: if selector type is set to swatch, the width and height of the swatches can be set. By leaving to zero (the default), swatch sizes will default to 25 x 25 pixels (pictured).

Associated View: in the Configurator, when an end user focuses on a CA, force the view to change to a specific camera.

CA Group: CAs can be assigned to one or more groups; groupings *can* influence the views to the end user in the Configurator.

# Removing a CA

To delete a Configurable Attribute, first highlight it in the left column of the Configurable Attributes tab. Click the Delete button above the list. A confirmation box will appear asking whether or not to continue removing the CA. Pressing "OK" will remove the CA.

# Post-Creation Setup Options

Creating and using a Configurable Attribute requires more than simply clicking Add, and filling in the properties window. Once a CA has been created, there are a multitude of further setup options available. Notice the accordion pane that appears when a CA is selected from the list on the left. Note: not every area accordion pane requires further configuration for the CA to be in a minimum working state.

The accordion provides setup options for the following details of a CA:

• Hierarchy Definition: manage the relationship between parent / child Configurable Attributes. CAs can be nested with parent / child relationships
• Configurable Attribute Properties: main properties of the CA
• Rendering Options: manage the geometry component to be configured. The model selected in the initial Configurable Product setup contains a list of "Model Components", which are made available to the Rendering Options list of choices.
• Visibility Rules: determine visibility of the CA based on selections of other CAs. For example, the CA "Chest Pocket" could be set to appear only if a specific selection is chosen on the "Shell" CA. Visibility rules are mutually exclusive.
• Value Sets: define which Attribute Values can be selected by the CA, by assigning Value Sets. Attribute Values are made available to the CA through Value Sets.
• Value Usage: configure adjustments based on Attribute Value selections. For example, "add $10 if Attribute Value X is selected".
• Sympathetic Attributes: create relationships between CAs based on Facets or Attribute Value selections. For example, a relationship could be created between the "Shell" CA and the "Zipper" CA, whereas selecting a specific shell color could trigger the zipper to change to the same color as well. In effect, a Sympathetic Filter controls one list based on a selection made in another list.
• Facet Management: control the display of Facets for filtering purposes, and configure whether Facets influence an item number (eg. a SKU).
• Z-Order: forceably layer sprites. "Z-order" is synonymous with the concept of the z-index CSS property.

# Simple Examples

Continuing with the Jacket example, lets walk through the process of setting up Configurable Attributes. We'll start with a single Configurable Attribute, and add more as we go.

# Single Attribute Product

Lets start by creating a single Configurable Attribute for the jacket shell. Pictured below are the CA setup properties.

Notice the Shell CA is now displayed in the sidebar of the Configurable Attributes tab.

# CA Minimum Configuration

In order to create a minimum working Configurable Attribute, once the CA has been created, two more steps are required. With the CA seleced from the Configurable Attributes list, complete the following:

• Assign Model Component (in Rendering Options accordion pane)

Open the Rendering Options accordion pane, and click Edit. In the Model Component dropdown list, choose the component represented by the Configurable Attribute, then hit OK.

• Assign Value Sets (in Value Sets accordion pane)

Open the Value Sets accordion pane, and click Add. A modal window will appear with a list of Value Sets, as well as Facet Filters available on the left. To assign a Value Set, click to highlight it in the table, and hit Select. Only one Value Set can be assigned at a time.

# Single Attribute Results

With our single Shell CA defined, we'll publish the Configurable Product (see the Publishing Guide for details on the publishing process). Because we only have one CA defined, when we view the product in a Configurator instance, we'll only see one available Configurable Attribute. Notice that the model rendered only the Shell of the jacket; the zippers, side panels, and other components of the model geometry are missing because they have not been defined as Configurable Attributes yet.

# Facet Filtering

Recall that Attribute Values are assigned (or "made available") to Configurable Attributes through assigning Value Sets to the CA. By assigning Attribute Values to the CA, the Configurable Attribute automatically becomes aware of the Facets associated with the Attribute Values. Having Facets associated with the CA provides the option to configure Facet Filtering: the ability to narrow down Attribute Values, by selecting Facet Values, in instances of the Configurator.

The Facet Filtering method directly affects the display of Attribute Values in a Configurator instance.

Before diving in, lets step back through how a Facet becomes available as a filter on Attribute Values associated with a CA.

# Facet Setup and Relationship to CA

For example, we have a Facet named Fabric Grade, with FVs "Wind Stopper", "Water Resistant", and "Wicking". Starting from the top, the screenshot below shows the Facet "Fabric Grade" as configured with Facet Values.

Accordingly, we have Attribute Values that are members of one or more of the Facet Values (Wind Stopper, Water Resistant, or Wicking). In the screenshot below, notice the checkboxes have been activated for all three Facet Values in the left "Narrow Items By" column - indicating that the results displayed in the list all have at least one of the Facet Values assigned. Note: all of the Facet values displayed also are assigned the "Colors : All" Facet / Value pair, for organization purposes in Admin Tools (hence, why the "Colors" Facet is still displayed as a filter in the sidebar, even if unchecked).

Navigating back to our Configurable Product, highlighting the Shell CA, and expanding the Value Sets accordion pane, notice that we've assigned a Value Set named "All Colors" - which contains the Attribute Value members above.

Next, expand the Facet Management accordion pane. Notice the Facets listed, which the Attribute Values are members of.

# Facet Filtering Options

Now that our Configurable Attribute is aware of its' related Facets, we can configure Facet Filtering. The three methods available are Required, Optional, and Hidden. In the immediate screenshot above ("Facet Management"), notice the middle column of the table titled "Display Type". This column indicates the Filtering method in use for the Facet.

To change the Facet Filtering method, click the Edit button visible in the top right of the Facet Management accordion pane (again, see screenshot above). A modal overlay will appear, with dropdown menus available in the "Display Type" column.

To set the Facet Filtering method, simply select the desired method from the "Display Type" dropdown, and click Save.

# Facet Filtering Method Definitions, and Output

Required: The Facet Filter is forced _to be displayed. To see different Attribute Values, a Facet Filter selection is _required to be made. By default, the Configurator will display the Facet Filter as a dropdown menu (pictured below).

Hidden: Do not display this Facet as a filtering option. If no other Facet Filters are applied (eg. all other Facets are set to "HIDDEN" as well), a full list of the available Attribute Values are displayed for the Configurable Attribute.

Optional: Similar to Required, a Facet Filter dropdown menu is displayed, but the additional "All" option is available and selected by default. The "All" option is similar to "Hidden", such that every available Attribute Value is displayed (again, assuming there are no other Facet Filters applied). A Facet Filter can be applied, but is not mandatory.

# Personalization Overview

This section is simply an introduction to the concept of Personalization. The details of configuring Personalization are covered thoroughly in the Personalization Guide.

With truly customizable products, frequently its desirable to add Personalization touches - or custom embroidery. Fluid Configure provides extensive support for rendering text input on products; represented by "Text Attributes".

In the screenshot below, notice the options in the accordion pane under the Configurable Attribute "Custom Text", such that font family, color, size, and positioning can all be adjusted. Many more options are available.

# Copying Attributes

Configurable Attributes can be Copied or Linked from one Configurable Product to another. Consider a scenario where two Configurable Products have one or more similar Configurable Attributes. Instead of walking through the process of creating every single CA, the CAs can be setup on one CP once, and copied (or linked) to other Configurable Products.

# Copy vs Link

In both cases, a Configurable Attribute will be "cloned" from one Configurable Product to another.

Copying a Configurable Attribute will create a new, independent copy of the CA on a different CP. Changing either the original CA, or the copied CA will not affect the other. In other words, when a CA is copied to a CP, the copied CA can be freely modified without affecting the original CA it was created from, and vice-versa.

Linking a Configurable Attribute has a similar effect, such that a Configurable Attribute can be "cloned" to another CP. However, whenever the CA is updated in one location (on one of the CPs), the changes will propagate to any linked CAs. Updates can be made in both directions:

• The original CA can be modified, which will propagate the change to any linked CAs created from the original.
• Any of the linked CAs can be modified, which will propagate the change back to the original.

# Walkthrough

For purposes of this walk through, we've got two Configurable Products we're working with:

CA Copy Demo 1: A Configurable Product which already has a CA setup. The CA will be copied from this CP.

CA Copy Demo 2: A Configurable Product with no CAs setup, but that will have the CA from CP1 copied to it.

With CP 1 open and the Configurable Attributes tab visible, we highlight the CA we'd like to copy to CP 2 (named "Copy Me") and click the button Copy To.

A modal overlay will appear with a list of Configurable Products other than the current one, as well as Facet Filtering options on the left. Since we know we're going to copy the CA to CA Copy Demo 2, we can click to highlight it right away.

Below the table of selectable Configurable Products, notice the gray box "Configurable Attribute :: {Attribute Name}". In this area, the method of duplicating the CA can be selected (see explanation above): "Copy ..." vs "Link...". Finally, click Save to perform copying the CA.

Navigating to the Configurable Attributes tab of CA Copy Demo 2, we'll see that the CA has indeed been copied over. A good practice is to validate that all the CA's settings were copied over correctly, be checking its' settings in the accordion panes.

# Attribute Values

Every product with Configurable Attributes (CA) must have Attribute Values (AV) from which to choose. Consider a jacket with a customizable shell__, that can be configured in different colors. The CA shell could be available in AVs red, green, or blue. In short, AVs are selections made by the end user. AVs can displayed as checkboxes, dropdown menus, or swatch images.

Note: Attribute Values represent the final value sent to E-commerce and downstream systems.

# Define Once and Reuse

One of the primary tenants Fluid Configure is the concept of reusability. Its easy to imagine that managing values for Configurable Attributes could become overwhelming if the values had to be setup for every single Configurable Attribute. Naturally, many Configurable Attributes frequently share the same values (eg. a jacket's shell and pocket attributes may both have the same color value, or Attribute Value, "green" available). With this in mind, Admin Tools decouples Attribute Values from being directly tied to specific Configurable Attributes. Instead, Attribute Values are created once in the Attribute Values tab, and then aliased to Configurable Attributes. When planning how to setup your Configurable Product in Admin Tools, remember the golden rule of Attribute Values:

Attribute values should be considered atomic; an AV should only be defined once, in one location. Using (assigning) the value is done by creating aliases through Value Sets.

A more in-depth discussion on the topic of planning for product setup is available in the Planning Your Product Guide.

# Managing Attribute Values

Attribute Values are found in the Attribute Values tab second from the left (under the top-level Configure tab). All AVs are managed within this area, and any existing AVs are listed in the table in the middle.

# Adding Attribute Values

In the right column, notice the three buttons Add Normal, Add Font, and Add Text Align. In this guide, we're going to cover normal AVs, which account for the vast majority of Configurable Product scenarios. Font and Text Align AVs are covered in-depth in the Personalization guide.

To create a new Attribute Value, click the Add Normal button. A setup window will appear titled "Add Attribute Value", with the required fields displaying a *.

Available setup fields

• Vendor Id: optionally provide a vendor id, which is passed along with the Recipe data
• Name: name of the value as represented in Admin Tools. This is *not* the name displayed to end users.
• Label: text representing the value as displayed to end users in the Configurator (frequently same as the name)
• Priority: order where this value should appear when listed in a Value Set. Note, by leaving all AVs with priority: 1 simply means the Value Set will determine the order of its' values by creation time. If three AVs in a set have priority: 1, and one AV has priority: 2 - the AV with priority: 2 will appear last in the list.
• Active: toggle whether this attribute is available or not (display or hide the value, everywhere its used). Setting an AV to inactive here will make it inactive to all Configurable Attributes (eg. set to global inactive). Optionally, active status can be overridden at the individual Configurable Attribute level as well.
• Tooltip: text to display in a tooltip pop-up when the value is hovered in the Configurator (swatches and thumbnails)
• Description: provide a short description to associate with the value. If displayed as a thumbnail, when hovered in the Configurator the description will appear.
• Pricing: add an up-charge when this value is selected in the Configurator (eg. for choosing this value, the price is an extra $5). When configured at the Attribute Value level, the up-charge is applied globally (however, this can be overridden at the Configurable Product level).
• Pricing Description: description text available explaining the pricing
• Opacity: Set the default opacity of the thumbnail. By default the opacity is set to 100%.
• Material Type: how should this attribute value apply to the model geometry? (expanded in the next section)
• Custom Color: set a custom color value (appears below on select) to apply to the geometry. For example: if the AV is available to Configurable Attribute "hood", the hood will have a version of it rendered in green.
• Custom Texture: upload an image which will be mapped on to the model geometry. For example: uploading an image of a wood siding would map, with photorealistic shadowing and geometry, the wood texture on to the Attribute this value is assigned to.
• Colorize Default Material: every model is available with a default material, or "texture". For example, fleece might have a subtely fuzzy look to it. Choosing Colorize Default Material will apply the chosen color on to geometry with the photorealistic default texture.
• Model Default Material: render the model geometry with the default material "texture", but don't apply a custom color.
• Image Thumb: if this AV is represented as a swatch, override the default with a specific thumbnail image. Images can be uploaded as PNG or JPG files.
• Crop Image Thumb: TODO
• Image Resize: % ratio to resize if cropping
• Facets: In order to be used, the AV will need to be assigned to one or more Facets. Remember, AVs aren't directly assigned to a Configurable Attribute. Configurable Attributes are made aware of their Attribute Values through Value Set associations. This concept is explained more thoroughly in the Value Sets guide.

# Editing & Deleting Attribute Values

To edit an AV, simply double click the row to launch the edit dialog. Alternatively, click the AV row to highlight it, then hit the Edit button in the right column.

To delete an AV, click the AV row to highlight it, and hit the Delete button in the right column. If this Attribute Value is being used in any Value Sets, a warning dialog will appear.

If you'd like to proceed, press OK. Warning: Deleting Attribute Values should be planned carefully. If an AV is permanently removed from the system, and a user were to navigate to a Recipe or Starting Point of a Configurable Product that had previously used the Attribute Value, errors could occur. The recommended practice is to simply set the AV to inactive by unchecking the 'Active' setting.

# Material Types Expanded

As mentioned above, Material Type indicates how an AV should influence the rendering of model geometry. As an example, we'll use the outer shell Configurable Attribute on our jacket product. We've created four AVs that are made available to the outer shell attribute, each using a different Material Type setting. For material types Custom Color and Colorize Default Material (where color selections are available), a green color was chosen.

With Material Type: Custom Color. Notice that shadowing and geometry is applied, but relative to the Colorize Default Material (two below), there is no "texturing".

With Material Type: Custom Texture. With a jpeg image of wood paneling uploaded.

With Material Type: Colorize Default Material. Notice the subtle but photorealistic "texturing" of the material type.

With Material Type: Model Default Material. The default texture is applied, but no custom color is assigned.

# Facets

Every AV must be assigned to one or more Facets. Recalling that the relationship between Facet / Facet Values is synonymous with "Category Type / Category", the purpose of assigning an AV to a Facet is simply to assign the AV a "category".

The purpose of assigning Facets to AVs creates a relationship between FVs and AVs which is used in other parts of Fluid Configure (see the Facets Guide for an expanded list of Facet Value uses).

• In the Attribute Values tab of Admin Tools, a "Narrow Items By" column is displayed on the left for easily filtering and finding AVs.

• Value Sets are defined by choosing Facets, causing all the AVs assigned to that Facet to be part of the Value Set.
• Facet Filtering in the Configurator, whereas Facet Values can be used to filter the list of available Attribute Values. Notice below, the Facet "Color Groups", containing the Facet Values "Basics", "Winter", and "Spring".

Usage With Value Sets

While this guide covers the details of Attribute Values specifically, further reading is recommended in the Value Sets guide to gain a full understanding of how Attribute Values are assigned and used. See link below.

• Facets
• Value Sets

# Value Sets

Create and Manage Groups of Attribute Values

Before proceeding, be sure to have read the previous guide on Attribute Values.

Value Sets provide the mechanism by which Attribute Values are grouped and combined, and ultimately "attached" to Configurable Attributes. Value Sets are the link between a Configurable Attribute and its Attribute Values.

Recall that every Attribute Value must belong to one or more Facets. Value Sets are not defined by adding Attribute Values directly to the set, but by assigning Facets to the set. Conceptually, this is like saying "this Attribute Set will contain values that belong to the following categories (facets)".

# Streamlined Workflow

Once a Value Set is defined, it can be used across multiple Configurable Attributes. In practice, once more than a nominal amount of Attribute Values are defined and placed in groups, the ability to reuse Value Sets yields huge time savings. Further, updating the Value Set in one place propagates changes to any Configurable Attribute making use of the Value Set.

# Working With Value Sets

Value Sets are found in the Value Sets tab third from the left (under the top-level Configure tab). Value Sets can be added, edited, and or removed here.

# Creating A Value Set

To create a new Value Set, click the Add button in the right column. A dialog will open with an empty Name field, and a table with the list of Attribute Values. In the left column, notice the Narrow Items By column, which contains a list of _Facets _that any of the Attribute Values may belong to.

Remember, Value Sets are composed entirely of one or more Facets.

Give the new Attribute Set a name. In this example, we'll call it "Coolerful Colors".

Next, in the left column, select the Facets that identify which Attribute Values should be in the set. We want our new Value Set to have AVs that are in both "Spring" and "Winter" of the Color Groups Facet.

Notice that as soon as a Facet is checked, the list will update to show only Attribute Values associated with that Facet. When two or more Facets are checked, the list will update to show Attribute Values that are associated with at least one of the two Facets checked (filter is applied by "or", not "and").

With the name filled in and Facets selected, press OK. The new Value Set will be displayed in the list.

# Editing Value Sets

To edit a Value Set, simply double-click its table row, or select it and press the Edit button in the right column. The same dialog that appeared when creating a new Value Set will appear, populated with the correct information.

# Deleting Value Sets

To delete a Value Set, double-click its table row, and press the Delete button in the right column. If the Value Set is in use by a Configurable Attribute, a notification will appear informing you that the item cannot be deleted because ...

# Using Value Sets

Recall that Value Sets exist solely to act as the link between a Configurable Attribute and the values available to it. With our Value Set created, the next step is to use it.

Note: below we briefly touch on Configurable Products. The full Configurable Products Guide provides an in-depth look at CPs. If you don't already have at least one CP setup, please start with the CP Guide and come back.

# Linking Configurable Attributes With Value Sets

Click on a Configurable Product to launch the management dialog. In the Configurable Attributes tab, we'll choose Add to create a new dummy attribute. (It's recommended to do so just for learning purposes; we can always delete it later).

When the Add Configurable Attribute dialog appears, leave the defaults and click OK.

The required fields contain defaults. Fill in a dummy name for the label and the alias (follow the convention with aliases and replace_spaces_with_underscores). Don't hit OK just yet!

Notice the Selector Type field, with a dropdown menu next to it. This setting dictates how the Attribute Values of this Configurable Attribute will be displayed. (We haven't actually linked any AVs just yet). The names should be indicative of their presentation. For now, choose "swatch", then press OK.

Our new Attribute will be created, and should show up in the list on the left. With our new Attribute selected, look in the accordion menu to the right for the Value Sets row, and click it. An empty list should appear.

Click the Add button. A dialog will appear containing a list of Value Sets (with the Name in the first column), and a filterable list in the left sidebar area.

Notice our "Coolerful Colors" Value Set appears in the list. Click to highlight it, and then choose Select.

Done! By assigning a Value Set to our Configurable Attribute, we've now created a link between the list of values in the Value Set and the Configurable Attribute.

# Facets

Facets are a powerful concept pervasive throughout Admin Tools. Revisiting our definition from the Introduction, Facets are a mechanism for creating arbitrary categories and sub-categories, which can be assigned to different entities and sets of data. Facets are similar to tags in that they are defined by Admin Tools users, and are intended for use as filters and widespread classification identifiers. Proper use of Facets provide Admin Tools users with a flexible method of eliminating tasks that would otherwise be highly repetitive, by defining a Facet once, assigning values to it, and reusing groups of data assigned to that Facet.

# What Makes Up A Facet

A Facet is simply a name / value pair that can be attached to a Configurable Product or Attribute, as well as used to categorize Attribute Values and groupings in Attribute Sets. The name of a Facet (eg. "Fabric Grade" or "Texture") has no particular significance to the system itself. In fact, Administrators can add new Facets arbitrarily, and use them as grouping mechanisms throughout the application. A Facet can have any number of possible Facet Values (FV) with which Configurable Products and Configurable Attributes can be tagged.

(Common interface for assigning Facets)

Because every Facet can have one or more Facet Value, tagging other entities in Admin Tools will often be referred to as assigning a Facet / value pair.

# Management Interface

Facets live in the Admin Tools as the left-most tab under the top-level tab Configure. The Facets tab display a list of all Facets that have been setup, as well as options for Adding, Editing, Deleting, or Importing Facet definitions. Notice in the Facets list, pictured below, each Facet's name and value (with other info. as well) are displayed. The list of values for a Facet may sometimes not be shown in entirety due to width of a browser window; rather, only some of the defines values will be displayed, to the point that an Admin Tools user should be able to identify what is being looked for.

Also in the Facets display table is a "Priority" column (editable in-line just by clicking), which determines the order in which Facets will appear when listed elsewhere in the application.

The Product Attribute Filter column defines the default setting used when a Facet is leveraged for UI behavior in the embedded Configurator displayed to site visitors.

# Add, Edit, Delete

On the right side of the Facets interface, notice the plainly labeled action buttons. To create a new Facet, choose Add. To edit an existing Facet, select it from the list and hit Edit (alternatively, double-clicking a Facet table row will launch an edit window). The delete button should be used with caution, as any Facet that is currently in use elsewhere should not be deleted. Note - when attempting to delete a Facet, the system will provide warnings.

The screen for adding and editing a Facet

Note the + , -, and edit buttons beneath the Values list, which are used to add, remove, or edit a list values. To edit a list value, make sure you highlight it by click it in the list first. Adding or editing a Facet Value only has one field required, which is the value as a text string. Optionally, a description can be provided as well.

Notice the blue globe icons next to the input fields. These are translation links. Clicking the icon will launch a modal Translation box, allowing for customization of the input across multiple languages. Available languages are configured in Admin Tools Localization settings.

# Facet Value Usage

As mentioned previously, Facets are used in multiple places throughout Admin Tools. Here are the areas which make use of Facets (note, further reading of other guides may be required for clarification on some of the terms used below):

• Attribute Values are required to have one or more Facet Values. Configurable Products and Attributes can also be assigned Facet Values.
• Value Sets are defined by Facet Values. One or more Facet Values are required to create a Value Set definition.
• Facets are used to filter the contents of Attribute Values, Value Sets, and Configurable Products in Admin Tools.
• Each Facet associated with a Configurable Attribute can be required, optional, or hidden. This is done via Facet Management in the Configurable Attribute properties. This affects which Facet filtering menus are shown in the accordion panel output to users / site visitors for that Configurable Attribute.
• Sympathetic Relationships with filter types ("Sympathetic Filters"). Selecting one or more Facet Values in one Configurable Attribute can trigger filters of another Configurable Attribute.
• Parent/child Configurable Attribute relationships can be based on Facet Value usage (e.g. choosing Facet Value 1 of Configurable Attribute 1 as the parent, can trigger Configurable Attribute 2 with Facet Value 2 to become visible).
• Visibility rules can be based on Facet Value usage (e.g Facet Value 1 of Configurable Attribute 1 can trigger Configurable Attribute 2 to become visible).

Continue reading for an expanded look at using Facet Values with each of the areas mentioned above.

# Usage with Attribute Values

Every Attribute Value defined in Admin Tools must be assigned one or more Facet / value pair. While the semantics of working with Attribute Values is discussed elsewhere (in the Attribute Values guide), take a look at the interface for creating and editing Attribute Values below. Note the Facet assignment area on the right, where Facet / value pairs can be assigned to each Attribute Value.

In the Attribute Values tab of Admin Tools (directly to the right of the Facets tab), note the left column Narrow By Items. This column reflects what Facets have been setup in the system, and can be used to filter Attribute Values by what Facet value is assigned to each.

# Usage With Value Sets

Value Sets, are defined by assigning one or more Facet Values to the Value Set. A Value Set is created simply by selecting (in the left column Narrow By Items) which Facet / Value pairs should be applied by the Value Set.

# Filtering Attribute Values, Attribute Sets, and Configurable Products

A recurring interface element of Admin Tools is the Narrow By Items area, which will filter the list in the given context. Contexts where Facet Filters can be applied are to: Attribute Values, Attribute Sets, and Configurable Products.

# Facet Visibility Within Configurable Attributes

While covered in depth in the Configurable Attributes guide, note that the visibility of Facets within Configurable Attributes can be managed through the Facet Management accordion area. The visibility options are

1. Required - force the Facet to be visible; a selection must be made by the user
2. Hidden - force the Facet to be hidden; it exists only for grouping / relationship purposes
3. Optional - display the Facet; but no selection is required

# Defining Sympathetic Relationships

Sympathetic relationships, covered in depth in the Inter-Attribute Relationships guide, provide a mechanism for triggering filtering actions on Facets applied to other Configurable Attributes. Consider a simple example: with a jacket, if a user chooses a specific logo color, we'd like to have the zipper colors change to match the selected logo color... or only allow a specific subset of zipper colors, depending on which logo color was chosen. Sympathetic Relationships provide the capability to do so, through Facets.

# Parent / Child Configurable Attribute Relationships

With the ability to nest Configurable Attributes in parent / child relationships, we can create triggers to determine the visibility of child Configurable Attributes based on Facet selection in the parent Configurable Attribute. (Refer to the Inter-Attribute Relationships guide for more in-depth).

# Visibility Rules with Facets

Visbility rules can be based on Facet Value usage (again, see Inter-Attribute Relationships guide), whereas the selection of a Facet Value in one Configurable Attribute can influence available selections in a different Configurable Attribute. Note: visibility rules can also be applied to model geometry, such that selecting a Facet in one Configurable Attribute can trigger visibility changes on what the user sees in the Configurator.

# Inter-Attribute Relationships

The vast majority of products today, even of relatively simple complexity, have one or more components which are related. In the context of Configurable Products, there are almost always relationships between Configurable Attributes. The nature of the relationship may vary (and indicate a number of different rules), but nonetheless, a choice made on one Configurable Attribute may need to indicate (and trigger) a change to a separate CA.

The following types of Inter-Attribute relationships are available:

Visibility Rules: should one CA be visible, depending on the selection made on a different CA?

Considering our jacket example: if we choose to include a Pocket CA on the breast, then hide the Logo CA.

Sympathetic Selector: if a Value is selected on one CA, should that same value be triggered as the selected value on another CA?

If the customer chooses blue for the jacket Shell color, then automatically make the Zippers blue as well.

Sympathetic Filter: if a Facet Filter ("Facet selection") is applied to a Configurable Attribute, automatically apply the Facet Filter to other CAs.

If the customer selects the "Waterproof fabrics" Facet Filter, then only allow other relevant CAs to have "Waterproof fabrics".

# Visibility Rules

Set one CA to be visible or hidden, depending on choices made from another CA.

Visibility Rules dictate whether a Configurable Attribute should be displayed or not. A Visibility Rule will affect both the model geometry (the image of the Configurable Product displayed to the customer), and visibility of the Configurable Attribute in the accordion pane.

Consider an example with our Jacket product, having the Configurable Attributes Logo and Pocket. By default, the Logo should appear on the left breast area of the Jacket. However, the Jacket can be configured to include a pocket in the same left breast area. If the customer chooses to add a pocket, then the Logo CA should not be visible (that is: if thePocket is visible, then the Logo should not be visible).

Before we dive into how to setup the Visibility Rule, check out the live Configurator example below. Try opening the Pocket accordion pane and selecting a pocket color. Also, notice in the accordion there is no Logo attribute. Uncheck the checkbox labeled "Pocket". Notice that the pocket is no longer displayed on the product image, and instead a logo appears. Also, there is now a Logo attribute in the accordion pane - to select color values for the Logo CA. Try checking/unchecking the "Pocket" checkbox to see exactly what is occurring.

# Visibility Rule Setup

The first step in determining how to setup a visibility rule is to ask the right question(s):

What do I want to show or hide?

In our example, we know we want the Pocket to be shown or hidden, as well as the Logo to be shown or hidden.

What should trigger a change in visibility?

With our Pocket Configurable Attribute displayed as a checkbox, we know the state of the checkbox indicates either of two things: Pocket = Yes, or Pocket = No. Checkboxes are configured with Value Sets consisting of two values; so we have an AV "Yes", and an AV "No". When the Pocket checkbox changes (from checked to unchecked, or vice-versa), we want to trigger a change in visibility on either the Pocket or the Logo, depending on which value is selected. If the box is checked, the selected value is "Yes". If the box is unchecked, the value is "No".

In this instance, we are actually setting up two visibility rules. One to show the Pocket only if the checkbox is checked, and one to show the Logo only if the checkbox is unchecked.

Logo Visibility Rule

From the Configurable Attributes tab, click the Logo CA and open the Visibility Rules accordion pane. The Visibility Rules table should be empty. Click Add to create a new Visibility Rule.

Since the visibility of the Logo CA depends on the value the Pocket CA, select "Pocket" from the Configurable Attribute dropdown. Make sure the Based On radio button is set to Attributes. The available Attribute Values will appear in the table below. Think in terms of a sentence: "If the customer does not want a pocket (pocket = no), then the Logo should be visible."

Pocket Visibility Rule

Next, click the Left Chest Pocket CA from the left sidebar. Since we had the Visibility Rules accordion pane open in the Logo CA, the Visibility Rules pane should be open automatically.

Similar to before, click the Add button and choose "Pocket" from the Configurable Attribute dropdown. Click the "Attributes" radio button. Again, think in terms of a sentence: "If the customer does want a pocket (pocket = yes), then the Left Chest Pocket should be visible."

# Sympathetic Selector

Trigger the value selected on one CA to auto-select the same value on a different CA

Think of a Sympathetic Selector as a rule between two attributes, such that when a value gets selected on one of the attributes (the master), a different attribute (the slave) will have its' value set to the same selection as the master. In other words, a Sympathetic Selector triggers the master attribute to force the slave attribute to have the same value.

Consider our Jacket demo as an example, which has (among others) the CAs Shell and Zippers. Imagine that when a customer selects a color for the Shell, the Zippers should automatically change to the same color. With no Sympathetic Selector configured, when the customer selects a Shell color, nothing will happen with Zippers. However, by configuring a relationship through a Sympathetic Selector, we can define a rule such that changing the Shell color will automatically change the Zipper to the same color as well. In the Admin Tools, this is known as setting a Sympathetic Selector.

# Sympathetic Selector Setup

Similar to Visibility Rules, lets start by asking the right question:

Which is the Master, and which is the Slave Configurable Attribute?

We know that when a selection is made to the Shell CA, it should trigger a change on the Zipper CA. Therefore, the Shell attribute acts as the trigger - or the "master". The Zipper CA is the attribute that will be changed as a result of the Shell having changed - therefore it is the "slave".

Should the relationship go both ways?

A Sympathetic Selector sets up a one-way relationship. In our example, we only want a change in the Shell CA to trigger a change to the Zipper CA. When the Zipper CA is changed, the Shell CA will not change.

To setup a two-way Sympathetic Selector (eg. change in Shell triggers change in Zipper, and change in Zipper likewise triggers a change in the Shell), we'd have to create two Sympathetic Selector rules. Setting up the two-way Sympathetic Selector means there are two rules, where the master/slave attributes are simply switched.

Sympathetic Selector Rule

From the Configurable Attributes tab, click the Shell CA and open the Sympathetic Attributes accordion pane. The Sympathetic Attributes table should be empty. Click Add to create a new rule.

When the modal overlay appears, set Type to "Filter" from the dropdown. Since we had clicked the Shell CA in the sidebar, it will automatically be used as the Master Attribute, shown on the left. In the right pane, a dropdown will appear with other CAs which can act as the slaves. Select "Zippers" from the dropdown, and click OK.

The rule will now appear in the list. Note under the "Type" column, our rule has the type "Selector". The table will also list which attributes is the Master and which is the Slave.

Notice, since this rule applies to both the Shell _and the _Zippers CAs, the rule will show up in the table of the Sympathetic Attribtues pane for both CAs.

# Sympathetic Filter

Facet selection(s) influence the filtering of AVs available in another CA

Similar to how Sympathetic Selectors influence the selection on a different CA, Sympathetic Filters work by also influencing different CAs, but in a slightly different way. Specifically, instead of influencing the actual selected value (like Sympathetic Selectors), Sympathetic Filters will influence the available values, by automatically applying a Facet Filter.

Recall the use of Facet Filters within Configurable Attributes: Attribute Values can be grouped by Facets, and the Facets can be used to filter the available values of a CA in a Configurator instance. In the context of our Jacket example, we have the Facet "Fabric Grade", which has Facet Values "Wind Stopper", "Water Resistant", and "Wicking". By selecting one of the Fabrics from the dropdown (pictured below), we would apply a Facet Filter.

When a Facet Filter is applied, by default it will only filter the results of that Configurable Attribute. However, consider this scenario: when the customer chooses the Fabric Grade for the Shell, our product requires the Side Panel fabrics must be of the same grade. So if a customer filters the Shell _by "Wind Stopper" material and then selects a value, then we'd want to make sure that the values available in _Side Panels are automatically filtered by the "Wind Stopper" Facet as well. By creating a Sympathetic Filter, we can do so.

Checkout the Sympathetic Filter demo. There is a Sympathetic Filtering relationship between the Shell and the Side Panels attributes. Try selecting different values from different Facet groups in the Shell, and notice that the "Fabric Grade" Facet Filter will automatically change in the Side Panels attribute.

# Sympathetic Filter Setup

Again, start by asking the right question:

Should the value selected on one of the product's attributes influence the values available to another attribute?

With our jacket example, we know a rule must be enforced such that the Fabric Grade of the Side Panels must match the Fabric Grade of the Shell. We've got Fabric Grade setup as a Facet Filter, which can be used to influence the values available.

Bearing in mind our rule, we've determined that the selection of the Shell material should automatically trigger the values of the Side Panels attribute to be filtered by the Facet which the Shell selection belonged to. Therefore, the Shell acts as the Master Attribute, which influences the Side Panels Slave Attribute.

Sympathetic Filter Rule

From the Configurable Attributes tab, click the _Shell _CA and open the Sympathetic Attributes accordion pane. If there is a Sympathetic Selector rule setup from before, feel free to delete it. Click Add to create a new rule.

In the left column, we have the Master Attribute _Shell. _On the right is a dropdown menu to select the Slave Attribute; choose "Side Panels".

To add a Facet to either the Master or Slave columns, click the underlined text "Add Facet" directly below the boxes in either of the Master/Slave columns. By selecting a Facet in the Master Attribute, when a value in that Facet group is selected, the Facet Filter selected in the Slave Attribute will be applied to the Slave.

# Further Learning

As there are infinite scenarios that could be covered with Inter-Attribute Relationships, its not practical to document them all. It is important to grasp the underlying concepts of the functions performed with Inter-Attribute Relationships, but to truly see the cause-and-effect of each, we recommend spending some time to experiment independently. Use the topics covered above in this guide as an introduction, then hash out scenarios relevant to your product(s) by experimenting with different setups.

# Localization

Fluid Configure was built from the ground up with robust internationalization support, and provides mechanisms for translating virtually all text displayed in the Configurator. Multiple currencies, as well as number formatting systems are also supported. Admin Tools defaults to the English language.

Languages are added individually, and configured in the Localization tab of Admin Tools. Language translations occur by providing Localization files, which are in effect just CSV files with rows of key-value pairs where the key is the text in English, and the value is the text translated into the respective language.

In this guide, we'll walk through the process of adding Spanish language support, as well as currency and number formatting. To add more languages down the road, the process can be duplicated.

# Adding a New Language

Conceptually, its easiest to think about language translations as needing to occur for two stages of text in Admin Tools:

User Defined Text: language defined by the Admin Tools user when setting up Facets, Attribute Values, Configurable Attributes/Products, etc.

Application Text: language used by the Configurator to display stock features, eg: "Zoom In", "Zoom Out", "Rotate", etc.

After we add the Spanish language below, we'll walk through the process of translating all User Defined Text first, then tackle Application Text afterwards.

Note: feedback from users of Admin Tools indicates that Localization is a task usually best worked on towards the end of Configurable Product setup. Once CP(s) are relatively well defined and hashed out, then tackle localization.

# Adding A Language In Admin Tools

The first step in supporting a new language is to actually create it in Admin Tools. Start by navigating to the Localization tab (towards the middle of the tab set). Notice, there are three blue headings sections: Localization, Currency, and Number Format. Focus on Localization for the time being. By default, only one record should be present in the table, which is the English language default.

Notice in the right hand column, the following button set. At the very top, click the Add button.

A modal dialogue will appear, with the following options:

Language Code: assign letter or number as identifier for the language. Recommended approach is to use a two-letter abbreviation of the language, and (optionally) the regional abbreviation if there are different dialects per locale (eg. en_us for "English_United States" or en_uk for "English_Great Britain").

Language Name: full name of the language.

Active: toggle whether support for this language is enabled or disabled. To temporarily disable support for a language instead of removing the language entirely, simply uncheck this box.

Web Purify(tm) Language Code: Admin Tools integrates with the WebPurify(tm) profanity filter for supported languages. If the language being added matches one in the dropdown list, its recommended to always set this.

For our spanish example, use the following settings, and hit OK.

A new row should appear under the Localization heading, for the Spanish language we just added.

# Translating By Individual Items

With the Spanish language now added in Admin Tools, we can begin adding translations on a per-item basis. Throughout Admin Tools, you may have noticed the blue Localization icon next to every text field where user defined input is available. Anywhere this icon appears, an alternate translation string into the Spanish language can now be input.

# Example

To keep things simple, we'll use a Facet name as the example. Click the Facets tab to view all available Facets. Double-click on any Facet (we'll use "Components") to open the Edit Facet dialog.

From the dialog, click the _Localization _icon next to the Name field. Another dialog will appear, with two input fields for the languages now setup in Admin Tools: the top being English (Default), and then the language we just added - Spanish.

In the Spanish field, we can provide the translation for the text.

With our translation added, click Save.

# Bulk Translations

Naturally, going through all areas of Admin Tools and providing translations on an item-by-item basis could become overbearing. As well as being tough to ensure that every necessary field has been translated.

Bulk translations provide an easy way to manage all translateable fields within a single document, which can be exported and imported as many times as necessary. In this section, we'll cover working with bulk translations.

# Translating User Defined Text

Navigate back to the Localization tab. We'll tackle providing a Localization file for all user defined text (any text properties, like Name or Tooltip, setup by an Admin Tools user). Make sure the Spanish language is highlighted in the table row, then click Export in the button set of the right column. Click OK when the notification appears.

In your e-mail inbox, you should receive a Fluid Retail job report with an attached .txt file. Open the file in a text editor, and copy the download URL.

Paste the download URL into a web browser window, and a ZIP file should quickly be downloaded to your local computer. Once finished, open the ZIP file (it contains just one CSV file). The CSV file, referred to as the Localization file, can be opened in an Excel or similar spreadsheet program in order to set the translations. Lets look at what the file contains below.

Notice: there is one row with a cell in the Value column containing text, which is the translation for the Facet name we setup above in the Translating By Individual Items section. When the Export button is clicked, know that all existing translation values are exported.

The first row contains header column names, explained below:

Id: system generated ID for the row

Type: the entity type (or object type) that the next column (property) belongs to.

Property: field name of the entity type (eg. "tooltip" of a ConfigurableProduct).

Default Value: the English version representation of the field value. This text is what was originally filled in during setup in Admin Tools.

Language Code: which language the next column (value) represents.

Value: the translated version of the Default Value.

Recall from above that a Localization file is made of key-value pairs. In this Localization file, the "key" is represented by the Default Value column, and the "value" is the Value column. Pairs are represented by distinct rows.

# Defining and Importing Translation Values

For demonstration purposes, we're going to translate just one row, then import the CSV file back into Admin Tools to see the effect. Reading the spreadsheet from left to right, we'll translate a Configurable Product's (Type) Name (Property) from English (Default Value) to Spanish (Language Code - Value).

Export the spreadsheet back to CSV format.

Finally, back in Admin Tools (with the Spanish language row still highlighted), click the Import button on the right and select the CSV file we just exported. Admin Tools will automatically upload and process the file. Again, a notification will appear check email for a job report.

# Import Report and Results

The email contains a TXT file of the import results. Open the file in a text editor to see the report.

At the top of the report, the number of Successfully Imported rows are listed. The report lists 2 successful imports: the one we added, and remember the one that was already setup. The rest of the report lists rows where Errors Occurred. These rows are not imported, so nothing changes.

There is an important takeaway: only rows with translations provided in the Value column are imported. Just because there are errors in some rows does not stop the entire import. It is perfectly ok to work on translations in separate batches and re-import multiple times.

Now, let's look in Admin Tools at the entity we provided a translation for to see the effect.

Recall from above, we determined we're translating the "Configurable Product's ... Name ... from English ... to Spanish." Navigate to the Configurable Products tab, and open the Configurable Product (in our example, we used the "Vibility Rules Demo" product). Click the Edit Product button at the bottom.

When the dialog appears, notice the blue Localization icon next to the Product Name. Click it.

Another dialog will appear, this time with an extra row for the Spanish language - containing a field with the translation value we provided.

If the value needs to be updated, it can be done here. However, since we know this is correct - we can simply hit cancel.

# Translating Application Text

Similar to above whereas translateable text can be viewed in bulk within one document, Application Text translations are made with one document being the point of reference. However, for Application Text we don't need to worry about importing/exporting CSV files from Admin Tools.

Still in the Localization tab, notice the Application Text button in the right column. With the Spanish language still highlighted in the table row, click the button. The Edit Application Text dialog will appear.

In the left column are strings (represented as key/value pairs in JSON format) in the Default language (English). This column is not editable. In the right column, the same key/value pairs appear by default - however, these values are editable. For each value in the key/value pairs, the string should be replaced with the correct translation. Note: the keys should never change.

For example, to translate "Print" to Spanish, the top line could look like "printButton_label" : "Imprimir". In which case, when the Configurator is loaded with the Spanish Localization file, the "Print" button would instead read "Imprimir".

When done translating, press OK to save the file.

Every language configured in Admin Tools will have its own set of Application Text key/value pairs.

# Language Usage in Configurator

With our Spanish language example configured, we'll need to publish and update any Configurator instances we'd like to have render using Spanish.

With whichever workflow is relevant, use the following settings (assuming your product(s) have already been published with images to this workflow, and are working in a Configurator instance). Note: the "Publish ...in selected languages" box is a multi-select box; more than one language can be selected. Hold down the "Shift" key to click more than one language.

When the publish is complete, the last step is to make a simple update to any Configurator instances that should use the language.

# Modifying Configurator Embed Code

To instruct a Configurator instance to use a certain language, all we need to do is pass an extra key/value pair in the Configurator embed code. We add the locale key to the setup parameters, with the language code. Checkout a demo Configurator with using the Spanish language we defined, and notice the modified code.

# Currencies And Number Format

When a Currency is configured, at least one Number Format must also be defined. Currencies and Number Formats are purposely decoupled to enable easier reusability.

Similar to how alternative languages can be configured, we can also configure different currencies. By default, when no currency is configured, the U.S. dollar is the default. However, once any currency has been added, one must always exist as the default. Further, after one or more Currencies have been configured in Admin Tools, there must also be a default Number Format. We'll start by explicitly defining the USD as a currency. Since its the first one being configured, it will automatically become the default.

In the currency section, click the Add button. Fill in the following values for the settings.

Code: abbreviated currency code. For the U.S. dollar, we'll use the internationally recognized "USD".

Name: full name of the currency.

Description: provide a description of the currency

Disabled: if checked, the currency will be inaccessible to customers. It will not be loaded in the Configurator.

Symbol: specify the standardized symbol representing the currency. Notice the dropdown menu to the right, which can be used to choose from popular currencies to automatically populate the field.

Formats: formatting works through variable substitution, whereas %s will output the currency symbol ($), and %v will output the price value.

Positive: configure the format for a positive price value. From the suggestion dropdown menu, we have %s%v, which would render the price as "$100.00", if the price is $100.

Negative: same concept; from the suggestion dropdown, we have %s(%v), which would render the price as $(100.00) if the price is -$100. We could use "-%s%v" to render it as "-$100.00".

Zero: same concept; from the suggestion dropdown, we use the same %s%v format.

Next, we have to define a default Number Format. We'll define a number format that corresponds to the U.S. currency standard.

In the Number Format section, click the Add button and use the following settings:

Code: short code for the number format.

Name: full name for the number format.

Description: optional extra description

Disabed: if checked, the number formatting rule will be unavailable in the Configurator.

Decimal Thousands Separator: the character used to separate decimal numbers. We'll use the U.S. standard ".", which will display as "xx.yy".

Thousand Separator: character used to group and separate thousands.

Decimal Precision: (defaults to 0) how many decimals should be displayed? Rounding to the nearest decimal precision will be enforced. Setting decimal precision to 1 would display "xx.y", whereas decimal precision 2 would be "xx.yy". Leaving it to 0 rounds to the nearest whole number of the currency.

# Define A Second Currency And Number Format

With our default USD Currency configured, add another Currency to represent the price in Euros.

Also, lets define another Number Format to display the Euro in a format commonly used for the currency. Specifically, we'll switch the Decimal and Thousand Separators such that "," is the decimal and "." is the Thousand.

# Specifying Alternative Currency Values

After the alternative Euro currency has been added, we'll configure the price for the Euro currency on a Configurable Product. Navigate to the Configurable Products tab, and find click to view the details of a product (we'll use one called Visibility Rules Demo). In the Product Properties tab of the Configurable Product dialog, click Edit Product. Notice the currency symbol next to the price and discount fields. Click the icon to see the Currency dialog.

Notice there is now a row for the Euro currency, with an input field. Similar to how we can provide translation strings for alternative languages, we can do the same for currencies. Give the Euro currency a value of 85.00 and press Save.

# Currency And Number Formatting Usage

With multiple Currencies and Number Formatting rules defined, we should see the following reflected in Admin Tools:

Finally, we want to modify an instance of the Configurator to use the appropriate Currencies and Number Formats. Just like modifying the embed code to use a specific language, all we need to do is specify key/value pairs in the parameters indicating which Currency and Number Format we'd like to use. Respectively, the parameters keys are simply: currency and number.

# Personalization

Personalization is achieved with Configurable Attributes. Please make sure to have thoroughly reviewed the Configurable Attributes Guide before proceeding.

Beyond customizing the look of a product, Fluid Configure facilitates the ability to offer custom monogramming through text input. For example, consider a jacket where we want to offer customers the ability to have their name stitched somewhere on the jacket - like a sleeve or a label. Using Configurable Text Attributes, we can display a text input field in the Configurator and allow customers to type in their name, or a message, and render the text somewhere on the model - like a label.

# Setup Process

Creating Personalization text input is done by creating a new type of CA called a Text Attribute. Creating a Text Attribute requires a slightly different process, with different ground work for setting up the available Attribute Values beforehand.

This process will leave us with a single parent Text Attribute called "Custom Text", with four child CAs "Font Family", "Color", "Size", and "Position" that exist to influence the output of the parent "Custom Text" attribute. These four child CAs are the required attributes needed to create a working Configurable Text Attribute.

# Creating Facets and Facet Values For Text Attributes

While not truly required (other Facet/Value pairs could be used without problem), for organizational purposes its a good idea to setup dedicated Facet/Values to use specifically for text. Start by creating a new Facet called "Custom Text", which we'll populate with the four category types we'll want to keep track of (the correspondingly named child CAs from above).

The Facet is named "Custom Text", and the Facet Values are

Position: to identify the text position options

Color: to identify available text colors

Family: to identify the font types

Size: to identify the text size options

# Creating Font Attribute Values

Start by navigating to the Attribute Values tab. The first type of Attribute Value we'll create is a Font AV. Until now, the only type of Attribute Value we've created has been a "Normal" AV. You've likely noticed the button underneath "Add Normal" named Add Font. Click it.

The setup dialog that appears contains different fields than the Normal type of Attribute Value. Specifically, notice the middle column which contains extra inputs for "Font Configurations".

Starting with the left column "Value Details", fill in the required fields. We'll be using a font called BirchStd, so we'll name this AV simply "Birch". Make sure that the name and tooltip fields are filled in.

In the middle column "Font Configurations", follow along with the field definitions below:

Default Size: the font size to create an image sprite. Generally, its ok to leave this at 10.

Valid Character Desc: a regular expression, indicating allowed characters. For example, "[A-Z],[a-z],[0-9],@" would be all the characters from A to Z (uppercased), a to z (lowercased), digits 0 through 9, and the @ symbol. The format for this is: {Character | CharacterSet} [,{Character | CharacterSet}......], where Character is a valid character (eg. "A", "b", "@", "9", etc), and Character Set is a set of charcter, expressed with "[...]".

Font Name: name of the font in use

Image Font/Character: these fields will be automatically populated after we upload a font.

Font Image (3 tab area): the font to use. If fonts have been uploaded previously, the Font dropdown in the From Current tab will show available fonts. We want to focus on the middle tab "From New".

Clicking the Upload TTF or OTF File and Create Font Image button will cause a finder to appear. Locate the font file we want to use on our local system, and hit Open.

Right away, notice the Image Font and Characters field should become populated.

With the Value Details and Font Configuration fields configured, the last step is to add Facet(s). In our case, we want to use just the single Facet/Value pair we configured earlier, displayed below.

Finally, click OK to save the Attribute Value.

# Creating Position Attribute Values

Attribute Values for text positions are in fact just Normal AVs. The only thing necessary to remember is that Material Type must be set to None. In Admin Tools, the actual positioning coordinate values are not configured in the Attribute Value in this section, but through the special Text Attribute settings of Configurable Attributes. The only thing required is that one or more "Position" Attribute Values must exist.

In our jacket example, we plan on having two positions where the text could go on the jacket: "top" and "bottom". We need to create an AV for each, like so (remember, using Add Normal button):

and

With our Position values created, and both assigned the Facet/Value "Custom Text" / "Position", click the "Position" checkbox in the Narrow Items By column on the left to test that our Attribute Values are assigned the proper Facets. The AV table should filter the results to reflect just the "Top" and "Bottom" values we just created.

# Creating Size Attribute Values

Similar to creating "Position" AVs in the previous section, we need to create one or more Attribute Values for "Size". Again, we'll use Add Normal and simply leave the Material Type value to None.

and

Remember to set the Facet/Value pair to "Custom Text" / "Size".

# Creating Color Attribute Values

Last, we need to setup AVs for the available text colors. Again, we use Add Normal, but this time must set the Material Type and Color Value fields correctly. For our example, we'll add just two colors "Red" and "Blue".

and

Notice we set "Material Type" to "Custom Color" this time.

# Creating Value Sets

In order to use the Attribute Values with Configurable Attributes, we need to create Value Sets. We'll create one Value Set for each of the four Facet Values we created.

Custom Text Position Value Set

Custom Text Family Value Set

Custom Text Color Value Set

Custom Text Size Value Set

Filtering all the Value Sets by the Custom Text Facets should display the following

# Defining the Text Configurable Attribute

Navigate to the Configurable Products tab, and open the product which will have the Configurable Text Attribute. In our example, we're using the Jacket product, which already has a couple basic Configurable Attributes defined (we have _Shell, Side Panels, and Zipper _CAs defined already).

We're going to be setting up 5 new attributes: one being the parent CA, with four child CAs. Together, the four child CAs will "compose" the single parent Text CA.

Start by creating the parent Text attribute. Click the Add button to create a new attribute. If you've explored, you may have noticed the option "Create text attribute from scratch" in the Create From Scratch accordion pane (not opened by default). Click the accordion pane header Source: Create from scratch to open the pane.

When the Configurable Attribute Properties dialog appears, notice the right column with a completely new set of options. For now, we're going to complete only the minimum required fields and save the CA. We'll be coming back to edit this CA after we have our other CAs configured. We'll be creating one CA for each text property.

Font: used to configure font options.

Size: used to configure font size options.

Position: used to configure where text is positioned on the models.

Rotate: used to configure optional transformations to rotate the text.

Colorize: used to provide color options to the text.

Filter: add filters to change the text order.

Text Alignment: configure text alignment within the bounding box (the DOM element containing the text)

Polygon Shape: apply a deformation using a shape.

Most of the fields are identical to setting up a normal Configurable Attribute, which should look familiar. However, there are a few extra fields which must be configured.

Selector Type: must be set to "text" (the only option).

Text max width: set the max width of the DOM element, which will render the text on the model. 120 pixels is a good start.

Text min length: minimum number of characters the text input field will accept.

Text max length: maximum number of characters the text input field will accept.

With our settings completed, click OK to create the attribute.

# Create Configurable Attributes for Text Properties

With the Text Configurable Attribute created, we need to create additional attributes to use in the text properties. We'll be creating four new CAs, as children of the Text CA: Font Family, Color, Size, and Position. As we setup each attribute, we'll be assigning the corresponding Value Sets to each:

Font Family CA -> Custom Text Family Value Set

Color CA -> Custom Text Color Value Set

Size CA -> Custom Text Size Value Set

Position CA -> Custom Text Position Value Set

Back in the Configurable Attributes tab, click Add to create a new CA. In the Add Configurable Attribute dialog, this time we want to set the Parent dropdown menu to our "Custom Text" attribute.

Leave Based On set to "Nothing", and click OK. We'll setup the Font Family CA first, so use the following settings:

Click OK to create the CA. Notice in the sidebar, it appears indented underneath Custom Text (indicating it is a _child _of the Custom Text attribute).

With the attribute created, next we want to associate the corresponding Value Set. Click "Font Family" in the sidebar, then open the Value Sets accordion pane and click Add.

Choose the corresponding Value Set and click Select.

Repeat this process for the three remaining CAs "Color", "Size", and "Position" - creating attributes with the basic properties, and assigning the corresponding Value Sets we created previously. When finished, the sidebar should reflect the following:

# Configuring Text Attribute - Text Properties

We now have the parent Text Configurable Attribute defined, with four child CAs. We'll now continue with setting up the Text attribute.

Click the Custom Text attribute in the sidebar, open the Configurable Attribute Properties pane, and click Edit. In the text properties list in the right column, try clicking the Font dropdown, and notice the attributes we just created are available to select. We'll be assigning values to the properties for which we have created attributes: Font, Size, Position, and Colorize.

# Assign Font

Start by selecting the Font Family attribute for the "Font" dropdown menu. There are no configuration options on it, so we're done with this property.

# Assign Size

In the "Size" dropdown menu, select the Size attribute, then click Configure. In the dialog that appears, we'll configure values for the available text sizes. Click Add to create a new row. Values can be edited by clicking on cells directly in each row. The first column "Attribute Value" will display a dropdown list of the Attribute Values that are members of the Value Set we created. We have values "Normal" and "Big". Create a new row and select "Normal", leave View to " - All Views - ", and set the Value to "10" (the size the font will appear).

Choosing a specific value to the View column will force that view to be displayed when the Attribute Value is selected.

Do the same for the "Big" AV, and set the value to "14".

Click OK to save the settings.

# Assign Position

From the "Position" dropdown menu, select the Position CA, then click Configure. Similar to configuring Size above, we can click Add to create a new row, then add settings for the available Attribute Values. Use the following settings. (The same concept with Views applies as above).

The Top and Left positions indicate the distance in pixels from the top left corner of the Configurator container where the text should appear.

# Assign Color

Finally, we need to set the "Colorize" dropdown to the Color CA.

With the text properties configured, click OK to save the Text CA. After republishing the product (not detailed here), we can see a working demo of what we just created.

TODO: Personalization Demo

# Common Considerations for Text Properties

As the configuration of Text CAs involve more complex setup than normal CAs, there are some caveats to always keep in mind.

Inter-Attribute Relationships

The Configurable Attributes used in Text Properties with the "Configure" button can not be used in Sympathetic relationships or with Visbility Rules.

One Configurable Attribute for every Text CA property

All text properties (the settings in the right column of Text CAs) are related to a Configurable Attribute. The CA assigned to every text property is used to show the possible options. For example: Font property uses the related attribute to show possible fonts to use; the related attribute should have a Value Set with the Font Attribute Values.

Text CA properties without extra configuration

**These properties are: Font, Colorize, and Text Alignment. There is no need to provide extra configuration for them; simply select the desired values.

Text properties with extra configuration

**These properties are easily identified as having a Configure button next to them. After a CA has been assigned in the dropdown menu, click the Configure** button to setup extra options. All the properties have two common fields:

Attribute Value: select a value included in the Value Set of the CA.

View: the view which should be used as the text property value is applied.