For Business

Troubleshoot templates

Follow these steps to make sure that the Buy with Prime app for Shopify works seamlessly with your store.

Validate the Buy with Prime app for your store

Step 1 After completing the onboarding steps within the Buy with Prime for Shopify app, under Managing your account, select Troubleshoot your experience.

After completing the onboarding steps within the Buy with Prime for Shopify app, under Managing your account, select Troubleshoot your experience.

To match your products across Shopify and Amazon, enter your Amazon SKU (viewable on Amazon Seller Central) for each product in your catalog one by one, or in bulk using a pre-formatted CSV file. When you activate Buy with Prime on a product, it’s live on your Shopify site immediately, if the Conditions to offer Buy with Prime are met. If the Buy with Prime button isn’t showing on your site, choose Buy with Prime button not showing on your site? Troubleshoot here.

To match your products across Shopify and Amazon, enter your Amazon SKU (viewable on Amazon Seller Central) for each product in your catalog one by one, or in bulk using a pre-formatted CSV file. When you activate Buy with Prime on a product, it's live on your Shopify site immediately, if the Conditions to offer Buy with Prime are met. If the Buy with Prime button isn't showing on your site, go to Buy with Prime button not showing on your site? Troubleshoot here.

Step 2 On the Troubleshooting your Buy with Prime experience page, choose Select products.

 On the Troubleshooting your Buy with Prime experience page, choose Select products.

Step 3 Choose your products from the list and click Select.

A list of validations are performed. Identify the validations with an exclamation mark and work on the resolutions.

To troubleshoot issues identified in the Product checker:

Step 1 Under Sales Channels, choose Online Store. Your theme options appear.
Step 2 Select the action menu (...), and then choose Edit Code.
Step 3 In the Snippets folder, search for the file Product-form.liquid. If you don’t have that file, go to step 10.
Step 4 Click the file name Product-form.liquid to access the code editor.
Step 5 Place your cursor in the code box, and then search for the word delivery-promise which appears within the code block:

<div class="delivery-promise__promise-container"></div>

Step 6 If you don’t have delivery-promise search for payment_button which appears within the code block:

{{form| payment_button}}

Step 7 Place the text

<div class="delivery-promise__promise-container"></div>

under the </div> or </button> tag, whichever is the last tag containing the payment button.
Step 8 Press Save, and then choose Preview Store.
Step 9 The Buy with Prime checkout option appears with the promise activated for the product that showed as failed in the Product checker. If the checkout option doesn’t appear, proceed to step 11.
Step 10 (Only proceed if you don’t have the file Product-form.liquid in the Snippets folder.) Search for the following file:
a. In the Snippets folder:

  • product-info.liquid
  • product-buy-buttons.liquid

b. In the Sections folder:

  • product-template.liquid
  • product-details.liquid
  • main-product.liquid

c. In the Templates folder:

  • product.liquid

Step 11 If the Buy with Prime button doesn’t appear on the expected product page, add a different code block above

<div class="delivery-promise__promise-container"></div>

and then refresh your product page.

Validate variations

In customized implementations, you might have different product templates for each variant. You can validate and troubleshoot variants using the following steps if Buy with Prime shows up for a subset but not all of the variants.

Step 1 Locate the Buy with Prime button on any product page on your store.
Step 2 Move between variants to see the Buy with Prime button update with each variant.
Step 3 If the Buy with Prime button doesn’t update for each variant, in your theme.js file, under code editor, add the following script:

updateURL() {
    if (!this.currentVariant || this.dataset.updateUrl === 'false') return;
    window.history.replaceState({}, '', `${this.dataset.url}?variant=${this.currentVariant.id}`);
}

Step 4 For VariantChange, call the updateURL() as well to read the update, as in the following example:

For VariantChange, call the UpdateUrl() to read the update.