How to create a full product shop and checkout with a Shopify Buy Button

Create a full product listing and shopping cart with the uSkinned Site Builder for Umbraco and Shopify.

You can follow most of these steps for any other third-party buy button provider, such as Snipcart, PayPal, FoxyCart, and many more.

Step 1

Login to the CMS.

Step 2

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

Create a Shopify product page in Umbraco.

Step 3

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

Create an embed code component in Umbraco.

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

Paste your Shopify product code into Umbraco.

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

Paste Shopify embed code into the Head section of Umbraco.

 

 

Step 7

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

Embed Shopify buy Button on 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.

View shopping cart on uSkinned Site Builder for Umbraco.

 

#h5yr

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Site Builder for Umbraco to deliver results.

NEW Site Builder!

We have launched a brand new, game-changing product for Umbraco CMS.