Buy with Prime Button

The Buy with Prime button signals to shoppers that they can check out using their Prime benefits for eligible items on your site.

The Buy with Prime button leads to a purchase workflow, and should never be used for other actions like directing to a product page. This maintains a consistent experience for Prime members so they always know what to expect when interacting with the Buy with Prime button.

If an item is Buy with Prime eligible, the option to check out with Buy with Prime should always be present so Prime members know how to use their Prime shopping benefits.

Product detail page showing two variations of the Buy with prime button — Product page showing two variations of the Buy with Prime button

Why is this important?

The Buy with Prime button provides a consistent signal that Prime members can use their Prime shopping benefits on your site. The Prime blue color and Prime logo offer a familiar experience that shoppers know and trust.

“It means I just have to click the button, buy and that’s it. I love it. It’s going to get to my house.” - Prime member

“There’s a certain trust value in Amazon.” - Prime member

Shopper goals this supports

Understand their return and product coverage options
Make it convenient to get their product

Shopper journey

The blue dot indicates where this component is used in the shopper journey.

The shopper journey indicating that the Buy with Prime button is shown on the purchase stage of the funnel.

Do's and dont's

Examples of what to do with the Buy with Prime button, incuding ensuring there is enough padding around the button, matching the size and corner radius to your other buttons, and making it clear other ship options don't apply to Buy with Prime.

Customizations

What can be customized?

There are some things you can customize to make the Buy with Prime button feel like an integrated part of your experience. Depending on how you integrate with Buy with Prime, the amount of flexibility in customization may vary. Allowed customizations may include: 1) button size, 2) button corner-radius, 3) delivery date font-face, 4) delivery date font size, 5) delivery date font color, and 6) using a transparent background or matching your site background color.

Aspects like the delivery promise copy, logo, or button color are not customizable to protect the shopper experience. By keeping core elements of the experience the same for shoppers across websites, it: 1) teaches shoppers what to look for, making it easier for them to use and interact with the feature wherever they shop, and 2) helps maintain shopper confidence this is a Prime delivery experience.

Size

Make sure the size of the Buy with Prime button matches the other purchase buttons on your website.

Corner-radius

Adjust the corner radius so it aligns with the other buttons on your website.

Colors

Make the Buy with Prime button feel more integrated into your website by using a button with a transparent background, or matching the background of the button to your experience. When changing the background color, make sure that the text is still legible and accessible.