Zenn
✨

【shopifyテーマ開発】shopify無料テーマ「Dawm」コレクションページをLiuqidを用いて実装

2022/08/04に公開
CSS
HTML
web制作
Shopify
Liquid
tech

こんにちは。PeiWebです。
今回はshopifyの無料テーマ「Dawn」のコレクションページをカスタマイズしていきます。

デフォルトのページ

「Dawn」のコレクションページを見せてからどのように変化したのか示していきます！
では、まずは「Dawn」のデフォルトのコレクションページはこちら！

デフォルトの

完成形

次に、完成形のページを見ていきましょう！
こんな感じです^^
カスタマイズしたコレクションページ

では、まずは、コレクションバナーから実装していきます！

Jsonファイル

まずは、コレクションページなので、collection.jsonに以下を記載します。

collection.json
{
  "sections": {
    "collection-banner": {
      "type": "custom-collection-banner",
      "settings": {
      }
    },
  "order": [
    "collection-banner"
  ]
}

jsonファイルには、”settings”と”order”をすればいいんですね。

schemaの定義

次に、schemaの定義します。
collection.jsonでtype: custom-collection-bannerとしたので、custom-collection-banner.liquidファイルにschemaの定義を定義していきます。

custom-collection-banner.liquid
{% schema %}
{
  "name": "コレクションのバナー",
  "tag": "section",
  "settings": [
  {
    "type": "checkbox",
    "id" : "change_display",
    "label": "任意の表示",
    "default": true
  },
  {
    "type": "text",
    "id" : "title",
    "label": "タイトル"
  },

  {
    "type": "richtext",
    "id" : "description",
    "label": "説明"
  },

  {
    "type": "image_picker",
    "id" : "image",
    "label": "ヒーロー画像"
  }

]

}
{% endschema %}

詳しく見ていきます。

"name": "コレクションのバナー"

セクション名を下記のようにコレクションのバナーに設定しております。
コレクションのバナー

"tag": "section"

セクション全体を囲むタグをsectionに指定しております。
"tag": "section"
上記のバナーのセクションをsectionタグで囲んでいます。

"settings"

管理画面上に下記のように表示させるための設定する場所です。settings
settingsの中身は以下のようになっております。

属性 内容
type 設定される項目　※次にどんな種類があるか解説
id 付与されるid名
label テーマエディタに表示されるラベルの名前
default テーマエディタに、表示する情報 (今回は、type:checkboxなので、default:trueにすると、最初からチェックが入るようになっている)

今回用いているtypeの項目は以下です。

値 内容
text テキストフィールド(1行)
richtext 太字・下線などカスタマイズできるテキストフィールド(複数行)
image_picker 画像のセレクタ(画像を入れたりできる)
checkbox チェックボックス

次に、HTMLを書いていきましょう。

バナーのHTML・CSS

では、HTML・CSSを書いていきます。

custom-collection-banner.liquid
{% if section.settings.change_display %}
  {% assign collection_image = section.settings.image %}
  {% assign collection_title = section.settings.title %}
  {% assign collection_description = section.settings.description %}
  
  {% else %}
  {% assign collection_image = collection.image %}
  {% assign collection_title = collection.title %}
  {% assign collectison_description = collection.description %}

{% endif %}

<div class="collection-hero-banner">
  <div class="hero-banner__image">
    <img src="{{ collection_image | img_url: "master"}}" 
    alt="{{ collection_image.alt }}" class="hero-banner__image-image"
    width="{{ collection_image.width }}" 
    height="{{ collection_image.height }}"
    loading="lazy"
    >
  </div>
  <div class="hero-banner__content">
    <div class="hero-banner__content-inner">
      <div class="hero-banner__content-text">
        <h1 class="hero-banner__title"> {{ collection_title }}</h1>
        <p class="hero-banner__description">{{ collection_description }}</p>
      </div>
    </div>
  </div>
</div>

{% style %}
.collection-hero-banner{
  position: relative;

}

.hero-banner__image-image{
  width: 100%;
  height: auto;
}

.hero-banner__content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform : translate(-50%, -50%)
}

.hero-banner__content-inner{
  background-color: #0009;
  padding: 2rem 3rem;
}

.hero-banner__content-text h1, 
.hero-banner__content-text p{
  color: #fff ;
}

{% endstyle %}

詳しく見ていきます。

{% if section.settings.change_display %} 〜 {% else %}　〜　{% endif %}

ここでは、チェックボックスのid change_displayがtrueかfalseか判断して表示させるかどうかを示しております。今回、trueの時に、schemaタグのsettingsで設定した「タイトル」、「説明」、「ヒーロー画像」を反映して、falseのときは、shopify上で設定しているコレクションの「タイトル」、「説明」、「画像」を反映させます。

true(チェックが入っている)の時

false(チェックが入っていない)の時

{% assign A = B %}

これは、liquid内で変数の定義をしております。

section.settings.image

settingsで設定した画像を返します。

section.settings.description

settingsで設定した説明を返します。

collection.image

shopifyの管理画面で設定した該当する「コレクション」の画像を返します。

collection.title

shopifyの管理画面で設定した該当する「コレクション」のタイトルを返します。

collection.description

shopifyの管理画面で設定した該当する「コレクション」の説明を返します。

{{ collection_image | img_url: "master"}}

img_urlフィルターは、画像のURLを返します。
パラメータとして"master"を元の画像の大きさで使いたい時に用います。
img_urlには、様々なパラメータがあります。

元の画像を変更したくない時
{{ collection_image | img_url: "master"}}
画像を1080px × 500pxにする時
{{ collection_image | img_url: "1080x500"}}
画像をアスペクト比を維持しながらwidthを300pxにする時
{{ collection_image | img_url: "300x"}}
画像をアスペクト比を維持しながらheightを300pxにする時
{{ collection_image | img_url: "x300"}}

{% style %} 〜 {% endstyle %}

こちらは、liquidファイル内で、CSSを記述する際に用いております。

ここは、CSSの解説になるので省略しますね。。もしわからないコードがあればお気軽にtwitter(@pei_traveler)のDMからお聞きください！

次回は、商品グリットのセクションを実装していきます！

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

Discussion