[Shopify]DebutテーマでSlickをインストールしてスライド設置（テーマ開発）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

特定コレクションの商品をスライドで表示させてみました。今回はDebutのテーマに対応するコードをご紹介。Minimalとかでは動きませんのでご注意ください。

✔︎今日のゴール

✔︎Slickインストール

※Debutのみ対象

↓こちらのコードを使います！

❶Assetのtheme.jsの最後尾に上記theme.jsのコードをコピペ

❷Assetに「slick.css.liquid」を作成し上記slick.css.liquidのコードをコピペ

❸Assetに「slick-theme.css.liquid」を作成し上記slick-theme.css.liquidコードをコピペ

❹layout>theme.liquidの19行目に以下のタグを挿入

{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}

❺Sectionに新規liquidファイル作成
（今回はproducts-slider.liquidというファイルを作成してみました）

新規で作成したファイルに上記products-slider.liquidのコードをコピペ

完成！！

カードの上下サイズもエディタからスライドバーで変更できます♪

ボタンもボタンのテキスト変更できたりカラーピッカーでカラー選択できます＾＾

次回は、MinimalテーマVerでSlick.jsを入れてみようと思います♪

↓

↓

↓↓Minimal版インストールしてみました↓↓