WordPress Gutenberg – Embedding Shopify Buy Button

With WordPress Gutenberg moving along. It is a good time to look at how you can embed a product or a collection from Shopify onto your WordPress using Gutenberg.

There are quite a few steps, but it is easier than it looks. Make sure you already have the buy button sales channel before you begin: https://help.shopify.com/manual/sell-online/buy-button/setup

  1. On Shopify create your buy button code by clicking on the Buy Button.
  2. Then select product or select collection.
  3. Once you selected, you can customized it and then click Generate Code.
  4. In the next pop-up click copy embed code to clipboard.

Either create or goto the post / page you are wanting to put this code. With Gutenberg you will need to select Gutenberg when creating a new post or page:

Add new Gutenberg

There are two ways to add a block in Gutenberg.

1) Click on the plus icon to pull up the menu for adding blocks.

Gutenberg Block Menu

Now search for Custom HTML and click on the block result.

Gutenberg Block Search Result

2)  You can also add a new block by hovering your mouse below or above a content block and you see a dark grey line.

Gutenberg grey line indicator

When you click it, this creates a new block below and you can click on HTML button. It is tricky.

Gutenberg Alternate Add Block

With either of those steps, this will add the block to your content.

Gutenberg HTML Code block

Now you paste your code into this new block.

Gutenberg HTML Block with code

You can preview the code by clicking on the preview tab.

Gutenberg HTML Block preview code

Now you can Save draft, Preview or Publish your changes 🙂 Since I used Gutenberg to create this post, I have a working version of a buy button below:

Thanks for following along in this tutorial, if you have need other neat tips let me know by contacting us 🙂