How to create an eCommerce shop and checkout with a Shopify Buy Button

Step 1

Login to the CMS.

Step 2

Under Home, create a new Page, name it and select the 'Full' layout option.

Step 3

Click 'Add Content' and choose the 'Embed Code' component.

Step 4

Go to your Shopify admin and create a new Sales Channel with a 'Buy Button' — follow the steps here (https://help.shopify.com/en/manual/online-sales-channels/buy-button/create-buy-button).

You can choose a number of layout options from the Shopify admin panel, from the number of products per row to the color of text. This will help make sure your products match your uSkinned website.

Step 5

Return to the uSkinned Site Builder CMS. In the 'Embed Code' field, paste the first part of your Buy Button code. It will look something like this:

<div id='collection-component-1234556789'></div>

In the bottom right corner, click 'Submit'.

Step 6

We now need to paste in the Javascript embed code —this will live at a Global level so that your shopping cart is accessible throughout all of your website pages.

In the tree menu, go to 'Global' > Click on 'Settings' > Click on 'Scripts'. In the field 'Header Scripts' paste in the Javascript code provided by Shopify. In the bottom right hand corner, click 'Save and publish'.

Step 7

You can now view all of your Shopify products on the front end of your uSkinned Site Builder for Umbraco website. 

Go to any other page on your site and you will be able to access your shopping cart. This will make sure your customers can get to the checkout from any page.

#h5yr