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 (in bold):

<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 (in bold) 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.

Step 1 Open your product detail page.
Step 2 Open the context (right-click) menu for the page, and then choose Inspect.
Step 3 In the Web Developer Tools pane, select the Console tab.
Step 4 Press Ctrl+F or Cmd+F and search for “STATUS_CODE”.

The console displays the status code.

Note: If you are using Firefox as your browser, go to the Console tab, and then select the Logs tab.

The following is a list of error statuses that can appear during Buy with Prime button installation or troubleshooting.

No error status code

• Description: The button isn’t installed properly. An issue is blocking the request on the backend.
• Potential sample cause: An incorrect domain is listed in your Buy with Prime account.

Status code 201

• Description: The SKU in the catalog isn’t marked as Prime eligible.
• Potential causes:
  
  • 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.
• Solution: Open the merchant console. Choose Products. Find the product that you want to offer Buy with Prime for. Turn Offer Prime on.

Status code 601

• Description: The button isn’t installed properly. An issue is blocking the request on the backend.
• Potential causes:
  
  • The SKU isn’t found in the Buy with Prime catalog.
  • Your ecommerce site SKU doesn’t match the Buy with Prime catalog SKU.
• Solution: Open the merchant console. Find the product with error code 601. Confirm that the Amazon and ecommerce site SKUs are mapped correctly. Changes in the merchant console to the SKU mapping can take up to 15 minutes.

Status code 701

• Description: No delivery promise was generated.
• Potential causes:
  
  • 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.
  

• Solutions:
  
  • Open the merchant console. Find the product with error code 701. Confirm that the Amazon and ecommerce site SKUs are mapped correctly.
  • Make sure that the product is both fulfilled by Amazon and has inventory in Amazon fulfillment centers.
  • If you have multiple Seller Central accounts, confirm that the correct Seller Central account is linked to the Amazon SKU for the product.

Status code 901

• Description: Missing SKU.
• Potential cause: The Buy with Prime button might be missing some information related to the specified product.
• Solution: 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.
  

  ---

When you create your Buy with Prime button code, you have an option to upload your business logo. For instructions on logo uploading and troubleshooting go to Set up merchant logo for Buy with Prime.

Confirm that your Buy with Prime button is displaying properly by checking the product detail page on your site.

• Offer Prime is turned on for the product.
• You’ve added the Buy with Prime button code to the product detail page template of your site.
• The product SKU in the merchant console correctly reflects your site catalog’s SKU for the product.You have inventory for the product in Amazon’s fulfillment network.
• Note: To validate your levels of inventory, go to Check product inventory in Seller Central.
  
• Confirm that you entered the correct top-level domain for your site when creating the Buy with Prime button code.
• Confirm that the domain name that you used with your button code matches the approved domain name for your site. Try copying the exact domain name that appears after “https://” in your site URL, and then pasting that name into your button code information.