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

How to embed a product in Shopify's Landing Page (LP)

September 29, 2020

Have you ever wished you could embed products in a Shopify LP?

I was looking for a specification that would allow me to add to an existing cart instead of paying on the spot like a buy button, but I couldn't find it.

I gave up and decided to implement it myself. I thought many people would want to do this, so I'm sharing it with you. Of course, you are free to use it as you like, but if you introduce my blog on social networking sites, etc., I will be very happy!

DEMO landing page created this time ←

Let's get started and describe how to embed a product in an LP or fixed page. The rough steps are

Create a new LP landing page
Add a new section
Embedding the actual product in the LP
Choose products to embed from the customize screen

This is the flow of the process.

Create a new landing page

If you already know how to create a new landing page, you can skip this page!

First, go to Admin → Online Store → Theme List → Actions for the theme → Edit Code and select Add New Template.

Then a popup will appear and save it as page and a name of your choice.

In this case, we chose page.lp.liquid for clarity.

Shopify 新規テンプレート作成

Next, click on Manage → Online Store → Pages → Add Page and create a new page (which will be a landing page).

Don't forget to apply the newly created page.lp.liquid as a template here.

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

The new LP is now complete.

Add a new section for embedding products

Next, add a new section for product embedding.

Create a new section and copy and paste the code below.

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

</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": {
"en": "Pages product embed"
},
"settings": [
{
"type": "product",
"id": "featured_product",
"label": {
"en": "product"
}
} ]

}{% endschema %}

The save name can be anything, but this time I chose pages-embed-product.liquid. Now you've added a new section!

Add embed code to the landing page

The rest can be done either from the code edit mentioned earlier or from your editor. Paste the code below in the position where you want to put the product.

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

You are now ready to go. If you created a new section earlier and gave it a name that is not pages-embed-product, please include that file name.

Set up the product you want to embed from the customization screen.

Finally, from the customization screen, go to the landing page and select the product of your choice from the "Embed Pages Products" sidebar.

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

You will see that the product has been properly embedded!

Press Add to Cart to add the product to your existing cart.

DEMO landing page created for this project←

How to embed products in a Shopify landing page (LP) Summary

This is how to embed a product in a Shopify landing page.

You have created a landing page, but it doesn't lead to the product page, or it doesn't lead to a purchase. We hope this will help you to reduce the number of such cases.

Have a great day!

PageFly usage instructions article: (Japanese only)

How to create a [Shopify] landing page (LP) easily "PageFly Fully Illustrated".