Skip to main content

How to create an eCommerce 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.

Step 1

Login to the CMS.

Step 2

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

Create a page for your shop.

Step 3

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

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

Embed code copy and pasted from Shopify.

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

Embed cart button site wide using global settings.

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.

Shopify products on your uSkinned website.

View your shopping cart on your uSkinned website.

 

#h5yr

uSkinned Site Builder

Get started — for FREE!

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