Shopifyテーマカスタマイズでmschemaを使いスライド画像を登録する方法の備忘録。
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が表示されるのでここから画像を登録

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