Shopify では、セクションのカスタマイズが簡単にできます。

image2

しかし、通常はホームページ以外のセクションは、固定されておりカスタマイズすることができません。

ホームページも会社概要などで個別に作成したページと同じように、セクションのカスタマイズができればいいのに、と思ったことありませんか?

image3

今回は、ホームページ以外にセクションの項目を追加する方法を紹介します。

Shopify テーマは、Debut を使用しています。

セクションを追加するには、コードを編集します。

image4

各ページは、Templatesフォルダ内にあります。

今回は、ページを編集するので、page.liquidを開きます。

image5

page.liquid<div class="rte">タグ内が、コンテンツを表示する部分になります。

image6

コンテンツは、Sectionsフォルダ内にあります。

例えば、『おすすめ商品』セクションを表示させたい場合は、featured-product.liquidになります。

コードは、{% section '〇〇 %}と入力します。

〇〇の中に、セクションのファイル名、例えばfeatured-productと入力すればいいのです。

ファイル名の拡張子.liquidは省略します。

{% section 'featured-product' %}

image7

右上の『保存』ボタンをクリックします。

image8

カスタマイズで、ページを確認すると、

image9

『おすすめ商品』のセクションが追加されました。

image10

作成したページにセクションを追加したい場合、ぜひ試してみてください。

ブログ一覧