For Business

Troubleshoot templates

Validate and troubleshoot the Buy with Prime app for your store and your variations

Validate the Buy with Prime app for your store

  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.
  2. 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.
  3. On the Troubleshooting your Buy with Prime experience page, choose Select products.
     On the Troubleshooting your Buy with Prime experience page, choose Select products.
  4. Choose your products from the list and click Select. A list of validations are performed.
  5. Identify the validations with an exclamation mark and work on the resolutions.

Troubleshoot issues identified in the Product checker

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

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

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

    {{form| payment_button}}

  7. Paste the following line under the </div> or </button> tag, whichever is the last tag containing the payment button.

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

  8. Press Save, and then choose Preview Store.
  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.
  10. (Only proceed if you don’t have the file Product-form.liquid in the Snippets folder.) Search for the following file:

    1. In the Snippets folder:

      • product-info.liquid
      • product-buy-buttons.liquid
    2. In the Sections folder:

      • product-template.liquid
      • product-details.liquid
      • main-product.liquid
    3. In the Templates folder:

      • product.liquid
  11. If the Buy with Prime button doesn’t appear on the expected product page, add a different code block preceding the following line, and then refresh your product page.

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

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.

  1. Locate the Buy with Prime button on any product page on your store.
  2. Move between variants to see the Buy with Prime button update with each variant.
  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}`);
    }
  4. For VariantChange, call the updateURL() as well to read the update, as shown in the following example:
    For VariantChange, call the UpdateUrl() to read the update.
Looking for something else?