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

**URL:** <https://community.shopify.com/t/order-printer/192708>\
**Category:** Shopify アプリ\
**Created:** [February 17, 2023, 4:34am UTC](https://community.shopify.com/t/order-printer/192708 "2023-02-17T04:34:33Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated 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]`を使用することで、各バリエーションの項目名(カラー、サイズなど)を表示可能。投稿者自身が解決し、備忘録として共有。

<div class="post-metadata">

**Author:** ![withD](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@withD](https://community.shopify.com/u/withD)\
**Post date:** [February 17, 2023, 4:34am UTC](https://community.shopify.com/t/order-printer/192708/1 "2023-02-17T04:34:33Z")

</div>

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

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

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

```

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

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

```auto
{% 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 }}を記載すればいいかと思いましたが、上手くいきませんでした。

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

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

---

<div class="post-metadata">

**Author:** ![withD](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@withD](https://community.shopify.com/u/withD)\
**Post date:** [February 21, 2023, 10:53am UTC](https://community.shopify.com/t/order-printer/192708/2 "2023-02-21T10:53:21Z")

</div>

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

商品画像の表示

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

```

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

```markup

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

```