Product Details Dictionary

The Product Details dictionary contains all user-facing text, labels, and messages displayed by this drop-in. Customize the dictionary to:

• Localize the drop-in for different languages and regions
• Customize labels and messages to match your brand voice
• Override default text without modifying source code for the drop-in

Dictionaries use the i18n (internationalization) pattern, where each text string is identified by a unique key path.

Version: 1.3.5

How to customize

Override dictionary values during drop-in initialization. The drop-in deep-merges your custom values with the defaults.

import { initialize } from '@dropins/storefront-pdp';

await initialize({
  langDefinitions: {
    en_US: {
      "PDP": {
        "Product": {
          "Incrementer": {
            "label": "Custom Label"
          },
          "OutOfStock": {
            "label": "Custom Label"
          }
        }
      }
    }
  }
});

You only need to include the keys you want to change. For multi-language support and advanced patterns, see the Dictionary customization guide.

Default keys and values

Below are the default English (en_US) strings provided by the Product Details drop-in:

{
  "PDP": {
    "Product": {
      "Incrementer": {
        "label": "Item Quantity"
      },
      "OutOfStock": {
        "label": "Out of Stock"
      },
      "AddToCart": {
        "label": "Add to Cart"
      },
      "Details": {
        "label": "Details"
      },
      "RegularPrice": {
        "label": "Regular Price"
      },
      "SpecialPrice": {
        "label": "Special Price"
      },
      "PriceRange": {
        "From": {
          "label": "From"
        },
        "To": {
          "label": "to"
        }
      },
      "Image": {
        "label": "{product} Image {key} of {total}"
      },
      "GiftCardOptions": {
        "ChooseAmount": {
          "label": "Choose amount"
        },
        "OtherAmount": {
          "label": "Other amount"
        },
        "RequiredFieldError": {
          "label": "This field is required"
        },
        "NumberError": {
          "label": "Please enter a valid number"
        },
        "MinError": {
          "label": "Minimum value is {min}"
        },
        "MaxError": {
          "label": "Maximum value is {max}"
        },
        "MinLengthError": {
          "label": "Minimum length is {min_length} characters"
        },
        "MaxLengthError": {
          "label": "Maximum length is {max_length} characters"
        },
        "EmailError": {
          "label": "Please enter a valid email address"
        },
        "InvalidValueError": {
          "label": "Please select one of the allowed values: {values}"
        }
      }
    },
    "Swatches": {
      "Required": {
        "label": "Required"
      },
      "ChooseOption": {
        "label": "Choose an option"
      }
    },
    "Carousel": {
      "label": "Carousel",
      "Next": {
        "label": "Next"
      },
      "Previous": {
        "label": "Previous"
      },
      "Slide": {
        "label": "Slide"
      },
      "Controls": {
        "label": "Carousel Controls",
        "Button": {
          "label": "Show slide {key} of {total}"
        }
      }
    },
    "Overlay": {
      "Close": {
        "label": "Close"
      }
    },
    "Zoom": {
      "Close": {
        "label": "Close"
      }
    }
  },
  "Custom": {
    "quantityLabel": "Quantity"
  }
}