shopify セクション作りのコツ PART1 FLEX編

はじめに

この記事では今日から使えるshopifyのセクションを作る時のコツを紹介していこうと思います。
Tailwind cssを使って作っていくのでTailwind cssについて知らない人はぜひしらべてみてください！

PART1 FLEX編

今回から始まりますこの記事の記念すべき1回目の内容はFLEXです！
flex-directionを使って要素の並びを変えれるようなセクションを作っていきます。

メンタルモデル

私が実際に作ったセクションを例にして紹介していきますので、まずは完成したものから見ていきましょう。
こちらが実際に私が作ったセクションです。こちらはノーコードの部分でテキストと画像の並びを変えられるようになっています。
ノーコードの部分はこちらです。

この画像の一番下に見えます「パソコン時のテキストと画像の順番を指定してください」というところから実際にテキストと画像の並びを入れ替えることができます。

実践！

ここからはコードを見ていきます。
今回大事になってくるのはsettingsのselectです。

{
  "type": "select",
  "id": "contentFlex",
  "label": "パソコン時のテキストと画像の順番を指定してください",
  "options": [
    {
      "value": "flex-row",
      "label": "テキストが左、画像が右"
    },
    {
      "value": "flex-row-reverse",
      "label": "画像が左、テキストが右"
    }
  ]
}

こちらがsettingsの中のselectなんですが、selectはidで呼び出したときにoptionsの中のvalueを使うことができます。
そのためvalueにclass名を書くことで（今回はTailwind cssをつかっているので）ノーコードの部分のselectで選んだoptionが作動してvalueのcssがかかるという仕組みです。
なのでHTML部分には次のように書きます。(これはわかりやすく書いたもので実際のコードではありません)

#クラスでselectのsettingsを呼び出しています。ここにはvalueの値が入ります。
<div class="flex {{ section.settings.contentFlex }}">
  <div>
    <p>{{ section.settings.title }}</p>#これはタイトルです。
    <p>{{ section.settings.text }}</p>#これは中の文章です。
  </div>
  <img src="{{ section.settings.image | img_url: 'master' }}">#これは画像です。
</div>

このようにして親要素のclassでsettingsのselectを呼び出すことでoptionのvalueの値である"flex-row"や"flex-row-reverse"のcssがかかるというわけです。

お疲れさまでした

ここまで読んでいただきありがとうございます。
以上でshopify section作りのコツ PART1 FLEX編は終わりになります。お疲れさまでした！
このようにshopifyのLiquidという言語は奥が深いのでまだまだ学べることはたくさんあります。
私も記事をどんどん上げていこうと思っていますので、ぜひ読んでください。