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. Copy it.

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 or Section Element to serve as a container for the button. This will make it easier to position the Buy Button on your page.

3. Create a Raw HTML Element that is nested in the container element.

4. Paste the Shopify embed code in this Element's Text attribute. You won't see the Buy Button appear right away in the editor, but it is working. This is because it loads JS that is blocked by our editor.

5. 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.