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,
});

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',
});

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',
        }
    }
});

Logo Customization

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',
});

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