How to create a Shopify product purchase button and add it to your blog post or page

Have you ever created a blog post or fixed page in Shopify and wanted to embed this product?

For example, you have a new collaborative T-shirt for sale and have created a blog or LP to start promoting it. But can't you embed the product directly into that blog or LP? I sometimes wondered.

This article is a solution to this problem.

The rough steps are as follows.

1. Create the embed code for the Shopify buy button
2. Embed it in a blog post or fixed page.

Let's get right to it!

Creating the Buy Button Code

First, you will need to create a purchase button code to embed in a blog post or fixed page.

To do so, add a sales channel for the buy button.

Admin → Settings → Sales Channels

Click on

Then, under Add Sales Channel, you will see the Buy button. Press the blue plus next to this purchase button to add a sales channel.

This will create a "Buy Button" page directly below the online store, as shown here. Let's quickly click on Create a Buy Button.

You can choose to create a product or a collection. In this case, we want to create a purchase button for one product only, so select "Products" and proceed to preview the page like this.

The nice thing about Shopify is that you can customize the layout style, the button style, the action when clicked, and so much more intuitively!

I wanted to match the design of the site, so I made it look like this.

Now you can proceed and the code for the buy button will be generated.

Embedding the Buy Button in a Blog Post or Fixed Page

The next step is to embed it in a Shopify blog post or fixed page.

From the admin page, navigate to the appropriate page or blog post. You will then see a button that looks something like this Click on it and the display will change to the HTML element converted.

Now all you need to do is paste the purchase button code you just generated into the location where you want to embed it. By the way, when embedded, it will look like this ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓.

It is embedded quite well.

When you press the buy button above, it should function properly.

By the way, when you move to the cart screen with this...

I see that the product is properly included in the cart screen as well.

You have successfully embedded the buy button!

Application: Modalize the behavior of the buy button

Finally, I would like to show you how to change the behavior of the buy button to modal when it is pressed.

In the previous example, when you click the Add to cart button, a simple cart appears on the right side of the screen, and you can immediately check out. However, once we open the product detail modal, we want to check the product and then add it to the cart.

So I was researching and found that there is a way to open the product details in a modal after pressing the add to cart button.

Just select "Open product details" in the "Action on click" section when creating the buy button.

Like this ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓.

How to add a product purchase button to a blog post or fixed page in Shopify Summary

How was the above?

Being able to create embed codes means that you can place purchase buttons basically anywhere, not just in blog posts or fixed pages.

Even if you have a Wordpress blog, you can embed it on that site.

This is one of Shopify's great strengths, and it's very useful, so take advantage of it!