Set up Buy with Prime

To set up Buy with Prime, follow this workflow:

• How do I set up Buy with Prime?
• Turn on Buy with Prime for your products
• Create the Buy with Prime button code
• Install the Buy with Prime button code
• Manage your Buy with Prime button
• Buy with Prime FAQ

Note: For troubleshooting tips, go to Troubleshoot your Buy with Prime button.

With Buy with Prime, you can grow your ecommerce business by attracting more shoppers with Prime - offering fast, free one-day and two-day delivery and a checkout experience shoppers know and trust.

To offer Buy with Prime on your site, you need:

• A Professional Seller Central account to import your existing Amazon product catalog information to your Buy with Prime catalog.
• Amazon's fulfillment services, which includes Multi-Channel Fulfillment (MCF), to offer a fast, free delivery experience for Buy with Prime orders.
• Amazon Pay to offer shoppers a fast, familiar way to check out using the shipping and payment information from their Amazon account. For more information on setting up Amazon Pay, go to Payments.
   

After setup, you can turn on Buy with Prime for your products, and then create button code to install on the products detail page template of your site.

When Buy with Prime is activated on your site, US-based shoppers see the Prime badge on the product detail pages on your site for the products you have selected to offer Buy with Prime, along with real-time delivery promises throughout checkout. Using the Buy with Prime button, shoppers can directly check out with single product purchases by signing into Amazon to use their payment and shipping information and then get timely delivery notifications and easy returns.

You'll receive Buy with Prime customer order information – including email addresses – that you can use to build direct relationships with customers.

To learn more about Buy with Prime pricing, go to pricing.

Install the Buy with Prime button code

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. 

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 lets you 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 manually on a headless storefront, continue with this article.

Step 1Sign in to your BigCommerce store.

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

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

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

Step 5In 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 be different.

Step 6Paste 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 7Choose Save File.

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

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

If the Buy with Prime button doesn't appear on your site, go to Troubleshoot your Buy with Prime button. If you’re still having issues, contact merchant support.

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 edit your theme’s functions.php file or reinstall the PHP code when you make changes to your theme.

Step 1Open your WooCommerce or WordPress cPanel dashboard.

Step 2Install the WPCode Lite Plugin, previously 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 3On the Plugins page, choose Add New.

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

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

Step 6From the side menu, choose Code Snippets, then Code Snippets, and then Add New.

Step 7Choose Create Custom Snippet.

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

Step 9For Code Type, select PHP Snippet.

Step 10In 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 11On the Install Buy with Prime button code page, locate the Buy with Prime button code block.

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

Step 13Go 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 14In the Code preview editor, move to line 12, and then copy and paste the following code:

<?php
}

The final code will look 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/<your file name>.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
}

Step 15Choose Active, and then Update.

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 or contact merchant support.

Note: The Buy with Prime button code that 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, perform the following steps:

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

Step 2From the side file hierarchy, find the WooCommerce template-functions.php file. For example, choose inc, WooCommerce, and then THEME-WooCommerce-template-functions.php.

Note: Depending on your theme, your path might be different.

Step 3Paste the Buy with Prime button code at the last line of code. For example:

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/<your file name>.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
}

The Buy with Prime button is automatically installed below Add to Cart.

Tip: If you're having issues installing the button, replace the <div> tag with <div>Hello World</div> to verify that the editor is accurately installing the HTML code below the Add to cart button. For example:

<div>
     Hello World
</div>

Note: If the Buy with Prime button doesn’t appear on your product page, go to Troubleshoot your Buy with Prime button or contact merchant support.

Add Buy with Prime to other ecommerce provider or custom site

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

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

Step 3In the Buy with Prime button code, find the line data-sku="{{product.sku}}".

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

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

Tip: Try searching for the terms payment or cart to find the right place in the code.

Step 6Preview 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, go to your site's product detail pages to confirm the Buy with Prime button is rendering correctly. For troubleshooting help, go to Troubleshoot your Buy with Prime Button or contact merchant support.

Validate your Buy with Prime button

The process you use to validate your Buy with Prime button is based on whether your products have variations.  

Buy with Prime button validation if your site doesn't have variations

To validate that the Buy with Prime button is working correctly on your site, follow these steps:

Step 1Check that the Buy with Prime button appears correctly at the desired location. 

Step 2Check that the correct SKU appears at checkout after you choose Buy with Prime. 

Step 3If the Buy with Prime button isn't working, verify that you've completed all the button installation steps correclty.

Note: If you're outside the US and the Buy with Prime button doesn't appear on your site, try using a VPN server during the installation. If you're still having issues, contact merchant support.

Buy with Prime button validation if your site has variations

To validate that the Buy with Prime button is working correctly on your site, follow these steps:

Step 1Check that the Buy with Prime button appears correctly when switching between variations.

Step 2Check that the correct variation SKU appears at checkout when the Buy with Prime button is selected.

Step 3If the Buy with Prime button isn't working, verify that you've completed all the button installation steps correclty.

Step 4If the Buy with Prime button is still not working, use the following steps to undo the variations implementation:

1. Go to the merchant console.
2. Turn off Offer Prime for the product variations.
3. Undo the Buy with Prime button implementation.

Note: If you're outside the US and the Buy with Prime button doesn't appear on your site, try using VPN server during the installation. If you're still having issues, contact merchant support.