Shopify の商品とカートに追加ボタンをブログ記事に埋め込む方法 - EC PENGUIN

How to embed a Add to Shopify product and cart button in your blog post

September 28, 2020

In the last issue, I summarized "How to embed products in blog posts and fixed pages using Shopify's buy button", but what an inconvenience, a new cart is created at checkout and the products cannot be purchased together with those in the existing cart? The specifications were not good.

I was wondering if I could somehow create an "Add to Cart" button in the blog post and add the product to the existing cart, and after trying various ways, I successfully did it using Liquid!

At the very end of the page you should see the actual product "Add to Cart" button and product details.

Adding a New Section to Add to Cart

Here is the code.

Feel free to use it, but when you do, we'd appreciate it if you'd share this article, etc., on social networking sites, etc.!

Now the actual code. Create a new section and copy and paste this.

{% assign page_handle = article.handle
%}{% assign _section = section.settings
%}{% assign _blocks = section.blocks

%}{%-
for block in _blocks -%}
assign _block = block.settings -%}
{% if _block.blog_name == page_handle %}
{%- assign product = all_products[_block.product_name] -%}
{% form "product", product %}
<img src="https://cdn.shopify.com/s/files/1 /0488/2235/2118/{{product.featured_image}}" class="image-featured" alt="">
<p>
<span class="product-description-title">{{product.title}}<br></span>

<br>

{{product.description}}

</p>
<select name="id">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
<button
class="btn-submit btn"
type="submit"
name="add">
{{ 'products.product.add_to_cart' | t }}
</button>

{% endform %}
{% endif
%}{% endfor

%}<style>
.shopify-product-form{
width: 300px;
border: 1px solid black;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.image-featured{
width: 300px;

}</style>

{% schema
%}{
"name": "Products Embed",
"settings": [],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "article",
"id": "blog_name",
"label": "Blog"
},
{
"type": "product",
"id": "product_name",
"label": "Product"
} ]

}{% endschema %}

This is a bit long, but create a new file in the section folder and copy and paste this one.

I named mine "product-add-buttton.liquid".

(PS) One note: The image part of the file is called "product-add-buttton.liquid".

https://cdn.shopify.com/s/files/1/0488/2235/2118/

Replace the "*" with your own Shopify file address.

The file address of your store is

Admin → Settings → Files → The first part of each image's URL.

Embedding the Add to Cart Button

Now all that is left is to embed it wherever you wish. In this case, since this is a blog post specification, we will embed a section in templates/article.liquid.

Since we are using the Shopify default debut theme, it is article.liquid, but if you are using a different theme, it may be a liquid file with a different name.

The specific location to embed is

{% section 'article-template' %}

The first line is immediately after the (Depending on your editor, if you are using VScode on a mac, you can do a command + Shift + F for the whole search in the appropriate folder!)

When added, it should look like this.

{% section 'article-template' %} {% section 'product-add-button' %}

Now we are ready from the code side.

Edit the Add to Cart button from the Customize screen.

Finally, let's go to the admin screen -> Theme List -> Customize to specify which products are to be displayed on which pages (blog posts).

Shopify ブログ記事下にカートへ追加ボタンを表示させる

Once you are on the Customize screen, go to the blog post page where you want to embed the product.

Shopify 商品埋め込みカスタマイズ画面

For example, if you navigate to this blog post, you will see that the section you just created can be edited. (It's Products Embed.)

Press "add product" and select the product and blog post you want to display.

Now you have successfully embedded your products!

It's a bit clunky, so feel free to modify the style. The design in the above shot is also the current design, so it may look a bit more stylish by the time you are reading this article. (See the bottom of this page.)

How to embed the Shopify Add to Cart button in your blog or fixed pages Summary

In this case, it was a blog post, but I think the same thing could be done by simply changing the part that corresponds to an ARTICLE to a PAGE.

Rather, fixed pages such as LPs would be more flexible in terms of where products can be embedded since the code will be written. If there is demand, how to embed products in an LP. I might write something like that.

If you are the type of person who attracts customers by writing blog posts like content marketing or owned media, this feature would be useful.

Blog post -> search for product -> find product -> go to product page -> add to cart

The long and tedious process of moving from one place to another is eliminated.

Blog post -> Add to cart

This simple structure is likely to result in a high consumer purchase rate.