Skip to content
Adobe Commerce Storefront

Product Details Dictionary

The Product Details dictionary contains all user-facing text, labels, and messages displayed by this drop-in. By customizing the dictionary, you can:

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

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

Version: 1.3.5

Default keys and values

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

{
  "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"
  }
}

How to customize

You can override any of these dictionary values by creating a custom dictionary file and loading it during drop-in initialization. The drop-in will automatically deep-merge your custom values with these defaults.

For complete step-by-step instructions, see the Dictionary customization guide.

Quick example:

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


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