Need Help with Shopify?

This is our jam, we can help you with any challenge you have with Shopify. Small changes or complete site integrations. 

Book a call

Add Shopify To Wordpress, Wix or Squarespace

Posted by on

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.

Click the plus sign to the right of Sales Channels on the Shopify dashboard

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.

Add Buy Button to Shopify

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

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.

Choose a Shopify product that is publicly available and is in stock.

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.

In this example, we will be using the Basic template.

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 settings are configured, click Generate Code, and then click Copy code to clipboard

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

In Wordpress click Pages and then All Pages

Click Add Page at top of Wordpress Pages section

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

Click on the ad block button and select Custom HTML

Select Custom HTML from menu

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

Paste the Shopify Buy Button code into the text field and click Preview to see the changes.

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.

Shopify Buy Button appears to be installed correctlyClick add to cart button to see cart slide out and allow customers to checkout

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.

Select Pages from the Squarespace homescreenClick add section and the Blank

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

Select the new section we just made on the left hand sideSelect the teardrop to add the section to the page Select the Code option

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

Paste the Shopify Buy Button code into the field and click 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.

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

The Shopify Buy Button is installed and the checkout drawer slides out when a user clicks Add to Cart


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.

Click Add from the Wix menuChoose Code from the Embeds section

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.

Click Edit Code on the module that was createdPaste the Shopify Buy Button code into the editor and click Apply

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.

The iframe will need to be resized to make sure users can see the whole Buy Button

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

Click preview to test the Shopify Buy Button

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

The preview of the Shopify Buy Button on an example website

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.

An image displaying the limitation of using an iframe. everything gets squished

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.

A better user experience when using Wix is to make the Shopify Buy Button direct shoppers to checkout when generating the Shopify code.

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.

A new window opens when directing shoppers to checkout and it looks much more oganized

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.

← Older Post Newer Post →


How to Shopify

RSS

Need Help with Shopify?

This is our jam, we can help you with any challenge you have with Shopify. Small changes or complete site integrations. 

Book a call