【Shopify】ブログ記事から直接商品購入へ！商品情報埋め込みカスタマイズの設定方法

ECストアの構築に特化しているShopifyですが、ブログの汎用性がいまいち、、というお声も、、
そこで今回ブログ記事内に商品情報を表示できるカスタマイズを紹介します。

準備

ブログ記事メタフィールドを設定しよう！
まずはShopifyブログ記事に表示する商品の設定をしていきましょう

ブログ記事を選択しメタフィールドを定義していきます。

名前
→メタフィールドの名前を入力します。
例）紹介商品01、紹介商品02
ネームスペースとキー
→「ネームスペース.キー」で設定します。
例）article.item01、article.item02
形式
→今回は「商品」を選択してください。

テーマのコードを一部カスタマイズしよう
オンラインストアからテーマコードを変更します。
今回はShopifyテーマ「Dawn」を使用します。

コード内で「main-article.liquid」を探してみてください
main-article.liquidの「article.content」で出力している部分が見つかったらあと少しです。
（Dawnだと71行目あたりにあります。）

この{{ article.content }}を丸ごと下記コードコピペします。

        {% assign modified_content = article.content %}
        {%- assign product_form_id = 'product-form-' | append: section.id -%}
        {% for i in (1..6) %}
          {% assign metafield_key = 'item0' | append: i %}
          {% if article.metafields.article[metafield_key] %}
            {% assign product_id = article.metafields.article[metafield_key] %}
            {% assign product = all_products[product_id] %}
            {% if product %}
              {% capture product_markup %}
                <div class="article-detail-wrapper">
                  <a class="article-detail" href="{{ product.url }}">
                    <div class="article-meta-img">
                      <img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.title }}" width="400" height="400">
                    </div>
                    <div class="article-meta-content">
                      <div class="article-meta-inner">
                        <h2>{{ product.title }}</h2>
                        <p>
                          {%- render 'price',
                          product: product,
                          use_variant: true,
                          show_badges: true,
                          price_class: 'price--large'
                          -%}
                        </p>

                        <form method="post" action="/cart/add">
                          <input type="hidden" name="id" value="{{ product.variants.first.id }}">
                          <input type="submit" value="カートに追加" class="btn">
                        </form>

                        {% comment %} {%- render 'buy-buttons', product: product, product_form_id: product_form_id, section_id: section.id,
                        show_pickup_availability: true -%} {% endcomment %}

                      </div>
                    </div>
                  </a>
                </div>
              {% endcapture %}
              {% assign placeholder = '商品：商品' | append: i %}
              {% assign modified_content = modified_content | replace: placeholder, product_markup %}
            {% endif %}
          {% endif %}
        {% endfor %}

        {{ modified_content }}
        {% assign modified_content = article.content %}
        {%- assign product_form_id = 'product-form-' | append: section.id -%}
        {% for i in (1..6) %}
          {% assign metafield_key = 'item0' | append: i %}
          {% if article.metafields.article[metafield_key] %}
            {% assign product_id = article.metafields.article[metafield_key] %}
            {% assign product = all_products[product_id] %}
            {% if product %}
              {% capture product_markup %}
                <div class="article-detail-wrapper">
                  <a class="article-detail" href="{{ product.url }}">
                    <div class="article-meta-img">
                      <img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.title }}" width="400" height="400">
                    </div>
                    <div class="article-meta-content">
                      <div class="article-meta-inner">
                        <h2>{{ product.title }}</h2>
                        <p>
                          {%- render 'price',
                          product: product,
                          use_variant: true,
                          show_badges: true,
                          price_class: 'price--large'
                          -%}
                        </p>

                        <form method="post" action="/cart/add">
                          <input type="hidden" name="id" value="{{ product.variants.first.id }}">
                          <input type="submit" value="カートに追加" class="btn">
                        </form>

                        {% comment %} {%- render 'buy-buttons', product: product, product_form_id: product_form_id, section_id: section.id,
                        show_pickup_availability: true -%} {% endcomment %}

                      </div>
                    </div>
                  </a>
                </div>
              {% endcapture %}
              {% assign placeholder = '商品：商品' | append: i %}
              {% assign modified_content = modified_content | replace: placeholder, product_markup %}
            {% endif %}
          {% endif %}
        {% endfor %}

        {{ modified_content }}

実際に表示させてみよう！
ブログ記事にて表示を確認してみましょう！        {% assign modified_content = article.content %}
        {%- assign product_form_id = 'product-form-' | append: section.id -%}
        {% for i in (1..6) %}
          {% assign metafield_key = 'item0' | append: i %}
          {% if article.metafields.article[metafield_key] %}
            {% assign product_id = article.metafields.article[metafield_key] %}
            {% assign product = all_products[product_id] %}
            {% if product %}
              {% capture product_markup %}
                <div class="article-detail-wrapper">
                  <a class="article-detail" href="{{ product.url }}">
                    <div class="article-meta-img">
                      <img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.title }}" width="400" height="400">
                    </div>
                    <div class="article-meta-content">
                      <div class="article-meta-inner">
                        <h2>{{ product.title }}</h2>
                        <p>
                          {%- render 'price',
                          product: product,
                          use_variant: true,
                          show_badges: true,
                          price_class: 'price--large'
                          -%}
                        </p>

                        <form method="post" action="/cart/add">
                          <input type="hidden" name="id" value="{{ product.variants.first.id }}">
                          <input type="submit" value="カートに追加" class="btn">
                        </form>

                        {% comment %} {%- render 'buy-buttons', product: product, product_form_id: product_form_id, section_id: section.id,
                        show_pickup_availability: true -%} {% endcomment %}

                      </div>
                    </div>
                  </a>
                </div>
              {% endcapture %}
              {% assign placeholder = '商品：商品' | append: i %}
              {% assign modified_content = modified_content | replace: placeholder, product_markup %}
            {% endif %}
          {% endif %}
        {% endfor %}

        {{ modified_content }}
        {% assign modified_content = article.content %}
        {%- assign product_form_id = 'product-form-' | append: section.id -%}
        {% for i in (1..6) %}
          {% assign metafield_key = 'item0' | append: i %}
          {% if article.metafields.article[metafield_key] %}
            {% assign product_id = article.metafields.article[metafield_key] %}
            {% assign product = all_products[product_id] %}
            {% if product %}
              {% capture product_markup %}
                <div class="article-detail-wrapper">
                  <a class="article-detail" href="{{ product.url }}">
                    <div class="article-meta-img">
                      <img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.title }}" width="400" height="400">
                    </div>
                    <div class="article-meta-content">
                      <div class="article-meta-inner">
                        <h2>{{ product.title }}</h2>
                        <p>
                          {%- render 'price',
                          product: product,
                          use_variant: true,
                          show_badges: true,
                          price_class: 'price--large'
                          -%}
                        </p>

                        <form method="post" action="/cart/add">
                          <input type="hidden" name="id" value="{{ product.variants.first.id }}">
                          <input type="submit" value="カートに追加" class="btn">
                        </form>

                        {% comment %} {%- render 'buy-buttons', product: product, product_form_id: product_form_id, section_id: section.id,
                        show_pickup_availability: true -%} {% endcomment %}

                      </div>
                    </div>
                  </a>
                </div>
              {% endcapture %}
              {% assign placeholder = '商品：商品' | append: i %}
              {% assign modified_content = modified_content | replace: placeholder, product_markup %}
            {% endif %}
          {% endif %}
        {% endfor %}

        {{ modified_content }}

実際に表示させてみよう！
ブログ記事にて表示を確認してみましょう！

ブログ記事メタフィールドに商品を設定する

記事内に商品を表示する場所を設置する
今回は「商品：商品1」の記載で、紹介商品01に設定した商品が表示されるような仕様になっています。
添付画像を参考に設置してみてください。

表示を確認しよう！
ブログを公開して、表示を確認しましょう！

株式会社Tsuzucle's job postings

【Shopify】ブログ記事から直接商品購入へ！商品情報埋め込みカスタマイズの設定方法

Tsuzucle 採用担当

株式会社Tsuzucle /

ブログ Shopify

株式会社Tsuzucle

組織を筋肉質に導く事業支援サービスである「Tsuzucle Business Platform」をもとにさまざまな企業に対して、「改善」と「成長」という2つを軸に企業のグロース支援を実施しております。【事業内容】 Tsuzucle Business Platformに則った支援の実施し、筋肉質な組織へと変革していきます。 ◆コンサルティング支援伴走型支援を通じて、現状と理想とのギャップを埋めるための具体的なステップを提供します。また、コミュニケーションの改善を図りながら、社内でメスが入れづらい構造改革まで推進し、あるべき意思決定と事業改善によりアクセルを踏んだ時に事業が加速する状態を目指していきます。 ◆マーケティング支援人材不足により戦略が実行できないという課題に対して、当社のマーケティングチームが協力します。事業指標を実際のアクションプランに変換し、現場のKPIを形式的なものにせず、具体的な実装を進めます。マーケティング機能の構築から自立運営までの支援を行い、強力なマーケティング組織の構築を目指します。 ◆開発支援開発主導の強引なDXではなく、現場と共に進行する中で見つけた実際の課題を改善するために開発を行います。これにより、現場の声を正確に反映し、要件定義にズレが生じないため、導入後には、事業の成長につながる効果を実現します。構築後、コンサルティング・マーケティング支援サービスに繋ぐことで、より事業成長にアクセルを踏むことも可能です。【実績】三菱地所、ジオン商事、コエドビール、CITIZEN、dinos、kanademono、PONANT、ゴーゴーカレー、東京クリエイティブサロン、WEEKEND etc... 創業4年で、多くの大手クライアントと直接関わりながら業務を進めています。他の企業では経験できない規模のプロジェクトを、事業責任者と関わりながら遂行することができます。

Like Tsuzucle 採用担当's Story

Let Tsuzucle 採用担当's company know you're interested in their content

【Shopify】ブログ記事から直接商品購入へ！商品情報埋め込みカスタマイズの設定方法

準備

株式会社Tsuzucle

ブログ

Weekly ranking