FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

takato
観光客
12 1 4

無料テーマの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以外の場所にもなにかファイルが必要なのか、ご教授いただけると助かります。

 

1 件の受理された解決策
_osamu_iwasaki_
Shopify Partner
189 47 195

成功

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

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

元の投稿で解決策を見る

5件の返信5

株式会社フルバランス
Shopify Partner
1610 573 736

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

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

 

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
takato
観光客
12 1 4

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

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

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

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

_osamu_iwasaki_
Shopify Partner
189 47 195

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

スクリーンショット 2020-11-18 16.15.00.png

takato
観光客
12 1 4

ありがとうございます!

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

_osamu_iwasaki_
Shopify Partner
189 47 195

成功

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

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