テーマDebutのスライダー実装について

[kota777]

ご回答宜しくお願い致します。

下記2点のどちらか実装可能にしたいと思っております。

①デフォルトのスライダーのaタグの領域をボタンではなく、ボタンと画像全体を選択できるようにしたい。

②下記記事のスライダーを実装。

https://torublog.com/shopify-slideshow-swiper-js/#Shopify_Debut

ShopifyにスライドショーSwiper.jsのセクションを追加する部分でエラーがでるので解消したい。

▽エラー

• Error: Invalid preset "スライドショー Swiper": 'class' is not a valid attribute
• Error: Invalid preset "スライドショー Swiper": 'max_blocks' is not a valid attribute

[Jizo_Inagaki]

■①に関して

https://community.shopify.com/c/Technical-Q-A/Clickable-Slideshow-Debut/td-p/618624

上記が参考になるかと思います。

■②に関して

実際に試していないのと軽くしか見ていないので明確にはいえませんが、おそらくエラーの原因はpresetsの中にclassとmax_blocksを書かれているからではと思います。

添付の画像を見る限りpresetsからはじまっているのはあまり見ない印象で全体がわかりませんが、以下の動的セクションの作り方を参考に構造を見直された方がよいかなと思います。

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

https://shopify.dev/docs/themes/sections

また、お使いのテーマ内にいくつかセクションがあるはずですので、実際に動いているサンプルとしてそちらを参考にすることもお勧めします。 

なお、以下は雛形ということではなくあくまで全体のイメージを掴むために記載しますが、Debutの動的セクションの記述をかなり削ったもので概ねこのような構造になるのではと思います。
※わりと適当に要素を削除しているのでこのままではエラーがでる状態かもしれず、その点留意ください

{% schema %}
{
  "name": "Text Section",
  "class": "text-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading"
    }
  ],
  "blocks": [
    {
      "type": "text_block",
      "name": "Text Block",
      "settings": [
        {
          "type": "text",
          "id": "id",
          "label": "Label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Text",
      "category": "Text",
      "blocks": [
        {
          "type": "text_block"
        }
      ]
    }
  ]
}
{% endschema %}