Configuring Visual Editor
How to configure display preferences in the Visual Editor
Throughout the Algolia Merchandising and Admin areas you’ll see your products represented as preview cards containing a picture and a title. You can configure these cards to show information that you may need to perform merchandising tasks, evaluate search results or work on product recommendations. Typical uses include showing a product’s stock status, price, margin and launch date. Any data that you send to Algolia can be added to the product cards.
With the Display Preferences screen, you define how to display your images in the dashboard. You can also add titles, tags, and category page identifiers.
The preferences you set here apply to the currently selected index. They apply to all parts of the dashboard, such as the Merchandising Studio, Visual Editor, Indices browse tab, Analytics, AI Re-Ranking and Personalization sections.
These settings apply at the index level, for all users who have access to this index through the dashboard.
How to access the Display Preferences screen
You can access this screen from the Visual Editor screen by clicking on the settings button at the top right of the Visual Editor.
Wherever you access the Display Preferences screen, the settings apply globally to the dashboard:
- in the Analytics tab
- in the Indices - Browse tab
- in the Rule Visual Editor
- in the Merchandising Studio (if you have access to that feature)
- in the Personalization tab (if you have access to that feature)
- in the AI Re-Ranking simulator (if you have access to that feature)
- In the Recommend models page (if you have access to that feature)
How to use the Display Preferences screen
The Display Preferences screen contains four tabs: Titles, Tags, Images, Category Page Identifiers.
The first and third tabs, Titles and Tags, allow you to choose what to display under each image.
- You display the title and one or more subtitles as a line of text. They’re ideal for displaying the name and longer attributes describing your products. Optionally, you can also display label for your subtitles.
- Tags are small, shaded boxes under the titles. They’re ideal for displaying numbers like price, boolean values, and a single word of information.
The second tab, Metrics, allows you to define the KPIs you'd like to display for each product.
The fourth tab, Images, allows you to define the image attributes.
Review the following sections on this page for additional detail on their usage.
Title tags
Title
The title concretely describes the product. This is commonly the name or title attribute of an item.
Subtitle(s) and Add a Label
The subtitle displays an additional description to your products, such as a description attribute.
You can optionally add a label on the same line of the corresponding subtitle. If you don’t enter a label but your subtitle is not a text (it can be a list, an object), the subtitle attribute name will be automatically selected as a label.
This will result in:
- if there is no label, your subtitle will be displayed as a text
- if there is a label and your subtitle is a text
- the label will be displayed on the left side of the card
- the subtitle will be displayed as a text on the right side of the card
- if there is a label and your subtitle is not a text
- the label will be displayed on the left side of the card
- an Information icon will be displayed on the right side of the card, with a tooltip to display the subtitle’s content (see tooltip section below for more information).
Add title
This lets you add up to three subtitles, each with an optional label.
On this tab, you can add at-a-glance analytics metrics of your choice by product on the simulation page.
To enable displayed metrics, on the Display Preferences screen:
- Choose the Metrics tab, and toggle to "Display metrics". For this example, we'd like to see impressions, CTR, and conversion. For Metric 1, we'll click the field that reads "Select a metric" and choose "number of impressions" from the list.
- Next, we'll click "+ Add Metric" and select "Click through rate (CTR)", add another metric, then select "Conversion rate (CVR)".
- Click "Save".
Tags tab
On this tab, you can add small boxes, as seen in the preceding screenshot. You just have to select the desired attributes from the list box.
The attributes selected are commonly price, color, brand, category, or other short and useful information.
Images tab
Display images button
This setting determines whether Algolia should display images or not.
If you don’t have images in your records, you can turn this setting off.
If your images aren’t displaying properly, take a look at the image troubleshooting guide at the bottom of this page.
Image attribute
Tell Algolia which image attribute to use.
If you want to see images, you need to specify the attribute in your index that contains your images. When you send Algolia your data for the first time, Algolia tries to guess the image attribute. However, if it’s unable to, you need to select the correct attribute manually.
Note: if this field is left blank or is wrong, Algolia can’t display your images. Consult your internal technical team for help with this.
Prefix (optional)
Only use this setting if your defined image attribute doesn’t already contain a complete URL. For example, if your image attribute is a partial URL such as images/123456.jpg, then use the prefix setting to add the http://www.mywebsite.com/ so Algolia knows where to find the image. Your internal technical team can help you with this.
Suffix (optional)
Only use this setting if your defined image attribute doesn’t contain an extension. For example, if your image attribute is an image name without extension, such as images/123456, then use the suffix setting to add the .jpg or .png at the end. Your internal technical team can help you with this.
The new Merchandising Studio now allows you to make data-driven decisions on your search results and category pages by seeing products’ key KPIs at a glance when using the Visual merchandiser tool.
To configure the KPIs that show up on each product tile using the Merchandising Studio Visual Editor, follow these steps:
- From the Merchandising Studio homepage, click Visual merchandiser.
- To the right of the page, click on the eye icon to set up display preferences.
- Choose the Metrics tab, and toggle to "Display metrics". For this example, we'd like to see impressions, CTR, and conversion. For Metric 1, we'll click the field that reads "Select a metric" and choose "number of impressions" from the list.
- Next, we'll click "+ Add Metric" and select "Click through rate (CTR)", add another metric, then select "Conversion rate (CVR)".
- Click "Save".
SUPERUSER TIP: Once the KPIs you'd like displayed are selected, you can change the order in which they appear by hovering to the left of each metric; a hamburger will appear and you can then drag to re-order your KPIs to suit your preferences.
When you define a title, subtitles, and tags (see above), their values can be too long or complex to be displayed. Algolia will always allow you to see them entirely in tooltips accessible on hover of the truncated text or of an Information icon.
These tooltips first show the attribute name at the top. Then, depending on the nature of the data, here are the various cases you might encounter:
Long Text
Example & corresponding JSON
{
// …
"label": "Spin Master with some very long text to test how it renders when clamping on 2 lines"
}
The full text is displayed on multiple lines.
List
Example & corresponding JSON
{
// …
"categories": ["Classics", "British & Irish", "Shakespeare", "Reference", "Teen & Young Adult"]
}
Each item of the list is displayed on one line, truncated if necessary.
Object (Key-Value list)
{
// …
"inventory": {
"xs": 293,
"s": 1239,
"m": 29,
"l": 98,
"xl": 122,
"1x": 219,
"2x": 302,
"3x": 5
}
}
An object is a key-value list. In this case we show:
- A first column with the keys,
- One or more columns with values (one column in the example above, two columns in the example below)
{
// …
"inventory": {
"xs": [293, 123],
"s": [1239, 876],
"m": [29, 18],
"l": [98, 75],
"xl": [122, 101],
"1x": [219, 199],
"2x": [302, 258],
"3x": [5, 1]
}
}
Other
Example & corresponding JSON
{
// …
"ga": {
"bu": {
"zo": "meu"
}
}
}
In other more complicated cases, we fallback to displaying the data raw with indentation to help readability.
If you’re having problems with your images, check out the following suggestions. Consult your internal technical team for help with this.
Your image attribute is a relative URL
Example: /images/123456.jpg.
http://www.mywebsite.com.http://www.mywebsite.com/images/123456.jpg.Your images URLs are blocked
If you have links to images in your records, Algolia needs to fetch them. Make sure your servers, server providers, or CDN aren’t blocking requests from user-content.algolia.com with the user agent algolia/user-content-v1.
Your records have no image attribute
Deactivate the “Display Images” option. To see images, you need to add an image attribute to your records. Contact the person in your organization who is in charge of importing records and ask them to add an image attribute.
Your images are too large
Internally we have a file size limit of 10MB and an image resolution limit of 20 megapixels. If the URLs lead to images that are larger than this, they will be blocked and not display.
Still not working?
Contact our Support Team here