Product Details Configuration

Table of Contents

• Display Options
• Localization
• Profile Customization
• Branding
• Tracking

Display Options

Custom Heading

Option: customHeading
Type: Object
Default: null

Description:
Allows customization of text headings within the Product Details display.

Properties:

• block - Block heading text
• profile - Profile section heading
• characteristics - Characteristics heading
• flavor - Flavor heading
• foodpairing - Food pairing heading

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    customHeading: {
        block: STRING,
        profile: STRING,
        characteristics: STRING,
        flavor: STRING,
        foodpairing: STRING
    },
});

Example (Single Override):

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    customHeading: {
        profile: 'NEW PROFILE HEADING',
    },
});

Display Block Headings

Option: show_block_headings
Type: Boolean
Default: true

Description:
Enable or disable the display of each block heading within the product profile.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    show_block_headings: false,
});

Localization

Language Support

Option: lang
Type: String
Default: 'en'

Description:
Sets the language used for the Product Details display.

Supported Languages:

• English (en)
• Spanish (es)
• French (fr)
• German (de)
• Italian (it)
• Korean (ko)
• Portuguese (pt)

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    lang: 'es',
});

Change Language

Option: changeLanguage
Type: Function (method)
Required: No
Default: n/a
Description:
Changes the widget display language at runtime, reloads translated strings, and remounts the active app UI so the update is visible immediately. When allowedLanguage is set, only languages in that list are accepted. If multiple Preferabli plugins are on the same page, the language change is synchronized across them.

Example:

$(%DIV_ELEMENT%).preferabliPD('changeLanguage', 'es');

Profile Customization

Characteristics Customization

Option: characteristics
Type: String | Object
Default: 'text'

Description:
Controls how characteristics are displayed in the product profile.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    characteristics: STRING | OBJECT,
});

As String

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    characteristics: 'scale',
});

As Object

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    characteristics: {
        display: 'scale',
        bgFill: '#000',
    },
});

Notes:

• scale converts characteristics into visual bars instead of text.
• You can define dimensions:

characteristics: {
    display: 'scale',
    bgFill: '#464356',
    height: '20px',
    width: '100px',
}

Flavor / Food Pairing Customization

Option: flavor, foodpairing
Type: Object
Default: null

Description:
Customize layout, spacing, and styling of Flavor Profile and Food Pairing sections.

Properties:

• display — row | column
• gap — sm | md | lg | xl
• item
  • display — row | column
  • class — custom CSS classes
  • spacing — spacing in pixels
• icon
  • class — custom CSS classes
  • fill — icon color

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    flavor: {
        display: 'row',
        gap: 'xl',
        item: {
            display: 'column',
            class: '%CUSTOM_CLASSES%',
            spacing: 10,
        },
        icon: {
            class: '%CUSTOM_CLASSES%',
            fill: '#000',
        }
    }
});

Branding

Use Preferabli Logo

Option: display.use_preferabli_logo
Type: Boolean
Default: false

Description:
Displays only the Preferabli logo instead of "Powered by Preferabli".

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    display: {
        use_preferabli_logo: true,
    }
});

Logo Placement

Option: logo_placement
Type: String
Default: 'bottom-right'

Description:
Controls the position of the logo within the rendered component.

Values:

• top-left
• top-right
• top-center
• bottom-left
• bottom-right
• bottom-center

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    logo_placement: 'top-left',
});

Logo Inline Style

Option: logo_inline_style
Type: String
Default: null

Description:
Adds inline CSS styling to the logo element.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    logo_inline_style: 'margin-top: 10px; opacity: 0.8;',
});

Logo Class

Option: logo_class
Type: String
Default: null

Description:
Adds custom CSS classes to the logo element.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    logo_class: 'my-logo-class',
});

Logo Content Before / After

Options: logo_before, logo_after
Type: String
Default: null

Description:
Adds text or HTML before or after the logo.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    logo_before: '<span>Recommended</span>',
    logo_after: ' Similar Products',
});

Tracking

Opt Out Tracking

Option: opt_out_tracking
Type: Boolean
Default: false

Description:
Allows you to opt a user out of tracking based on cookie consent or privacy preferences.
When enabled, tracking-related data will not be collected for the session.

This is typically triggered after a user declines cookies or opts out via a privacy control.

Example:

$(%DIV_ELEMENT%).preferabliPD({
    ...configuration_settings,
    opt_out_tracking: false,
});
//
$(BUTTON).on('click', function() {
  $(%DIV_ELEMENT%).preferabliPD('optOutTracking', true);
});

Notes:

• Can be toggled dynamically after initialization
• Recommended to integrate with your site's cookie consent manager
• Applies to all instances of Preferabli Widgets