Order printerで商品画像と、バリエーションのタイトル等を表示させたい

Topic summary

Order Printerアプリで商品画像とバリエーションのタイトルを表示する方法についての質問と解決策。

当初の問題:

  • {{ line_item.image }}では画像URLのテキストのみが表示され、画像自体が表示されない
  • バリエーションの選択肢名(例:「カラー」)が表示されず、選択された値(例:「赤色」)のみが表示される

解決方法:

商品画像の表示:

{{ line_item.image | img_url: 'small' | img_tag }}

バリエーションタイトルの表示:

【{{line_item.product.options[0] }}】
・{{ line_item.variant.option1 }}

line_item.product.options[0][1][2]を使用することで、各バリエーションの項目名(カラー、サイズなど)を表示可能。投稿者自身が解決し、備忘録として共有。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

order priterに商品の画像と、バリーエーションの項目名を表示させたいと思っているのですが、うまくいきません。

商品画像の部分は現在は下記のように記載しています。

{% for line_item in line_items %}
<tr>
<td>{{ line_item.image }}</td>
<td><b>{{ line_item.product_title }}</b></td>

{{ line_item.image }}で表示されるかと思いましたが、商品画像のURLが表示されている感じになります。

次に、バリエーションの部分は次のように記載しています。

{% if line_item.variant.option1 %}
・{{ line_item.variant.option1 }}<br>
{% endif %}
{% if line_item.variant.option2 %} 
・{{ line_item.variant.option2 }}<br>
{% endif %}
{% if line_item.variant.option3 %} 
・{{ line_item.variant.option3 }}<br>
{% endif %}

{% if line_item.properties %}{% for propertie in line_item.properties %}
・{{ propertie[1] }}<br>
{% endfor %}
{% endif %}

これだと、選択した内容しか表示されないので、なんの選択肢か分かるようにしたいです。

(例)カラーを選んでください:赤色 といった感じ。

{{ product.options }}もしくは{{ variant.title }}を記載すればいいかと思いましたが、上手くいきませんでした。

また、もしオーダーのタグを記載する方法もあれば知りたいです。

お分かりになりましたら、ご指示をお願いいたします。

解決したので備忘録をかねて下記内容に記します。

商品画像の表示

{{ line_item.image | img_url: 'small' | img_tag }}

オプションのタイトルの表示


{% if line_item.variant.title %}

【{{line_item.product.options[0] }}】

・{{ line_item.variant.option1 }}

{% endif %}
{% if line_item.variant.option2 %} 

【{{line_item.product.options[1] }}】

・{{ line_item.variant.option2 }}

{% endif %}
{% if line_item.variant.option3 %}

【{{line_item.product.options[2] }}】

・{{ line_item.variant.option3 }}

{% endif %}

{% if line_item.properties %}
{% for propertie in line_item.properties %}

【{{ propertie[0] }}】
・{{ propertie[1] }}

{% endfor %}
{% endif %}
 

1 Like