Shopifyで新着商品を表示させる（デザインカスタマイズ）

ECプラットフォーム「Shopify」において、自由なデザインで新着商品を表示させるためのコードをご紹介します。

全商品を抽出するためのコレクションを作る

※コレクション名は「all」など

コードを編集する

オンラインストア＞テーマ＞コード編集 からコードを編集する。

• コレクション名：all
• 表示件数：10件
• 表示する情報：商品名・料金・画像・商品へのリンク

{% assign collection = collections['all'] %}
{% for product in collection.products limit:10 %}
<div>
<a href="{{ product.url }}">
{% if product.featured_image == nil %}
<img src="noimg.jpg">
{% else %}
<img src="{{ product.featured_image | img_url:'300x' }}">
{% endif %}
</a>
<p>{{ product.title }}</p><span>{{ product.price | money }}</span>
</div>
{% endfor %}

※2023年12月22日現在の仕様です。