schemaを使いShopifyのトップ画面にスライダーを表示する方法

Shopifyテーマカスタマイズでｍschemaを使いスライド画像を登録する方法の備忘録。

sectionsフォルダを作成し、hero.liquidを作成する。

hero.liquidに以下のコードを記述する

<!-- Hero Section-->
<section class="hero hero-home no-padding">
    <!-- Hero Slider-->
    <div class="owl-carousel owl-theme hero-slider">
      <div style="background: url({{section.settings.slide_img | img_url: '2048x' }});" class="item d-flex align-items-center has-pattern">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <h1>Hub</h1>
              <ul class="lead"> 
                <li><strong>Bootstrap 4 E-commerce</strong> template</li>
                <li><strong>24</strong> pages, <strong>6</strong> colour variants</li>
                <li><strong>SCSS</strong> sources </li>
                <li>frequent & <strong>free updates</strong></li>
              </ul><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag"> </i></a>
            </div>
          </div>
        </div>
      </div>
      <div style="background: url({{section.settings.slide_img2 | img_url: '2048x'}});" class="item d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 text-white">
              <h1>Labore et dolore magna aliqua</h1>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag">  </i></a>
            </div>
          </div>
        </div>
      </div>
      <div style="background: url({{section.settings.slide_img3 | img_url: '2048x'}});" class="item d-flex align-items-center">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 text-white">
              <h1>Sed do eiusmod tempor</h1>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a href="#" class="btn btn-template wide shop-now">Shop Now<i class="icon-bag">           </i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

{% schema %}
 {
    "name": "slider",
    "settings": [
    {
      "id": "slide_img",
      "type": "image_picker",
      "label": "slide img"
    },
    {
      "id": "slide_img2",
      "type": "image_picker",
      "label": "slide img2"
    },
    {
      "id": "slide_img3",
      "type": "image_picker",
      "label": "slide img3"
    }
    ]
 }
{% endschema %}

schema部分の詳細

｛% schema %｝
　”name”: “slider”　※任意の名前→shopifyのカスタマイズ画面に表示される
　”settings”:[　※ここに設定を記述
　｛
      “id”: “slide_img”,  　※ユニークのID、他とは被らない
      “type”: “image_picker”, 　※ 入力形式→画像なのでimage_picker
      “label”: “slide img” 　※入力ホームでのラベル名 
　｝
　]
｛% endschema %｝

コード部分の詳細

 <div style=”background: url({{section.settings.slide_img | img_url: ‘2048x’ }});” class=”item d-flex align-items-center has-pattern”>

・ section.settings.slide_img 　※これで画像を呼び出し
・ | img_url: ‘2048x’  　※フィルターで画像の設定

Shopify管理画面での設定

管理画面にホームページ設定→sliderが表示されるのでここから画像を登録

表示されていれば問題なし！