Shopify のランディングページ(LP)に商品を埋め込む方法

2020年9月29日

ShopifyのLPに商品を埋め込めたらなぁと思ったことはありませんか？

購入ボタンのようにその場で決済ではなく、既存カートに追加できる仕様ないかなぁと探していてのですが、なかなか見つからず。

諦めて自分で実装してみることにしました。これやりたい人多いだろうなと思ったので共有します。もちろんご自由にお使いいただいて構いませんが、SNS等でブログを紹介していただけると飛んで喜びます！

今回作成したDEMOランディングページ←

それではさっそく、LPや固定ページに商品を埋め込む方法を記載していきます。おおまかなステップとしては、

新規LPランディングページを作成する
新規sectionを追加する
実際にLPに商品を埋め込む
カスタマイズ画面から埋め込む商品を選ぶ

という流れです。

新規ランディングページを作成する

新規ランディングページの作成方法が既にお分かりの方はこのページを飛ばしていただいて大丈夫です！

まず管理画面→オンラインストア→テーマ一覧→該当テーマのアクション→コード編集から、新しいtemplateを追加するを選びましょう。

するとポップアップが出てくるので　page とお好きな名前で保存します。

今回はわかりやすいようにpage.lp.liquidとしました。

Shopify 新規テンプレート作成

次に、管理画面→オンラインストア→ページからページを追加をクリックし、新規ページ（ランディングページに当たるもの）を作成します。

ここで先ほど新規作成したpage.lp.liquidをテンプレートとして適用することをお忘れなく。

Shopify LP　ランディングページ　作成方法

これで、新規LPが完成しました。

商品埋め込み用の新規セクションを追加する

次に商品埋め込み用の新規セクションを追加します。

新規セクションを作成し、下記コードをコピペします。

{%- assign product = all_products[section.settings.featured_product] -%}
{% form "product", product %}
<img src="https://cdn.shopify.com/s/files/1/0477/4435/2418/{{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 product-btn"
type="submit"
name="add">
{{ 'products.product.add_to_cart' | t }}
</button>
{% endform %}
<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": {
"ja": "Pages商品埋め込み"
},
"settings": [
{
"type": "product",
"id": "featured_product",
"label": {
"ja": "商品"
}
}
]
}
{% endschema %}