Shopify also offers various options tailored to different requirements, including an online store (e-commerce store), Buy Button, Point of Sale (POS), Messenger, Google, Facebook, Amazon, and Wholesale.
Note: The Amazon option is active when the online store is set to USD or CAD; however, a Shopify Plus subscription is required for Wholesale usage. This article also focuses on the Buy Button (Buy Button) option among the available choices.
Buy Button (Buy Button)
The Shopify Buy Button feature enables the sale of products added to the Shopify platform not only through the store itself, but also across different web pages and/or web applications. Simply creating a button based on products or collections is sufficient for this process1 2.
It is recommended to follow the steps below.
When you create a store on Shopify, only the Online Store option will appear under Sales Channels. Each of the options mentioned earlier in the first paragraph requires a separate activation process. To use the Buy Button and other options, you must click the [mark]+[/mark] icon next to the Sales Channels header3.
Once the Buy Button is added under Sales Channels, you can access the button creation steps by clicking the relevant option. Since the products created under the Products section will be used in subsequent steps, at least one product definition must exist.
Following the tracking of steps and the selection of the associated product(s) via a button, you can proceed to the customization (customize) step. In this step, numerous customizations are possible regarding the product’s display and click behavior, including its button styling. Essentially, the buy button follows a classic design and triggers the addition of the product to the cart upon being clicked.
Button Click Actions
Shopify’s button provides three options for actions performed upon a click. By default, the [var]Add product to cart[/var] option is active.
App product to cart
: This option adds a cart feature to the web page. On the right side of the page where the purchase is being processed, a cart icon will be visible. When the purchase button is clicked, the cart section opens, displaying information such as product quantity and total payment amount. To complete the checkout process, the [var]Checkout[/var] button within the cart section must be clicked, and the user must proceed to the [var]Checkout[/var] step.
Direct to checkout
: When the button is clicked, the cart process is bypassed, and a popup directly displaying the [var]Checkout[/var] step appears.
Open product details
: When the purchase button is clicked, product details (additional images, descriptions, etc.) are displayed within a modal. The [var]Add to cart[/var] button located within this modal adds the product to the cart. To proceed with checkout, the [var]Checkout[/var] button must be clicked and the user must proceed to the [var]Checkout[/var] step.
You can test each option based on the page and product level, and continue with the option that yields the best results according to conversion rates after testing each option individually.
Layout determines how product details will appear on the page (small, medium, or large). The options displayed here vary according to the Layout style setting.
If the button click behavior is set to direct to checkout, the Shopping cart and add product to cart options are unavailable. Similarly, if the behavior is set to detailed pop-up, these options cannot be used.
The Advanced settings define how the checkout process will take place. When the button click behavior is set to open pop-up window, the process is carried out through a popup window; whereas, with redirect in the same tab, the user is redirected to a store-related page, and after the payment process, they are redirected back to the original page.
Checkout Process
If the redirect in the same tab option is selected, Shopify store-specific Checkout settings can also be utilized. You can access these settings by following the path Settings > Checkout. As previously mentioned in the article titled Shopify - Google Analytics and Tag Manager Operations, you can add code to the Additional scripts field4 2.
After finalizing decisions regarding the buttons and other configurations, you can proceed to the Copy code step. From this page, a snippet of code similar to the following example will be provided.
<div id='product-component-1607272753249'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'your-store.myshopify.com', // Your Shopify store domain
storefrontAccessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your Storefront API access token
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '5966472282274',
node: document.getElementById('product-component-1607272753249'),
moneyFormat: '%7B%7Bamount%7D%7DTL',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
},
"buttonDestination": "modal",
"contents": {
"img": false,
"title": false,
"price": false,
"options": false
},
"text": {
"button": "View product"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
},
"text": {
"button": "Add to cart"
}
},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
}
},
});
});
}
})();
/*]]>*/
</script>The options object contains the decisions made in the customize step5.
options = {
product: {},
cart: {},
modal: {}, // configure the modal created by a product embed
productSet: {}, // configure a collection or set of products
toggle: {}, // configure the tab that toggles the cart open
modalProduct: {}, // configure the product within the modal
option: {}, // configure the variant option selectors within a product
lineItem: {} // configure the individual line items within a cart
}
Payment Flow
The steps users see in the popup can also be tracked via JavaScript.
// Product Events
var events = {
addVariantToCart: function (product) {},
updateQuantity: function (product) {},
openModal: function (product) {},
openOnlineStore: function (product) {},
openCheckout: function (product) {}
}
// Cart Events
var events = {
openCheckout: function (cart) {},
updateItemQuantity: function (cart) {}
}
// Custom Events
var options = {
product: {
DOMEvents: {
'click .option-select': function (evt, target) {
var data = target.dataset;
var product = ui.components.product.filter(function (product) {
return product.id === 8728441478;
})[0];
product.updateVariant(data.option, data.value);
}
}
}
}Events Inside Popups
As mentioned in the article “Window.postMessage API for Communication Between Iframes and Popups”, it’s possible to send messages (message) between iframes and popups to the [var]parent[/var] window that created them. Shopify’s [var]checkout[/var] popup sends trackable messages for popup events according to this structure6.
window.addEventListener('message', (e) => {
let data = JSON.parse(e.data);
console.log(data.current_checkout_page); // /checkout/payment
});As previously discussed under the heading “Goals and Funnel”, Shopify completes payment processes in six steps. When a popup is opened, the /checkout/payment page is displayed. The Checkout page can also be customized, as previously mentioned under the Checkout Actions section. If you’ve defined a tracking code for the checkout page, you’ll benefit from including traffic that comes through the “continue” button in your funnel definition. After the payment is completed, the displayed page will be /checkout/thank_you.
Footnotes
- Jody Edgar. (2019). How to Create a Buy Button and a Checkout Page inside Shopify ↩
- Tessa Thornton. (2016). Introducing BuyButton.js – Shopify’s New JavaScript Library ↩ ↩2
- Buy Button. Shopify Help Center ↩
- Customize the order status page. Shopify Help Center ↩
- Customization Options. Shopify BuyButton.js ↩
- Shopify/buy-button-js. GitHub ↩