Shopify・Liquid・ECクリエイティブマーケティングを追求していくサイトです

Sopify構築・Liquid・ECビジネス寺子屋


■shopifyカスタマイズ(Liquid)

shopifyの「商品ページ」でliquidにるカスタマイズした例文コード

投稿日:

 shopifyの「商品ページ」でliquidにるカスタマイズした例文コード

こちらは、Shopifyの商品ページで利用できるLiquidコードの例です。商品ページのカスタマイズには様々な方法がありますが、以下の例は商品の価格をカスタマイズする方法や、商品の詳細説明の表示方法などを示しています。

例1:価格の表示方法をカスタマイズする

{% if product.price_min < product.compare_at_price_min %}
<span class="sale-price">{{ product.price_min | money }}</span>
<span class="compare-at-price">{{ product.compare_at_price_min | money }}</span>
{% else %}
<span class="regular-price">{{ product.price_min | money }}</span>
{% endif %}

この例では、商品の価格をカスタマイズする方法を示しています。このLiquidコードでは、商品の価格がセール価格と通常価格の2種類ある場合に対応しています。商品の価格が通常価格の場合には、regular-priceというクラス名を持つspanタグで価格を表示します。商品の価格がセール価格の場合には、sale-priceというクラス名を持つspanタグでセール価格を表示し、compare-at-priceというクラス名を持つspanタグで元の通常価格を表示します。

以下は、上記のコードの行ごとに解説したものです。

{% if product.price_min < product.compare_at_price_min %}

この行は、もし商品の最小価格(product.price_min)が商品の比較対象価格(product.compare_at_price_min)よりも低い場合に、以下のコードを実行するための条件文です。

<span class="sale-price">{{ product.price_min | money }}</span>
<span class="compare-at-price">{{ product.compare_at_price_min | money }}</span>

 この部分は、商品の最小価格が比較対象価格よりも低い場合に表示されるHTML要素を表しています。1つ目の行は、商品の最小価格を表示し、2つ目の行は、商品の比較対象価格を表示します。表示される価格は、"| money"というフィルターを使って、通貨の形式に変換されます。

{% else %}

この行は、条件文が満たされない場合に実行するコードの始まりを示しています。つまり、商品の最小価格が比較対象価格よりも低くない場合に以下のコードが実行されます。

  <span class="regular-price">{{ product.price_min | money
}}</span>

この部分は、商品の最小価格が比較対象価格よりも低くない場合に表示されるHTML要素を表しています。商品の最小価格を表示し、"| money"フィルターを使って通貨の形式に変換します。
上記のコードは、Shopifyの商品ページで使用することができます。商品の最小価格が比較対象価格よりも低い場合にはセール価格と定価を表示し、商品の最小価格が比較対象価格よりも低くない場合には、通常価格を表示します。

例2:商品の詳細説明を表示する

 {% if product.description != '' %}
<h2 class="product-description-title">商品説明</h2>
<div class="product-description">{{ product.description }}</div>
{% endif %}

この例では、商品ページに商品の詳細説明を表示する方法を示しています。このLiquidコードでは、商品の説明が空でない場合に限り、product-description-titleというクラス名を持つh2タグで「商品説明」というタイトルを表示し、product-descriptionというクラス名を持つdivタグで商品の詳細説明を表示します。

 【メモ】
「product-description-title」は、Shopifyの標準的なクラス名ではありません。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明のタイトルを表すために使われているものです。テーマごとにクラス名が異なるため、使用するテーマのドキュメンテーションを参照して、詳細を確認する必要があります。

以下は、コードの解説です。

{% if product.description != '' %}

この条件式は、商品の説明が存在する場合にのみ、説明のタイトルと内容を表示するための制御を行います。商品説明が空である場合は、この条件式のブロック内のコードは実行されません。
「!= ''」は、値が空の場合に条件が成立しないことを意味します。つまり、商品の説明が空でない場合に、条件式内のコードが実行されます。
Shopifyの商品ページでは、商品の説明が空の場合があります。このため、上記のコードでは、商品説明が空でない場合に、説明を表示するようにしています。このように条件分岐を使用することで、必要な場合にだけ必要なコードを実行できるようになります。

 <h2 class="product-description-title">商品説明</h2>

h2要素で、商品説明のタイトルを表します。class属性には、「product-description-title」というクラス名が設定されています。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明のタイトルを表すために使われているものです。

<div class="product-description">{{ product.description }}</div> 

div要素で、商品説明の内容を表します。class属性には、「product-description」というクラス名が設定されています。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明の内容を表すために使われているものです。{{
product.description }}は、現在表示している商品の説明を出力するために使用されます。{{ }}はLiquidタグと呼ばれ、Shopifyのテンプレートエンジンの一部です。このタグを使用することで、商品情報を動的に表示することができます。

以上のように、このコードは、ShopifyのテンプレートエンジンのLiquidを使用して、商品ページに商品の説明を表示するために必要なHTMLタグを生成するものです。

例3:カスタムオプションの表示方法をカスタマイズする

 {% if product.options.size > 0 %}
<h2 class="product-options-title">オプション</h2>
<ul class="product-options-list">
{% for option in product.options %}
<li class="product-option">
<span class="product-option-label">{{ option.name }}</span>
{% assign values = option.values | join: ', ' %}
<span class="product-option-value">{{ values }}</span>
</li>
{% endfor %}
</ul>
{% endif %}

この例では、商品ページにカスタムオプションを表示する方法を示しています。このLiquidコードでは、商品にオプションが設定されている場合に限り、product-options-titleというクラス名を持つh2タグで「オプション」というタイトルを表示し、product-options-listというクラス名を持つulタグでオプションをリスト表示します。そして、product-optionというクラス名を持つliタグで各オプションを表示します。オプションのラベルは、product-option-labelというクラス名を持つspanタグで表示し、オプションの値は、product-option-valueというクラス名を持つspanタグで表示します。また、assignタグを使用して、オプションの値をカンマ区切りの文字列として結合しています。

{% if product.options.size > 0 %} 

最初の行は、現在表示されている製品にオプションがある場合にのみ、オプションを表示するための条件分岐です。製品がオプションを持っていない場合は、このブロックはスキップされます。

<h2 class="product-options-title">オプション</h2> 

次の行は、オプションのセクションの見出しを定義しています。この例では、「オプション」というテキストを含むh2タグが使用されます。

<ul class="product-options-list"> 

この行は、オプションリストを定義するために使用されます。ここで使用されているulタグは、リストアイテムを表すliタグを含みます。

{% for option in product.options %} 

次の行は、製品のオプションリストをループしているforループです。ここでは、ループ内でoptionという変数が使用され、これは現在のオプションを表します。
「option」という変数は、ShopifyのLiquidテンプレートエンジンのforループ構文内で使用される変数で、現在反復処理されている製品オプションを表します。
Shopifyストアで製品を作成する際、オプションを追加することができます。例えば、サイズや色、素材など、製品の特性を表すさまざまなオプションを追加できます。これらのオプションは、製品の「options」というプロパティに格納され、それぞれ「name」と「values」という2つのプロパティを持ちます。

<li class="product-option"> 

次の行は、オプションリストの各アイテムを含むliタグを定義しています。ここで使用されているクラス名「product-option」は、このリストアイテムが製品オプションであることを示します。

 <span class="product-option-label">{{ option.name }}</span>

次の行は、オプション名を表示するために使用されます。ここで使用されているクラス名「product-option-label」は、オプション名を表しています。オプション名は、option.nameというLiquid変数から取得されます。

{% assign values = option.values | join: ', ' %}
<span class="product-option-value">{{ values }}</span>

<span class="product-option-value">{{ values }}</span>
最後に、オプションの値を表示するために使用されます。ここで使用されているクラス名「product-option-value」は、オプションの値を表しています。オプションの値は、option.valuesというLiquid変数から取得され、joinフィルターを使用して、カンマ区切りの文字列に変換されます。
このようにして、ShopifyのLiquidテンプレートエンジンを使用して、製品ページでオプションを表示することができます。

 【メモ】
「assign values」とは、ShopifyのLiquidテンプレート言語で使用されるコマンドの1つで、変数に値を代入するために使用されます。

具体的には、以下のように使用します。

{% assign variable_name = value %}

これは、変数「variable_name」に「value」という値を代入することを意味します。この値は、文字列、数値、真偽値、配列など、さまざまなデータ型を持つことができます。
ShopifyのLiquidテンプレートでは、変数の値を代入するために「assign」コマンドを使用する必要があります。変数に値を代入することで、テンプレート内でその変数を使用することができます。たとえば、以下のように変数を使用することができます。

 <p>{{ variable_name }}</p>

これは、変数「variable_name」に代入された値を表示するためのコードです。テンプレート内のどこでも変数を使用することができます。また、変数は他の変数から値を取得することもできます。

ShopifyのLiquidテンプレートでは、変数名には文字、数字、アンダースコア( _ )が使用できます。ただし、先頭に数字を使用することはできません。また、変数名は大文字と小文字を区別するため、同じ名前の変数を2つ定義することができます。

下記のコードは、Shopifyの商品ページのテンプレートファイル(product.liquid)に記述することができます。
product.liquidは、ショップの商品ページのHTMLコードを生成するためのテンプレートファイルであり、以下のようなデフォルトのコードが含まれています。

{% extends 'product-base.liquid' %}

{% assign product = product.selected_or_first_available_variant %}

{% capture current %}product-{{ product.id }}{% endcapture %}

{% unless product.available %}
{% capture sold_out %}{{ 'products.product.sold_out' | t }}{% endcapture %}
{% include 'sold-out' %}
{% endunless %}

<div class="product-single {% if section.settings.show_vendor %}has-vendor{% endif %}" data-section-id="{{ section.id }}" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}" data-product-title="{{ product.title | escape }}" data-variant-title="{{ product.title | escape }}" data-product-url="{{ product.url }}">
<div class="product-single__photos" {% if product.images.size > 1 %}data-aos="zoom-in"{% endif %}>
{% section 'product-template' %}
</div>

<div class="product-single__meta {% if section.settings.show_vendor %}has-vendor{% endif %}">
<div class="product-single__meta-row product-single__meta-row--title">
<h1 class="product-single__title">{{ product.title }}</h1>
</div>

<div class="product-single__meta-row product-single__meta-row--price">
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-single__price" data-product-price>
{{ product.price | money }}
</span>

{% if product.compare_at_price_max > product.price_max %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product-single__sale-price" data-product-sale-price>
{{ product.compare_at_price_max | money }}
</span>
{% endif %}
</div>

<div class="product-single__meta-row product-single__meta-row--vendor" {% unless section.settings.show_vendor %}style="display: none"{% endunless %}>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
<span>{{ product.vendor }}</span>
</div>

{% if section.settings.show_sku %}
<div class="product-single__meta-row product-single__meta-row--sku">
<span class="visually-hidden">{{ 'products.product.sku' | t }}</span>
<span>{{ product.sku }}</span>
</div>
{% endif %}

{% if product.options.size > 1 %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% capture option_index %}{{ option_index | plus: 1 }}{% endcapture %}
<div class="product-single__meta-row product-single__meta-row--option" data-variant-option-name="{{ option.name }}">
<label for="{{ option.name | handle }}" class="product-single__option">{{ option.name }}</label>

<div class="product-single__option-wrapper">
{% assign option_index = forloop.index0 %}
{% include 'product-option' with option %}
</div>
</div>
{% endfor %}
{% endif %}

<

以下は、product.liquidにおいて、先程のカスタマイズコードを実際に記述するべき部分を示したものです。

{% extends 'product-base.liquid' %}

{% assign product = product.selected_or_first_available_variant %}

{% capture current %}product-{{ product.id }}{% endcapture %}

{% unless product.available %}
{% capture sold_out %}{{ 'products.product.sold_out' | t }}{% endcapture %}
{% include 'sold-out' %}
{% endunless %}

<div class="product-single {% if section.settings.show_vendor %}has-vendor{% endif %}" data-section-id="{{ section.id }}" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}" data-product-title="{{ product.title | escape }}" data-variant-title="{{ product.title | escape }}" data-product-url="{{ product.url }}">
<div class="product-single__photos" {% if product.images.size > 1 %}data-aos="zoom-in"{% endif %}>
{% section 'product-template' %}
</div>

<div class="product-single__meta {% if section.settings.show_vendor %}has-vendor{% endif %}">
<div class="product-single__meta-row product-single__meta-row--title">
<h1 class="product-single__title">{{ product.title }}</h1>
</div>

<div class="product-single__meta-row product-single__meta-row--price">
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-single__price" data-product-price>
{{ product.price | money }}
</span>

{% if product.compare_at_price_max > product.price_max %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product-single__sale-price" data-product-sale-price>
{{ product.compare_at_price_max | money }}
</span>
{% endif %}

{# 追加カスタマイズコード (開始) #}
{% assign min_price = product.price %}
{% for variant in product.variants %}
{% if variant.price < min_price %}
{% assign min_price = variant.price %}
{% endif %}
{% endfor %}
<span class="product-single__min-price">{{ min_price | money }}</span>
{# 追加カスタマイズコード (終了) #
}
</div>

<div class="product-single__meta-row product-single__meta-row--vendor" {% unless section.settings.show_vendor %}style="display: none"{% endunless %}>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
<span>{{ product.vendor }}</span>
</div>

{% if section.settings.show_sku %}
<div class="product-single__meta-row product-single__meta-row--sku">
<span class="visually-hidden">{{ 'products.product.sku' | t }}</span>
<span>{{ product.sku }}</span>
</div>
{% endif %}

{% if product.options.size > 1 %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% capture option_index %}{{ option_index | plus: 1 }}{% endcapture %}
<div class="product-single__meta-row product-single__meta-row--option" data-variant-option-name="{{ option.name }}">
<label for="{{ option.name | handle }}" class="product-single__option">{{ option.name }}</label>

これらのページは私がテーマとしている技術を独自に追及しているサイトになります。万が一正確でない可能性もございます。ページ内に書かれている技術と考えをご使用になる場合は当方では一斉責任を負えませんので自己責任でご使用くださいますようお願いいたします。

ガジェットコミュニティーチャット

LOADING...
これらのページは私がテーマとしている技術を独自に追及しているサイトになります。万が一正確でない可能性もございます。ページ内に書かれている技術と考えをご使用になる場合は当方では一斉責任を負えませんので自己責任でご使用くださいますようお願いいたします。

-■shopifyカスタマイズ(Liquid)

Copyright© Sopify構築・Liquid・ECビジネス寺子屋 , 2023 All Rights Reserved Powered by AFFINGER5.