Delivery estimate card

The delivery estimate card shows Prime eligibility and delivery info throughout the shopping journey, helping customers make confident purchase decisions. The card displays an estimated delivery date on product and checkout pages, updating to a more accurate estimate once the shopper signs in. MCF Fast Badges provide an option to show delivery estimates for items fulfilled by MCF but not eligible for Prime.

The delivery estimate card prompts users to sign in and appears in two states:

  • Authenticated: Shown to shoppers who are signed in, offering personalized greetings, quick account access, and tailored recommendations.

  • Unauthenticated: Shown to shoppers who are not signed in, using familiar language and trust-building elements to encourage sign-in.

Delivery estimate UI

Displayed on product detail page

Delivery estimate card, unauthenticated Delivery estimate card, unauthenticated: A Prime delivery message prompting the shopper to sign in to see an accurate delivery estimate. Reinforces value with “Fast, free delivery” and “Easy returns” icons.
Delivery estimate card, authenticated Delivery estimate card, authenticated: Displays a confirmed Prime delivery estimate for signed-in shoppers. Includes visual cues for “Fast, free delivery” and “Easy returns” to emphasize convenience.
Learn more modal Learn more modal: By clicking on the "Learn more" text, the modal on the left appears.

This modal helps shoppers understand the value of signing in with Prime by providing details about Prime shipping benefits, including estimated delivery timelines and return options.

Displayed in checkout (Mixed cart)

Delivery estimate card with free delivery on X items, unauthenticated Delivery estimate card with free delivery on X items, unauthenticated: This option encourages unauthenticated shoppers to sign in to their Amazon account to take advantage of their Prime shopping benefits on the eligible products in their cart.
Delivery estimate card with delivery estimate, unauthenticated Delivery estimate card with delivery estimate, unauthenticated: This option encourages unauthenticated shoppers to sign in to their Amazon account to receive the product by the estimated date.
Delivery estimate card with fast, free delivery & return on eligible items, unauthenticated Delivery estimate card with fast, free delivery & return on eligible items, unauthenticated: This option encourages unauthenticated shoppers to sign in to their Amazon account to take advantage of their Prime shopping benefits on eligible items.
Delivery estimate card with name, authenticated Delivery estimate card with name, authenticated: This option greets authenticated Prime members with their first name. Selecting their hyperlinked name allows them to sign out or switch accounts.

Display in checkout (Prime cart only)

Delivery estimate card with delivery estimate on X items, unauthenticated Delivery estimate card with delivery estimate on X items, unauthenticated: This option encourages unauthenticated shoppers to sign in to their Amazon account to receive eligible products in their cart by the estimated date.

Placement

Product detail page

Product detail page Place the Delivery estimate card card directly above the Add to Cart button to ensure visibility and proximity to the call-to-action.

Cart

Cart Place the Delivery estimate card directly above the checkout button to ensure visibility and proximity to the call-to-action.
Cart Place the card directly below the shipping methods header but above other shipping options, such as standard delivery, second-day delivery, and next-day delivery.

Dos and don'ts

Dos and don'ts for the Delivery estimate card component

Design guidelines

Design options are available to customize the card’s appearance, ensuring it aligns seamlessly with your site’s style and enhances user engagement with tailored messaging.

Font and background color

You have flexibility to customize the font and card background color to align with your brand’s visual style. However, the Prime Check logo must remain unchanged, and any background color modifications must meet accessibility standards for readability and contrast.

Corner radius

Adjust the corner radius to align with aesthetic on your site.

Delivery estimate card with square corners Square: Sharp, right-angled corners with no rounding. Use for a more professional, formal, or crisp look.
Delivery estimate card with rounded corners Rounded (10 pixels): Partially rounded, strikes a balance between square and fully rounded. Common for modern sites.
Delivery estimate card with pill shape Pill (25 pixels): Fully rounded, radius container. Use for key actions, floating buttons, or an approachable, modern aesthetic.
Delivery estimate card with custom shape Custom (26-50 pixels): Choose your corners to match other containers and buttons on your site. Corner radius ranges are from 26-50px. Note that the estimate card is intended to be a card and not a button. Too large a radius can incorrectly give the impression of a button and confuse interaction patterns for your shoppers.

Message options

Delivery estimate card message options are personalized prompts designed to encourage Prime members to sign in. Messages feature the shopper’s name, dynamic delivery estimates, and eligibility for fast, free delivery and easy returns on eligible items in their order.

Message options Displays shopper’s name; used when the shopper is already authenticated.
Message options Focuses on the delivery estimate; used during the checkout process to emphasize quick delivery as a final incentive to complete the purchase.
Message options Focuses on Prime shopping benefits; used to emphasize the benefit of signing in and completing the purchase.
Message options Focuses on Prime shopping benefits with location-specific delivery estimates: used to prompt shoppers to sign in for personalized delivery details.
Message options Focuses on fast, free delivery in a mixed order; used to emphasize the benefit of signing in and completing the purchase.
Message options Focuses on the delivery estimate for a mixed order; used during the checkout process to emphasize quick delivery on X items in the shopper’s order as a final incentive to complete the purchase.

Edge cases

Loading delivery estimate Loading delivery estimate: Displays when Prime delivery information is being retrieved or updated, such as after sign-in, while browsing products, during checkout, or when changing delivery addresses.
No delivery estimate returned No delivery estimate returned: Displays when delivery dates are uncertain but the item still qualifies for Prime shipping.
No delivery estimate nor return policy returned No delivery estimate nor return policy returned: Displays when both delivery date and return details are uncertain, but the item still qualifies for Prime shipping.
Not returnable Not returnable: Appears when an item isn’t eligible for return, typically due to restrictions like hazardous materials, but still qualifies for Prime shipping.
Do not show Item out of stock: No delivery estimate UI is displayed when a product is out of stock.

Responsiveness

Widget width ranges from 300-740px.

300 pixels
300 pixel width

420 pixels
420 pixel width

560+ pixels
560 pixel width

Max width 740 pixels
740 pixel width