Delivery Message Element
Buy with Prime API is now available for early access
Sign up for early access to the Buy with Prime API using the 'Sign Up' button below. The API may change as Amazon receives feedback and iterates on it.
The delivery message element is a web component that displays the Prime Check logo, a delivery estimate, and eligibility for returns. Use the delivery message element on the product listing, cart, or checkout page to show that the product is eligible for Buy with Prime, provide a delivery estimate, and indicate whether the product is returnable.
- JavaScript source:
https://cdn.elements.amazon/elements/amazon-delivery-message/v1.0/web-component.js. - HTML tag:
<amazon-delivery-message>.
The following image shows a delivery message element on a category page.
Attributes on the element tag
The delivery message element requires a product identifier attribute, and it has optional attributes for display settings.
Product identifier
One of the following:
| Attribute | Description |
|---|---|
product-external-id | An identifier from your ecommerce platform. |
product-id | A Buy with Prime generated product ID. |
product-sku | A SKU from your ecommerce platform. |
You can also optionally specify a marketplace by using the product-marketplace-id attribute, which is set to US by default. For a site that doesn't use Shopify, see Handle product variants. For a site that uses Shopify, to support variants, use the following attributes.
| Attribute | Value | Description |
|---|---|---|
provider | "shopify" | Sets the ecommerce service provider. |
variant-helper | "true""false" | Determines whether the element automatically updates when a shopper selects a new variant on a product detail page. The default is "true". |
Appearance
| Attribute | Value | Description | Example |
|---|---|---|---|
message-type |
"none""options-available""delivery-estimate""delivery-estimate-and-returns" |
Shows whether Prime options are available, or displays a delivery estimate and returns information. The default is "delivery-estimate". |
"none" "options-available" "delivery-estimate" "delivery-estimate-and-returns" |
color-mode |
"light""dark" |
The color mode of the element. The default is "light". |
"dark" |
text-color |
Hex color code | The text color of the element. | "#B35E14" |
font-family |
Name of the font | The font of the element. The default is "Amazon Ember". |
"Times', serif" |
font-size-base |
Size in pixels, for example 16px |
The font size of the element. The Prime Check logo increases or decreases in size to match. The default is 14px. |
18px |
content-alignment |
"left""right" "center" |
The alignment of the element. The default is "left". |
"left" "right" "center" |
Example
<amazon-delivery-message product-external-id="[YOUR-PRODUCT-EXTERNAL-ID]" message-type="options-available" content-alignment="right">
</amazon-delivery-message>
Related topics
Updated 4 days ago