Troubleshoot your Buy with Prime button

Based on the different themes or site builds, it might not be obvious which file to use for inserting the button code in your site.

When you open a file, look for HTML tags such as <div>, <p>, or <span>. If you don’t see HTML tags, it’s usually a layout file, and not the correct location for adding the button code. If you can’t find the correct file, try searching for the following key terms:

- product-view

- product-template

- product-form

- product

- add-to-cart

- product-details

- product-info

Look for the following names or patterns that might help you find what section to use within the file for inserting the button code:

- cart

- add to cart

- data-cart

- purchase

- payment

It can take some time and trial and error to locate the best placement for the button code on your site. To help you understand the page layout and location for the button code, try pasting "<h2>Hello World</h2>" onto the page, and then preview your site so that you can see where “Hello World” appears. You can then move that “Hello World” around the page, until you find the perfect location for the button.

After “Hello World” appears where you want the Buy with Prime button to appear, replace "<h2>Hello World</h2>" with the button code from the merchant portal.

If the Buy with Prime button appears too close to other elements on your site, you can adjust the padding surrounding the button. For example, edit your button code by adding the following padding style:

<div 
    id="amzn-buy-now" 
    data-site-id="<your site id>" 
    data-widget-id="<your button id>" 
    data-sku="product.sku"
    style="padding:5px;" 
></div> 

Place this padding code right before the <beginning of Buy with Prime code>. Make sure the div of the other payment buttons is closed out before adding this code, otherwise it might not move the button down at all. If this code doesn’t work, you can add <br>; <p> right under the <beginning of Buy with Prime code> text.

This padding style creates a small buffer on all sides of the button. You can create a larger or smaller buffer based on your site design. To adjust the buffer, increase or decrease the number “5" in the preceding sample code.

You can create padding on specific sides of the button, instead of padding all sides. To pad specific sides, replace “padding” in the preceding sample code with either “padding-top”, “padding-bottom”, “padding-left” or “padding-right”. You can combine padding styles to have more control. For example: “padding-top:5px; padding-left:2px”.

If the Buy with Prime button isn’t aligned correctly with other site elements, you can center the button by wrapping the button code inside another "<div>" tag, and then using the “display:flexbox” style.

In the following example, notice the additional wrapper "<div>" tag that surrounds the button code. We’ve also given it a unique color, “background-color: pink,” so that when we’re viewing it on the screen, we can see what we’re working with:

<div
    id="bwp-wrapper"
    style="background-color: pink; width: 100%; display:flexbox; align-content: center">
<div
    id="amzn-buy-now"
    data-site-id="<your site id>"
    data-widget-id="<your button id>"
    data-sku="product.sku"
></div>
</div> 

After you have your wrapper "<div>" tag in place, and the unique color set, you can check the screen, and notice a large pink box, with the button centered within it.

Note: This test might rearrange much of the page. You can adjust the “width” and “align-content” styles for the wrapper "<div>" until the Buy with Prime button is aligned how you want it. For more help with aligning content, go to Flexbox cheat sheet. After the button is aligned correctly, remove the “background-color” style.

To install the Buy with Prime button code, you need to edit the theme of your ecommerce site, regardless of whether it uses a standard theme or a custom theme. If you later change or update the theme, you may inadvertently change or erase certain features of your ecommerce site theme, including your Buy with Prime button code. If this is the case, you’ll see that the Buy with Prime button has disappeared from your site.

If you’re planning to change or update your theme after you’ve added the Buy with Prime button code, make sure to copy the button code (and note its location within the theme) so that you can add it back in again.

- The button isn’t installed properly. An issue is blocking the request on the back-end.

- An incorrect domain is listed in your Buy with Prime account.

- The SKU in the catalog isn’t marked as Prime eligible.

- The Prime button isn’t turned on for the SKU in the merchant console.

- The Prime button takes 15 minutes to activate after it’s turned on.

1. Open the merchant console.

2. Choose Products.

3. Find the product that you want to offer Buy with Prime for.

4. Turn Offer Prime on.

- The button isn’t installed properly. An issue is blocking the request on the back-end.

- The SKU isn’t found in the Buy with Prime catalog.

- Your ecommerce site SKU doesn’t match the Buy with Prime catalog SKU.

1. Open the merchant console.

2. Find the product with error code 601.

3. Confirm that the Amazon and ecommerce site SKUs are mapped correctly.

4. Changes in the merchant console to the SKU mapping can take up to 15 minutes.

- No delivery promise was generated.

- You don’t have a valid Prime status.

- Your SKU doesn’t have inventory.

Note: To validate your levels of inventory, go to Check product inventory in Seller Central.

1. Open the merchant console.

2. Find the product with error code 701.

3. Confirm that the Amazon and ecommerce site SKUs are mapped correctly.

4. Ensure that the product is both fulfilled by Amazon and has inventory in Amazon fulfillment centers.

5. If you have multiple Seller Central accounts, confirm that the correct Seller Central account is linked to the Amazon SKU for the product.

- Missing SKU.

- The Buy with Prime button might be missing some information related to the specified product.

Verify and ensure that you’ve installed the button code correctly.

If you have a custom setup, ensure that you’re populating the data-sku attribute in the button <div> tag.

To resolve this issue, add your website URLs to allow the Buy with Prime button to appear, including on your product pages:

1. Sign in to merchant console.
2. On the side menu, choose Settings, and then Button & cart.
3. On the Button code and installation section, choose Edit code.
4. On the Your URLs field, enter or paste your URLs with and without “www”, such as “www.example.com” and “example.com.”
5. Choose Add URL for each URL that you enter.
6. Choose Save changes.