Set up Buy with Prime

Quick start guide: Set up Buy with Prime

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.
   

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

After it's live, US-based shoppers will 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 free 30-day returns on eligible orders.

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, contact your sales support representative.

Getting started: Set up Buy with Prime for your site

To learn more about signing up for Buy with Prime, go to Sign up and user settings. After you've signed in, you can start the setup process.

To offer Buy with Prime on your site:

Step 1Open the merchant console.

Step 2Choose Enter business details, and then enter your legal business name, address, and phone number. Choose Next to continue. Note: The email address that you use with Seller Central is allowed.

Step 3Choose Set up Buy with Prime.

Step 4Choose Link your account if you haven't already linked your Seller Central account. Note: The sign-in credentials that you use must be those of the primary owner of the Seller Central account.

Step 5You need to use Amazon's fulfillment services to offer Buy with Prime for any product. Choose Activate Amazon's fulfillment services to continue. Note: Completing this step allows Amazon’s fulfillment services to fulfill Buy with Prime orders.

Step 6Choose Import your Amazon products to import your existing Amazon product catalog information to your Buy with Prime catalog. Note: Completing this step can take several hours if you're importing thousands of SKUs. For more information, go to Import from Amazon.

Step 7Complete registration for Amazon Pay if you haven't set up an account already, using your legal business name. You need to use Amazon Pay payment processing for Buy with Prime orders. Note: Amazon Pay only accepts orders that are more than $0 and less than $150,000.

Step 8Choose Link Amazon Pay account to connect your Amazon Pay account. Note: For linking to Amazon Pay, use your registered business name. In the URL text box, include the "https:" before your URL or pre-populate the "https:".

Step 9Activate tax settings, including setting up tax categories and tax override rules. For more information, go to Taxes.

Step 10Set up an alternate customer service email address, as appropriate. The default email address is the one used to register Buy with Prime. For more information, go to Contact us form.

Step 11Choose Complete setup to complete Buy with Prime setup.

After you've completed setup, you can choose which products to offer Buy with Prime.

Getting started: Pick which products to offer Buy with Prime

To pick which products offer Buy with Prime:

Step 1Open the merchant console.

Step 2Choose Products.

Step 3Find the product that you want to offer Buy with Prime. Make sure that the product is both fulfilled by Amazon and has inventory in Amazon fulfillment centers. Note: The Buy with Prime button doesn’t support products with variants, such as colors or sizes. If you want to offer multiple variants, you must edit your site so that each variant has a separate product detail page. You also need to manage each variant as a separate product in your Buy with Prime catalog.

Step 4Confirm that the Seller Central SKU correctly reflects your site catalog's SKU for the product. The Seller Central SKU and your site catalog's SKU must match. If the SKUs don't match, choose the Edit icon and enter the correct information.

Step 5Confirm that the price associated with the Seller Central SKU matches the price of the product on your site. If the prices don't match, choose the Edit icon and enter the correct information.

Step 6Toggle the Offer Prime button on.  

Note: For more information, go to Catalog.

Getting started: Create Buy with Prime button code

Note: Before creating the code for your Buy with Prime button, make sure that you've completed Buy with Prime setup and selected which products to offer Buy with Prime.

To generate the Buy with Prime button code:

Step 1Open the merchant console.

Step 2From the starter steps, choose Create and install button code.

Step 3Confirm your ecommerce provider from the dropdown.

Step 4Enter the URLs for your site, your privacy policy, and your terms & conditions.

Step 5Enter your store name.

Step 6(Optional) Upload your business logo. Shoppers see your store name as part of the branded checkout and order confirmation experience. Upload a logo, or shoppers will see your store name displayed in text.

Step 7Choose Create code.

Step 8Choose Copy code, and then add the code to the product detail page template. The Buy with Prime button displays on your product pages for any product in your Buy with Prime product catalog that you've selected to offer Buy with Prime.

Getting started: Add the Buy with Prime code to your site

After you create the Buy with Prime button code, you need to add it once 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 DTC store, 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 DTC store 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

Add Buy with Prime to your BigCommerce site:

Step 1Open your BigCommerce dashboard.

Step 2In the left navigation pane, under Storefront, choose Themes.

Step 3From the Advanced dropdown menu on your theme, choose Edit Theme Files.

Step 4In the file tree, open the product detail page template. For example, if you're using the default theme, navigate to Templates > Components > Product View > product-view.html. Note: Depending on your theme, your pathway may be different. For more information, go to Troubleshoot your Buy with Prime button.

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

Add Buy with Prime to your Shopify site:

Step 1Open your Shopify dashboard.

Step 2Under Sales Channels, choose Online Store, and then Themes.

Step 3Choose the Actions dropdown menu on your theme, and then Edit Code.

Step 4In the code editor, under Sections, choose the product detail page template file (for example, Product-Template.liquid). Note: Depending on your theme, your pathway may be different. For more information, go to Troubleshoot your Buy with Prime button.

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

Step 6Choose Preview. If the Buy with Prime button doesn’t appear where you expect it to, you can copy the code somewhere else in the file or choose Older versions to go back to a previous version.

Simplified method to add Buy with Prime to your Shopify site:

Note: This install method might not work for all themes. If you still can't install the Buy with Prime button code, contact merchant support.

Step 1Open your Shopify dashboard.

Step 2Choose Sales Channels, Online Store, Themes, and then Customize.

Step 3In the Shopify designer, choose Default Product or Product from the menu.

Step 4From the side menu, choose the section that contains the Add to Cart or Purchase buttons.

Step 5Choose Add block at the bottom of that section, and then choose Custom Liquid from the menu.

Step 6In the Custom Liquid editor, paste the Buy with Prime button code into the editor, and then choose Save.

Step 7From the side menu, drag the new Custom Liquid block under the Add to cart buttons.

Congratulations! You have installed the Buy with Prime button on your Shopify site.

If you're still experiencing issues, go to Troubleshoot your Buy with Prime button.

For an introduction to the CSS language used to add Buy with Prime go to CSS Basics.

Add Buy with Prime to your WooCommerce site:

Step 1Open the dashboard of your hosting provider.

Step 2Navigate to your cPanel to access your WordPress/WooCommerce site files.

Step 3Find the product detail page template file (for example, "product-template.html").

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

Add Buy with Prime to WordPress sites on WooCommerce

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

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

Step 2On the side file hierarchy find the WooCommerce template-functions.php file. For example: inc > WooCommerce > THEME-WooCommerce-template-functions.php (your path might differ).

Step 3At the end of the file, install the following 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 defer src='https://bootstrap.prod.scoville.dubai.aws.dev/bwp.js'></script>

   <div

      id='amzn-buy-now'

      data-site-id='<YOUR-SITE-ID>'

      data-widget-id= '<YOUR-WIDGET-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 it's accurately installing the HTML code under the Add to cart button. For example:

<div

     "Hello World"

></div>

Congratulations! You have installed the Buy with Prime button on your WooCommerce site.

If you're still experiencing issues, go to Troubleshoot your Buy with Prime button.

For an introduction to the CSS language used to add the Buy with Prime button code, go to CSS Basics.

To add Buy with Prime to another 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}}". Replace product.sku with the naming convention of the SKU identifier from your site template from step 2.

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

Step 5Try previewing 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 rendering correctly. For troubleshooting help, go to Troubleshoot your Buy with Prime Button.

Getting Started: Troubleshoot your Buy with Prime button

I'm having issues adding the Buy with Prime button to my site

The process for adding the Buy with Prime button code to your site depends on how your 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.

Six troubleshooting tips

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 widget id>"

    data-sku="product.sku"

    style="padding:5em"

></div>

This padding style creates a small buffer on all sides of the button. To create a larger or smaller buffer, you can increase or decrease the number from "5" in the example, based on your site design.

To instead create padding on specific sides of the button, rather than on all sides, replace "padding" in the example with either "padding-top," "padding-bottom," "padding-left," or "padding-right."  You can use two of the padding styles in combination to have even more control, such as in this example: "padding-top:5em;padding-left:2em".
 

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 widget 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 DTC store, 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 DTC store 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.

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.

• The Offer Prime toggle 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.
• 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.

Tip: If you want to offer multiple variants, you must edit your site so that each variant has a separate product detail page. You also need to manage each variant as a separate product in your Buy with Prime catalog.

Getting started: Manage your Buy with Prime button

To edit the Buy with Prime button code:

Step 1Open the merchant console.

Step 2From the Home page, choose Manage Buy with Prime button.

Step 3Choose Edit.

Step 4Update the ecommerce provider or the URL for your site.
 

To turn off the Buy with Prime button for a product:

Step 1Open the merchant console.

Step 2Choose Products.

Step 3Find the product you want to stop offering Buy with Prime for, then toggle the Offer Prime button off.
 

To turn off the Buy with Prime button for all products on your site:

Step 1Open the merchant console.

Step 2Choose Settings, Amazon Services, and then Prime Settings.

Step 3Choose the Actions icon and then Deactivate Buy with Prime. When stop offering Buy with Prime, you remove the Buy with Prime button from all the products on your DTC site.

Warning: If you remove the Buy with Prime button code from your site, without completing these steps, then shoppers can still access the URL of the checkout page that includes Buy with Prime, and still place a Buy with Prime order.