Video Transcript:

Shopify is a platform that helps you start and grow your business reaching over 1,000,000 businesses in 175 countries.

The easiest way to integrate Shopify in to your EverWeb website’s pages and blogs is by using Shopify's Buy Buttons. If you update your product in Shopify, any associated Buy Buttons will update automatically in your website. Shopify’s Buy Buttons can include images, product descriptions and pricing details.

To add a Shopify Buy Button to your EverWeb website, there are a couple of things you need to do before you start.

First, make sure that you have added your products in to your Shopify Admin. Next, make sure that your products are available to the Buy Button Sales channel, and finally make sure that you have activated Shopify Payments, otherwise a transaction fee will be applied each time a customer makes a purchase using a Buy Button.

Buy Buttons can be created for either one product (including all is variations) or for a collection.

To create a Buy Button for One Product, including any of its variants:

Go to the Shopify Admin screen, click on 'Buy Button’ in your Sales Channel, then select 'Create Buy Button’. If you do not have a Buy Button channel, use the ‘+’ sign to add it to your Sales Channel.

To create a button for one product select 'Product Button'. Choose the product you want from your catalog. You can also use the search function to find the product you want if you have many products in your catalog. Click to Select the product.

You can now apply customization options to your button. If your product includes different variations, you can choose to select 'All variants' or select just one variant.

You can customize the Buy Button's color, size and font and you can preview your changes at any time. If you have a collection, creating a button will create a button for each product in that collection. Customize the collection's buttons as you would for a single product button.

Next, choose the layout style for the button, There are three options available:

The Basic option adds only the button'

The Classic option includes the product image and product price with the button'

The Full View option includes the product image, product price and product description to the button.

After choosing your Buy Button’s Layout, you will then need to decide what action happens when a customer clicks on the button. There are three action choices 'Add Product to cart', 'Direct to checkout' and ‘Open product details’.

The 'Open product details’ action, lets customers view the product description, select any available product variants, and add the product to the shopping cart. If your product has multiple images associated with it, these will also be displayed.

You cannot use the Open Product details action if you have chosen the 'Full View' layout as it already includes these details.

Shopify's default behaviour when you checkout will be to open a new browser window. Use the Advanced Settings, Redirect in the same tab option to change this option.

Click on ‘Next' when finished.

Now, click on 'Copy Code’. This will copy the  button code based on your buy button choices to the Clipboard.

With the button code copied to the clipboard, go to the page in your EverWeb website project file where you want to insert the button.

Click on the Widgets tab and drag and drop the HTML Snippet widget on to the page.

Click in the HTML Code box then paste the code in from the clipboard using Command V.

To save and apply the code, click on the 'Apply' button.

Publish your website to test the button.