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

Shopify ブログ 商品 埋め込み 

 

前回『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の最初の部分です。

 

カートへ追加ボタンの埋め込み

 

あとは、お好きな場所に埋め込むだけです。今回はブログ記事仕様なので、templates/article.liquidの中にセクションを埋め込みます。

Shopifyデフォルトのdebutテーマを使用しているので、article.liquidですが、違うテーマを使用している場合、異なる名前のliquidファイルかもしれません。

埋め込む具体的な場所は

  {% section 'article-template' %}

のすぐ後です。(エディタにもよりますが、macでVScodeを使用している人は、該当フォルダのcommand + Shift + F で全体検索できます!)

 

追加するとこうなるはずです。

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

 

これでコード側からの準備はできました。

 

カスタマイズ画面からカートへ追加ボタンを編集する

 

最後に、どのページ(ブログ記事)に、どの商品を表示させるかを指定するために管理画面→テーマ一覧→カスタマイズから設定していきましょう。

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

 

カスタマイズ画面に移動したら、商品を埋め込みたいブログ記事ページに移動します。

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

 

例えば、このブログ記事に移動すると、 先ほど作成したセクションが編集できるようになっています。(Products Embedですね。)

 

『product追加』を押して、表示させたい商品とブログ記事を選びましょう。

これで無事、商品が埋め込まれました!
ちょっと不格好なのでスタイル修正はご自由にどうぞ。上記スクショのデザインも現時点でのデザインなので、この記事をあなたが読んでくださっている時にはもうちょっとお洒落なデザインになっているかも。(このページの下部をみてみてね。)

 

 

Shopify カートに追加ボタンをブログや固定ページに埋め込む方法 まとめ

 

今回は、ブログ記事でしたが、articleに該当する部分をpageに変えるだけで同じことができるかなと思います。

むしろLPなどの固定ページの方が、コードを書いていくから商品を埋め込める場所の融通が効きそう。需要あればLPに商品を埋め込む方法。とかも書いてみようかな。

もしコンテンツマーケティング、オウンドメディアのようにブログ記事を書いて集客しているタイプの方であればこの機能は重宝されそうです。

ブログ記事→商品を探す→商品を見つける→商品ページに移動→カートに追加

という長々とした移動がなくなり

ブログ記事→カートに追加

というシンプルな構造になるので、消費者の購入率も高そうな感じがします。

商品&カートに追加ボタンを各ブログ記事の下に埋め込む

ブログ記事の下部に商品をカートに追加ボタンを埋め込みます。一度コードを設定すると、全てのブログ記事に適用することができます。

新商品の特集ブログなどを作成し、ブログの下に商品を埋め込めるので消費者が購入しやすい導線を作ることができます。カートに追加ボタンの色、サイズのデザイン対応も可能です。