Today we're going to learn:

How to Add Shopify To Wordpress, Wix, or Squarespace

We’re going to begin by adding the Buy Button sales channel to Shopify. In the Shopify navigation click the “+” sign next to Sales Channels and select Buy Button.

Here you will find all the external channels Shopify connects to natively for a seamless sales experience. However, there are competitors and other platforms that do not natively support Shopify integration. For these, we can still use Shopify by using a feature called Buy Button - which allows you to embed product on unsupported platforms. This allows you to utilize the power of Shopify to do your fulfillment, order management, and inventory control while keeping your website on another platform that you're more comfortable with.

Now the Buy Button sales channel has been added, we need to click Create Buy Button.

The Shopify Buy Button allows you to embed either a Collection or Product. For the sake of this demo, I'm going to go and pick a product that has inventory and is set to visible.

It's now time to configure to the look and the feel of our buy button. When we start, the first thing we want to do is choose a template. Templates come in basic, a button, or enhanced. Each template is going to be used in different situations. For this demo, let's start with the basic template to show our product title, product, price, and add to cart.

Next thing we need to do is we need to choose action on click.
1) Direct shoppers to checkout
2) Adds product to cart
3) Shows product details
In this demo, I'm going to select "adds product to a cart" because I want to display what it looks like to have the cart on another site to see the full experience of the whole checkout process.
Go down to Size and select the image that we want to put on our buy button. Typically, I like the small image. It keeps everything compact.
Alignment adjusts the placement to left, center, or right.
Afterward, you can select whether you'd like to show additional product images.

Now we have a button style and text.

The fonts that are getting pulled up in this directory are fonts that are coming from the Google font library. They are the fonts that have been purchased by Google and they have been placed on the Google font library that are free for you to use.

Now we have a button style and text.
Note: The selectable fonts are coming from Google's font library and are free for you to use.
If you're using systems like Squarespace or Wix, they will use the same font library so that you'll be able to match the font to maintain consistency.
Unfortunately, custom fonts are not supported.

Now that we finished configuring the button to look and feel the way that we want, it's time to generate the code. Copy the code to your clipboard and we'll jump over to Wordpress and I'll show you how to install it.

After logging  into WordPress, I'm going to go and add a new page.

We want to click on the add block button, click formatting, and select Custom HTML.

Now paste the code we got from Shopify into the Custom HTML editor and click the Preview button in the top right.

On the products on the page, we can switch through images and we can select add to cart. The cart shows up on the right, and we can hit checkout to open our checkout page and allow us to process a transaction as we normally would.

That's how we install the buy button inside of WordPress. Let's move on to Squarespace.

---

SQUARESPACE

 

Now  we're going to go and add that buy button to the Squarespace site. To  log into the my Squarespace site, I go to my page and  I hit control, escape on my keyboard, and that combination takes me  to the editor. Now, once I'm in the editor, the next thing that I want to do is add a page to my site. I'm going to select  pages, and add a blank section to the bottom of my website.

On the new page, we  have to edit the block that we've added by clicking  on the little raindrop.

 

We can now go and paste in the code that we got from Shopify, and we can hit apply.

Note:  because we're using JavaScript, most of these editors protect you from running JavaScript while you're editing your page. If you have a look at my Squarespace screen, it says that Squarespace has blocked embedded scripts and we can't save them. But what we can do is we can hit save.

Then, we have to exit out of the editor in order for us to see the script enabled. The easiest way to do this is to log out of Squarespace. Now, I can go back to the page. Go down to the bottom, and we can see that the page that I've just added now has the cart. It still has the same functionality that it did on WordPress. It just looks a little bit differently inside our template.

---

WIX

I'm going to head over to Wix now, and we're going to go through and we're going to set up the same thing on the Wix page. I've gone and created a website inside of Wix. I used one of their templates. Now what I'm going to do is I'm going to add that HTML that we copied over from Shopify to our Wix site. The first thing I'm going to do is I'm going to click on add, and that's going to come up with our menu on the left-hand side. What we want to find is we want to go down to more. Now, once we click on more, we're going to have a bunch of options available to us. The one that we want to grab his HTML frame.

Now, let me just explain that Wix has a couple of limitations. It doesn't allow you to paste, embed  code directly onto the page because of the way their editor works, but they do allow you to do a HTML iframe. It does have some drawbacks. If it's too big for the frame, it's going to get these scroll bars along the right-hand, left-hand side. But for the sake of this, I think we're going to be able to get it to work. We have our little grey box which ads in our code. We want to go to edit code, and then we want to paste in the code that we got from Shopify.

Once we do that, Wix is going to update, and it's going to give us our code on our page. We then need to drag the box that it sits in big enough so that it will show the entire HTML block that we just created.

Once we've done that, we can hit the preview button.

We can see now the add to cart is on Wix.

Now here is the drawback on Wix. Because the cart must be placed  inside an iframe, the cart only shows inside that iframe  that you created.

So if you're using Wix as your website host , you should use the first Shopify Buy Button option ‘Direct shoppers to checkout` as your checkout item.

This way Wix will direct shoppers directly to checkout.

Let's do that, and we'll update that so that you can see how that works. We're going to copy that to clipboard. We're going to go back into our editor. We're going to edit the code, and we're going to paste in the new code that we just updated. When the Wix website  loads and we hit the buy now button, it's going to take us directly to the checkout.

This is the best user experience that you can get if you're using Wix and you want to connect Shopify to it so that you can sell your products through Shopify.