Prerequisites

The.com BasicsShopify

Intro

Shopify allows products to be embedded on webpages using the Buy Button channel.

Log in to Shopify and go to the Products section of the dashboard.

Create a Buy Button

Click on the Buy Button menu item under Sales Channels on the left side menu. If you don't see this option, click the plus symbol and search for it.

Your dashboard view will change, prompting you to create a Buy Button.

1. Click the Create a Buy Button.

2. Click the Product Buy Button.

3. Select the product you want to create a Buy Button for.

4. Customize the Buy Button's style.

There are a few options for customization, so be sure to explore them all.

Layout Style

There are three styles to display your product: Basic, Classic, and Full View.

• Basic - Only shows an add to cart button.

• Classic - Shows the product image, title, price, and add to cart button in a column.

• Full View - Has two columns, one for the product images which the user can cycle through, and one for the title, price, add to cart button, and description.

For every style above, you can customize the look of the add to cart button. Click the Button style option to change the color, font, width, and roundness. You can also click on the Layout option on the left side menu to customize your selected layout style.

To preview what the Buy Button will look like on mobile devices, click the mobile icon button above the preview section.

Get the Embed Code

When you are happy with the design, click Next. You'll now be shown the code you need to add to your site.

This code contains two main parts, a Div with the product ID and a Script element with the styling and structure configuration. It will look something like the following. The script is pretty long and has been condensed in this code snippet since it isn't important for you to know in order to implement the button.

<div id='product-component-YOUR-PRODUCT-ID'></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() {
  ... // Content abridged
  }

  function ShopifyBuyInit() {
  ... // Content abridged
  }
})();
/*]]>*/
</script>

The important parts of this code snippet are the ID on the Div element and the content of the Script element. In the next step, you will be coping the ID value, for example

product-component-YOUR-PRODUCT-ID

and the script content which is everything between <script> tags, for example

/*<![CDATA[*/
(function () { ... })();
/*]]>*/

You will be creating Div and Script element accordingly in The.com.

Add the Buy Button to Your Site

In The.com,

1. In the Page editor, go to where you want to place the Buy button.

2. Create a Div Element to serve as a container for the button. This will make it easier to position the Buy Button on your page. 

3. Click into the Div's Attributes and find the ID cell.
4. Copy the Shopify Div ID from the first line product-component-YOUR-PRODUCT-ID
5. Paste this ID into your Div in The.com.
6. Create a Script element under the Div. Click on its text cell. Bring up the large text editor by pressing CMD + Enter.
7. Copy the contents of the <script> tag from Shopify. If it's easier, you can copy all of the snippet from Shopify and then delete the <div> element and <script> tags after pasting the code.
8. Paste the code snippet into the Script Element's Text cell. Delete the <div> element and <script> tags if you copied the whole code snippet.
9. You may need to refresh the site preview in order for the JavaScript to load properly.

10. Click Deploy Page.

When you visit the live page after deploying, you will see your product right where you placed it with the functioning button and shopping cart drawer.

Note: if you are using the Shopify free 14-day trial, customers won't be able to check out items. You'll need to select and pay for a Shopify plan first.

If you'd like to customize the checkout experience, read over what Shopify allows you to do in their documentation.