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:

1. 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.

   

2. Next, we'll click "+ Add Metric" and select "Click through rate (CTR)", add another metric, then select "Conversion rate (CVR)".

   

3. 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:

1. From the Merchandising Studio homepage, click Visual merchandiser.

   

2. To the right of the page, click on the eye icon to set up display preferences.

   

3. 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.

   

4. Next, we'll click "+ Add Metric" and select "Click through rate (CTR)", add another metric, then select "Conversion rate (CVR)".

   

5. 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)

Example & corresponding JSON

 

{

  // …

  "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.

In this case, you need to specify the “Base URL” setting. Example: http://www.mywebsite.com.

Once specified, Algolia re-builds the complete URL: 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