Documentation
Return to merchant console

Activating Variations: Shopify

Suggest Edits

Purpose of this document

This document provides implementation instructions for the custom JavaScript (custom JS) and published variable approaches to activate Buy with Prime variations for ecommerce sites provided by Shopify. Note: The custom JS approach supports quantity, whereas the published variable approach doesn't support quantity.

Pre-requisites

To support variations and quantity, the Buy with Prime button code must already be added to the merchant ecommerce site.
Important: Currently, you can't import more than 100 variants for a product from Seller Central to the merchant console.
If you need guidance to generate and install the Buy with Prime button code, go to set up Buy with Prime.

Custom JS approach

Overview

A custom JS approach is available to add the Buy with Prime button for products with variations. In addition to variations this approach also supports quantity. This approach can be implemented through this function:

window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);
The function should be called by the product detail page when the shopper changes the selected product variation on the page or the product quantity.

For example, if there are separate selectors for size and color, the function should be called when either is changed, to refresh the Buy with Prime button. No additional change is required for the Buy with Prime button to load on the product detail page. One of the options is to use Liquid objects to retrieve the variation value.

The approach requires technical expertise to implement and maintain the solution. This solution requires coding capabilities to develop, test and deploy the custom JS changes to the ecommerce site. As with the Buy with Prime button, if the theme is updated, verify that the custom JS code isn't overwritten.

Sample code is provided to show how the custom JS approach works to get the necessary input parameters and to call the custom JS function. To track the variation and quantity change on the product detail page the function uses the following:

  • Product liquid objects
  • Custom JS

The new values are passed to the Buy with Prime button within the native event handler function provided by the ecommerce service provider:
window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);

This document includes sample code, which might require modification for your site. Developers need to define the optimal configuration for these three elements:

  • Applicable event listeners
  • Pull updated variations information
  • Call the function window.bwp.updateWidget JS.

Installation instructions for custom JS approach

Interface

window.bwp.updateWidget:
Input:
selectedSku String - SKU that's selected and must be reflected in the Buy with Prime button.
selectedQuantity Integer - Quantity selected by Shopper to be passed to checkout and other flows.
variantSkus List<String> - list of variations SKUs that are shown on the given product detail page.
Output:
Void

Steps for installing the function

Note: The following instructions only apply to the Dawn theme on Shopify. If the ecommerce site isn't using the Dawn theme, then these sample instructions will need to be adapted to the site theme.

Note: Delete the following line from the button code, if present: 

<script defer src="https://code.buywithprime.amazon.com/default.variant.selector.shopify.js"></script>

Step 1- On the main product page, find the outermost element that contains the product information. Add these two classes in that div class:

• data-product-quant CSS class
• {% assign current_variant = product.selected_or_first_available_variant %} data-product-sku="{{ current_variant.sku }}" data-all-variant-skus="{{ product.variants | map: 'sku' | join: ',' }}"
After adding these classes, the code must look similar to this:

<div class="product__info-wrapper grid__item data-product-quant {% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper—extra-padding{% endif %}" {% assign current_variant = product.selected_or_first_available_variant %} data-product-sku="{{ current_variant.sku }}" data-all-variant-skus="{{ product.variants | map: 'sku' | join: ',' }}">

Step 2- Open file assets/global.js

Step 3- Add the following code to set variables at the beginning of the file.

let productQuantity = document.querySelector("quantity-input.quantity input[name='quantity']");
let selectedQuantity = Number(productQuantity.value);
let selectedSku = document.querySelector('[data-product-sku]').dataset.productSku;
let variantSkus = document.querySelector('[data-all-variant-skus]').dataset.allVariantSkus.split(',');

Note: There are themes that refer to "quantity" with abbreviated fields such as "qty" or "quant". Check the variable name and update the first line of code if necessary. Use the browser developer tools to look for the element of quantity input to select the correct element.

Step 4- On the QuantityInput class, add the following in the onButtonClick and onInputChange event.

selectedQuantity = Number(productQuantity.value);
window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);

Step 5- On the VariantSelects class, search for a function named with a name equal or similar to renderProductInfo() add the following code to the renderProductInfo() function that you found.

selectedSku = this.currentVariant.sku;
window.bwp.updateWidget(selectedSku, selectedQuantity, variantSkus);

Step 6- Proceed to the last section of this document to perform Function validation steps.

Published variable approach

Overview

A published variable approach is available to add the Buy with Prime button for products with variations. However, this approach doesn't support quantity. This feature uses ShopifyAnalytics on Shopify provided ecommerce sites. When the shopper switches between variations on a product detail page, the Buy with Prime button is refreshed.

If the ecommerce site supports published variable approach, an additional line of code needs to be added to the Buy with Prime button code to implement it. If the theme is updated, the merchant needs to ensure that the Buy with Prime button code persists.
Installation instructions for published variable approach
These instructions explain how to add the Buy with Prime button for products with variations on ecommerce sites provided by Shopify. Insert the following line of code into the second line of the Buy with Prime button code from the console:

First 2 lines of the current Buy with Prime button code:

<!-- Beginning of Buy With Prime Widget -->
<script defer src="https://code.buywithprime.amazon.com"></script>
{% if product.sku%}
...
...

First 3 lines of the Buy with Prime button code after inserting published variable line: 

<!-- Beginning of Buy With Prime Widget -->
<script defer src="https://code.buywithprime.amazon.com/bwp.js"></script>
<script defer
src="https://code.buywithprime.amazon.com/default.variant.selector.shopify.js"></script>
{% if product.sku%}
...
...

Additional steps for activating Buy with Prime variations.

Verify that the following actions have been taken.
• The Offer Prime toggle is turned on for the product or its variations in the merchant console.
• The product SKU or its variations SKU in the merchant console corresponds to the SKU on the merchant's catalog.
• The product SKU or its variations SKU has inventory in Amazon's fulfillment network.
• The Buy with Prime button code was generated based on the correct domain for the merchant ecommerce site.

Function validation steps

After the function is installed, check the following on the merchant ecommerce site:
• The Buy with Prime button is correctly displayed when switching between variations.
• The correct variation SKU is passed to the checkout when the Buy with Prime button is clicked.
• If Buy with Prime quantity support has been implemented (requiring the custom JS approach), the quantity value is passed to the checkout when the Buy with Prime button is clicked.
• If Buy with Prime button is not working, rollback the variations implementation:

  1. Turn off Offer Prime toggle for product variations in the merchant console.
  2. Rollback Buy with Prime variation changes.

Updated over 1 year ago