• Troubleshooting tips

    The process for adding the Buy with Prime button code to your site depends on how your ecommerce site is built, and the theme you use. If you're using a custom theme, or otherwise having issues with adding the button code to your site, use the following guidance. If you're still experiencing issues, contact your sales support representative for assistance.

     

    Tip 1: Find the right file to use for the button code.

    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

  • Tip 2: Find the right section within the file to insert the button code.

    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

  • Tip 3: Find where you want the Buy with Prime button to appear on your site.

    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.

  • Tip 4: Fix any spacing issues

    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".

     

  • Tip 5: Fix any alignment issues

    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.

  • Tip 6: Replace button code after changing or updating your theme

    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.

  • Tip 7: Identify a status code on your site

    Step 1Open your product detail page.

    Step 2Open the context (right-click) menu for the page, and then choose Inspect.

    Step 3In the Web Developer Tools pane, select the Console tab.

    Step 4Press 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.

     

     

     

  • Tip 8: Use the status code to identify issues

    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. 
  • Tip 9: Merchant logo upload and troubleshooting

    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.

  • Why isn't the Buy with Prime button showing up on my product detail page?

     

    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.

On this page

arrow
Was this page helpful?
What didn’t work for you?

Thank you! 

Your feedback helps us improve this page.

Was this page helpful?
What didn’t work for you?

Thank you! 

Your feedback helps us improve this page.