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

2020年9月28日

前回『Shopifyの購入ボタンを利用し、ブログ記事や固定ページに商品を埋め込む方法』をまとめたのですが、チェックアウト時に新規カートが作成され、既存カート内の商品と合わせて購入できないという何とも不便？な仕様でした。

どうにか、ブログ記事内で「カートへ追加する」ボタンを作成し、既存カートに商品を追加できないものか、、、と色々試していたところ、無事Liquidを使用してできましたので共有します！

ページの一番最後に実際の商品の「カートに追加」ボタンと商品詳細が表示されているはずです。

カートへ追加する新規セクションの追加

コードはこちらです。

ご自由に使用していただいて構いませんが、使用時にはSNSなどで、この記事のシェア等をしていただけると嬉しいです！

それでは実際のコード。これを新規セクションを作成し、コピペします。

{% 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}}
<br>
<br>
</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 %}

ちょっと長くなってしまいましたが、こちらをsectionフォルダの中に新規ファイルを作成し、コピペします。

私は"product-add-buttton.liquid"という名前にしました。

（追記）一点注意なのですが、画像部分に当たる

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

の部分は自分のShopifyのファイルアドレスに置き換えてください。

自分のストアのファイルアドレスは

管理画面→設定→ファイル→各画像のURLの最初の部分です。