Install Buy with Prime button code

Go to the merchant console to get the Buy with Prime code for your site.

After you create the Buy with Prime button code, you need to add it to the product detail page template on your site.

The process for adding the Buy with Prime button code depends on how your site is built and the theme you use.

This content is applicable to standard themes. If you're using a custom theme, go to Troubleshoot your Buy with Prime button.

Note: When you 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.
Save a copy of your product detail page template and follow the general instructions. After you’ve finished installing the Buy with Prime button code, preview the Buy with Prime button for the products that you've set up on your site. For help installing the button code, find an expert.

Ecommerce providers

The following table lists the current compatibility of the Buy with Prime button with ecommerce providers.

Add Buy with Prime to your BigCommerce site:

There are two types of BigCommerce storefronts:

• BigCommerce stencil theme storefront: This type of storefront incorporates industry best practices in technology, design standards, and SEO. To set up Buy with Prime on a stencil theme storefront, follow the steps in Buy with Prime app for BigCommerce.
• Headless storefront: This type of storefront allows you to connect to any frontend network, letting you build your own storefront. A headless storefront requires manual deployment of the Buy with Prime button on your site product detail page template. To set up the button on a headless storefront manually, continue with this article.

Step 1 Sign in to your BigCommerce store.

Step 2 From the side menu, choose Storefront, and then Themes.

Step 3 To create a copy of your current theme, from the Advanced dropdown list, choose Make a copy.

Step 4 From the copied theme, choose the more options […] menu, and then Edit Theme Files.

Step 5 In the file tree, open the product detail page template. For example, if you're using the default theme, choose templates, components, product view, and then product-view.html.

Note: Depending on your theme, your path might differ.

Step 6 Paste the Buy with Prime button code below the add to cart or payment options on the page.

Tip: Try searching for “cart" to find the right location in the file.

Step 7 Choose Save File.

Step 8 Use Preview mode on your site to review the button placement, and then choose Save.

Step 9 If you’re editing a copy, choose Use as Active Theme, and then Publish.

If the Buy with Prime button doesn’t appear on your product page, go to Troubleshoot your Buy with Prime button.

Add Buy with Prime to your WooCommerce site

Note: Because you're adding the Buy with Prime button code as Hypertext Preprocessor (PHP) code, you don't need to update your theme's functions.php file or reinstall the PHP code when you make changes to your theme.

To install the PHP code generated in the Buy with Prime merchant console, follow these steps:

Step 1 Open your cPanel dashboard.

Step 2 Install the WPCode Lite Plugin, also known as WPCode. This plugin helps to insert headers, footers, and code.

• If you already have the WPCode Lite Plugin installed, skip to Step 6.
• If you don’t have the WPCode Lite Plugin, continue to Step 3.

Step 3 On the Plugins section, choose Add New.

Step 4 In the “Search Plugins” field, enter "WPCode Lite”, and then choose Search.

Step 5 Install the Plugin, and then choose Active. A new link called Code Snippets appears on your dashboard side menu.

Step 6 Choose Code Snippets, and then Add New.

Step 7 Choose Create Custom Snippet.

Step 8 In the Add title for snippet field, enter “Buy with Prime”.

Step 9 For Code Type, select PHP Snippet.

Step 10 In the Code Preview editor, paste the following code:

add_action( 'woocommerce_after_add_to_cart_form', 'QL_add_text_under_add_to_cart' );  
function QL_add_text_under_add_to_cart () {  
global $product;  
?>

Step 11 On merchant console, go to the Create and install button code page, and then locate the Buy with Prime button code.

Step 12 Copy the code lines 2 through 8, which excludes the first line and the last line of code.

Step 13 Go back to the WPCode plugin Code Preview editor, and then paste the code that you copied in step 12 on line 5 of the code.

Step 14 Move to line 12 in the Code preview editor, and then copy and paste the following code:

 <?php
}

The final code looks as follows:

\<?php  
add_action( 'woocommerce_after_add_to_cart_form', 'QL_add_text_under_add_to_cart' );  
function QL_add_text_under_add_to_cart () {  
    global $product;  
    ?>

<script async fetchpriority='high' src='https://code.buywithprime.amazon.com/bwp.js'></script>

<div
    id="amzn-buy-now"
    data-site-id="pk96aw05da"
    data-widget-id="w-952cc5Z3yn8c7PzuhiZTXa"
    data-sku="<?php echo $product->get_sku(); ?>"
></div>
  <?php
}

Step 15 Choose Active, and then Update.

The Buy with Prime button appears on the products that offer with Buy with Prime.

Note: If you don't see the Buy with Prime button on your site, clear your WooCommerce cache and cookies and refresh your page. If the Buy with Prime button doesn’t appear on your product page, go to Troubleshoot your Buy with Prime button.

Note: The code you pasted on your site points to the woocommerce_after_add_to_cart_form page hook as shown in the following example:

<?php
add_action( 'woocommerce_after_add_to_cart_form', 'QL_add_text_under_add_to_cart' );
function QL_add_text_under_add_to_cart () {
global $product;
?>

There are additional WooCommerce product page hooks that you can use instead of woocommerce_after_add_to_cart_form. For example, you can use a different page hook, such as: woocommerce_before_add_to_cart_button or woocommerce_product_meta_start to install the Buy with Prime button near your Add to Cart button.

To use a different web hook, modify the Buy with Prime button code. The following code shows the code using the woocommerce_product_meta_start page hook:

<?php
add_action( 'woocommerce_product_meta_start', 'QL_add_text_above_description_form' );
function QL_add_text_above_description_form() {
global $product;
?>

To learn more about where to place the Buy with Prime button code on your site based on page hooks, go to WooCommerce visual hook display.

Simplified method to add Buy with Prime to WooCommerce Sites

If your store is hosted on WordPress, use the following instructions to install the Buy with Prime button code.

Step 1 From your WordPress admin portal, choose Appearance, and then Theme File Editor.

Step 2 From the side file hierarchy, find the WooCommerce template-functions.php file. For example, choose inc, WooCommerce, and then THEME-WooCommerce-template-functions.php. Note that your path might differ.

Step 3 Paste the following code at the last line of code:

Add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );  
function QL_add_text_under_add_to_cart () {  
   global $product;  
   ?>

  <script async fetchpriority="high" src="https://code.buywithprime.amazon.com/bwp.js"></script>

   <div
      id='amzn-buy-now'
      data-site-id="<your site id>"
      data-widget-id="<your button id>"
      data-sku='<?php echo $product->get_sku(); ?>'
   ></div>
<?php
}

This code automatically installs the button code under the Add to Cart button.
If you're having trouble with this install, replace the <div> tag with <div "Hello World"> to help verify that its accurately installing the HTML code under the Add to cart button. For example:

<div
     "Hello World"
></div>

If the Buy with Prime button doesn’t appear on your product page, go to Troubleshoot your Buy with Prime button.

To add Buy with Prime to another ecommerce provider or custom site:

Step 1 Locate where the product detail page template file is stored for your site.

Step 2 Identify the naming convention of the SKU identifier in that template. For example, "product.sku".

Step 3 In the Buy with Prime button code, find the following line:

data-sku="{{product.sku}}"

Step 4 Replace product.sku with the naming convention of the SKU identifier from your site template from step 2.

Step 5 Paste the Buy with Prime button code below the add to cart or payment options on the page.

Step 6 Preview your site before publishing the changes.

Note: The Buy with Prime button only renders on the top-level domain you entered when creating the button. If your testing environment loads on a different domain, the button won't render.

Tip: If you've completed the steps to set up Buy with Prime and have pasted the Buy with Prime button code into the product detail page template of your site, go to your site's product detail pages to confirm the Buy with Prime button is functioning correctly. For troubleshooting information, go to Troubleshoot your Buy with Prime button.