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
- On Shopify create your buy button code by clicking on the Buy Button.
- Then select product or select collection.
- Once you selected, you can customized it and then click Generate Code.
- 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:
There are two ways to add a block in Gutenberg.
1) Click on the plus icon to pull up the menu for adding blocks.
Now search for Custom HTML and click on the block 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.
When you click it, this creates a new block below and you can click on HTML button. It is tricky.
With either of those steps, this will add the block to your content.
Now you paste your code into this new block.
You can preview the code by clicking on the preview tab.
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 🙂