Shopifyの無料体験をはじめる

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

 Shopify LP ランディングページ 商品埋め込む 方法

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

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

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

 

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

 

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

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

という流れです。

 

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

 

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

 

まず管理画面→オンラインストア→テーマ一覧→該当テーマのアクション→コード編集から、新しい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 %}

 

 

保存名はなんでも良いのですが、今回はpages-embed-product.liquidにしました。これで、新規セクション追加が完了しました!

 

ランディングページに埋め込みコードを追加する

 

あとは、先ほどのコード編集からでも、お使いのエディタからでも構いません。商品を入れたい位置に下記のコードを貼り付けてください。

 

{% section 'pages-embed-product' %}

 

これで準備は完了です。もし先ほど新規セクションを作成した際に、pages-embed-productではない名前をつけていたら、そのファイル名を記載してください。

 

 

カスタマイズ画面から埋め込みたい商品を設定する

 

そして、最後にカスタマイズ画面から、ランディングページに移動し、サイドバーの『Pages商品埋め込み』からお好きな商品を選択してください。

 

Shopify カスタマイズ画面 商品埋め込み ランディングページ LP

 

すると、ちゃんと商品が埋め込まれたことが確認できるかと思います!

カートに追加するを押すと、商品が既存カートに追加されます。

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

 

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

 

以上、Shopifyのランディングページに商品を埋め込む方法でした。

せっかくランディングページを作成したのに、商品ページまで進んでくれない、、購入に結びつかない。といったことが少しでも減れば幸いです。

 

それでは本日も良い一日を! 

 

EC Penguin おすすめ本

関連記事

コメントを残す

コメントは表示される前に承認される必要があります。