Debutのトップページに独自のセクションを作成して追加する方法

[takato]

無料テーマのDebutを使って開発を行っているのですが、TOPページに新しいセクションを追加する方法がわからず困っています。

■やったこと

sectionに新しく、「slick-slider.liquid」というファイルを作成。

内容は下記。

<div class="top-slider" id="js-top-slider">
  	{% for block in section.blocks %}

      <div class="top-slider-content">
        <img src="{{ block.settings.slick_image | img_url: '480x' }}">
      </div>

	{% endfor %}
</div>


<script>
$('#js-top-slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true
});
</script>

<style>
.top-slider{
  width: 100%;
}

.top-slider-content{
  width: 100%;
  height: 904px;
  background-position: center;
  background-size: cover;
}

.top-slider-content img{
  object-fit: cover;
}


</style>


{% schema %}
  {
	"name":  "スリックスライダー",
	"class": "index-section",
	"max_blocks": 10,
	"blocks": [
		{
		"name": "slider-imege", 
		"type": "header",
		"settings": [
			{
			"type": "image_picker",
			"id": "slick_image",
			"label": "slick image"
			}
		]
		}
	]
}
{% endschema %}

その他、slickを使うためのCDNなどはヘッダーで読み込んでいます。

■問題

schemaの記述に問題があるのか、正常に保存できてもTOPページのカスタマイズ時に、「セクションを追加」の欄に今回作成した「スリックスライダー」が出てきません。

書いたコードに問題があるのか、もしくはsection以外の場所にもなにかファイルが必要なのか、ご教授いただけると助かります。

[株式会社フルバランス]

解決策ではありませんが、debutのsectionsに含まれる、slideshow.liquidを少しずつ思った形に改良して

作られてはいかがでしょうか？

[_osamu_iwasaki_]

index.liquidに　{% section 'slick-slider' %}　を追加して見てください。

[takato]

ありがとうございます！！

このスライダーはそうしませんでしたが、他の箇所はその方法で、できました！！

おそらくTOPのセクションに入れるための記述があるのかと思うのですが、その箇所がわからず、セクションに追加できませんでした。

最終的に、index.liquidでセクションを読み込むことで、ヘッダーのように可変的ではない形で読み込むことができました！

[takato]

ありがとうございます！

僕も最終的にその方法で解決しましたが、その方法だとTOPのセクションの上に独立してしまうので、あまりスマートなやり方ではないかもしれません。

[_osamu_iwasaki_ · Accepted solution]

トップページの動的セクションは、{{ content_for_index }} の場所に、
config / settings_data.json  で設定したプリセットデータがあるのですが、
書ききれないので、こちらの公式ブログを見ながら試して見てください。

https://www.shopify.jp/blog/partner-shopify-theme-section-first-create