このチャプターの目次
このキャプチャーから、新規セクションを追加する方法を解説します。本書では、Dawnにスライダーセクションを追加します。スライダーセクションのHTML,CSS,JSのみで雛形までを解説します。
Shopify Online Store 2.0からセクションの需要は上がりました。いままでのセクションは、ホームページに限定されていました。2.0からアプリ不要で全ページのセクションが変更することができるようになり、かなりのカスタマイズ性が上がりました。
新規セクションを追加する
このキャプチャーでは、Dawnに新規セクションを追加します。追加するセクションは、スライダーのセクションです。Dawnではスライダーのセクションが存在しません。1.0のデフォルトテーマであるDebutのスライダーのセクションを参考にしたいと思います。
本書でShopify-CLIを導入したので、ローカル環境からスライダーを作成していきます。
- コマンドプロントでGitの作業用ブランチを作成します。
git checkout -b feature-slider
- [sections]内に新規ファイルを作成します。今回は、
slider.liquidにします。
-
{% schema %}から記述したいと思います。以下のJSONをschema内に追加してください。
<h1>スライダー</h1>は、表示確認するために記述しておいてください。
JSONは、Debutのスライダーとほとんど変わりません。違う点は以下です。
- テキストアラインメントは、中央、右中央、左中央のみにしています。Debutのスライダーは、9カ所(左上、中央上など)ありますがコードが複雑になりますので３カ所のみにしています。
- 画像アラインメントは削除しています。
- 他言語の表示は削除しています。
<h1>スライダー</h1>
{% schema %}
{
"name": "スライダーsample",
"class": "slide-wrap",
"settings": [
{
"type": "select",
"id": "slide_height",
"label": "スライドの高さ",
"default": "adapt",
"options": [
{
"label": "最初の画像の高さに対応",
"value": "adapt"
},
{
"label": "小",
"value": "small"
},
{
"label": "中",
"value": "medium"
},
{
"label": "大",
"value": "large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": "文字サイズ",
"options": [
{
"label": "中",
"value": "medium"
},
{
"label": "大",
"value": "large"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": "テキストアラインメント",
"default": "center center",
"options": [
{
"label": "中心",
"value": "center center"
},
{
"label": "左中央",
"value": "left center"
},
{
"label": "右中央",
"value": "right center"
}
]
},
{
"type": "checkbox",
"id": "show_overlay",
"label": "オーバーレイを表示する",
"default": true
},
{
"type": "checkbox",
"id": "auto",
"label": "スライドの自動切り替え",
"default": false
},
{
"type": "range",
"id": "speed",
"label": "スライドの変更する間隔",
"max": 9,
"min": 3,
"step": 2,
"unit": "秒",
"default": 5
}
],
"blocks": [
{
"type": "slide",
"name": "画像スライド",
"limit": 3,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "画像"
},
{
"type": "text",
"id": "slide_title",
"default": "見出しが入ります。",
"label": "見出し"
},
{
"type": "text",
"id": "subheading",
"default": "あなたのブランドのストーリーをビデオや画像で伝える",
"label": "小見出し"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "ボタンのラベルが入ります",
"info": "ボタンのラベルのインフォメーション"
},
{
"type": "url",
"id": "button_link",
"label": "URL"
}
]
}
],
"presets":[
{
"name": "スライダー画像",
"category": "画像",
"settings": {
"auto": false,
"speed": 5
}
}
]
}
{% endschema %}
-
slider.liquidを保存してください。その後コマンドプロントでShopify theme serveを実行します。
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #124493758511 on *****.myshopify.com
┃ 100%
┃ Serving .
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Online Store Editor:
┃ https://*****.myshopify.com/admin/themes/124493758511/editor
┃
┃ Share this theme preview:
┃ https://*****.com/?preview_theme_id=124493758511
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (2.17s) ━━━
- [Customize this theme in the Online Store Editor:]のURLを開いてください。
- 管理画面が表示されます。[セクションの追加]をクリックして。
- 本書通りの場合は、[スライダーsample]を追加してください。schema内のnameに設定した名前になります。
- [画像スライド]も追加して、要素がちゃんと表示されているか確認してください。以下に完成形を添付しておきます。照らし合わせてみてください。
- スライダーセクション
- 画像ブロック（スライダー内のブロックです。上限3つまで追加できます。）
schemaの設定は完了です。次はスライダーの雛形を作成したいと思います。
- スライダープラグインのswiper.jsをダウンロードしてください。
- ダウンロードしたフォルダの2つのファイルを取り出して、テーマの[assets]内に格納してください。
- [package]フォルダ > [css]フォルダ > [swiper.min.css]
- [package]フォルダ > [js]フォルダ > [swiper.min.js]
- [layouts]フォルダ内の
theme.liquidを修正します。格納したswiperを読み込んでください。
{% render 'meta-tags' %}
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
+ <script src="{{ 'swiper.min.js' | asset_url }}"></script>
{{ 'base.css' | asset_url | stylesheet_tag }}
+ {{ 'swiper.min.css' | asset_url | stylesheet_tag }}
-
slider.liquidにHTMLを貼り付けます。Liquidコードは入れていません。
- <h1>スライダー</h1>
+ <div class="swiper-container slideshow--small">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="slide-overlay">
+ </div>
+ <img src="https://picsum.photos/500/300">
+ <div class="slide-content center">
+ <h2 class="mega-title--large">Slide Title 1</h2>
+ <p class="mega-desc--large">Lorem ipsum dolor sit amet,
+ consectetur</p>
+ <a href="#" class="btn slideshow__btn">ボタンのラベル</a>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="slide-overlay">
+ </div>
+ <img src="https://picsum.photos/500/301">
+ <div class="slide-content center">
+ <h2 class="mega-title--large">Slide Title 2</h2>
+ <p class="mega-desc--large">Lorem ipsum dolor sit amet, +consectetur</p>
+ <a href="#" class="btn slideshow__btn">ボタンのラベル+ </a>
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="slide-overlay">
+ </div>
+ <img src="https://picsum.photos/500/302">
+ <div class="slide-content center">
+ <h2 class="mega-title--large">Slide Title 3</h2>
+ <p class="mega-desc--large">Lorem ipsum dolor sit amet, +consectetur</p>
+ <a href="#" class="btn slideshow__btn">ボタンのラベル</a>
+ </div>
+ </div>
+ </div>
+ </div>
{% sechema %}
**** 省 ****
{% endschema %}
- HTMLの下に、プラグインのJSを追加してください。
</div>
</div>
+ <script type="text/javascript">
+ const swiper = new Swiper('.swiper-container', {
+ // 自動再生（true:自動再生する、false:自動再生しない）
+ autoplay: {
+ delay: 9000,
+ },
+ // スライド方向（水平方向）
+ direction: 'horizontal',
+ // エフェクト（true:フェードアニメーション、false:スライドアニメーション）
+ effect: 'fade',
+ // ループ
+ loop: true,
+ // 表示枚数
+ slidesPerView: 1,
+ // ページネーション（true:表示、false:非表示）
+ pagination: false,
+ // ページ送りボタン（true:表示、false:非表示）
+ navigation: false
+ });
+ </script>
{% sechema %}
**** 省 ****
{% endschema %}
- コマンドプロントで
Shopify theme serveを実行します。[Customize this theme in the Online Store Editor:]のURLを開いてください。
スライダーが正常に動作していることを確認してください。見出しなどのテキスト部分は、スタイルを適応していないので重なって表示されています。重なっていても気にしないでください。
補足：画像は、サンプルURLなのでブラウザを再読み込みするたびに変わります。
- HTMLの上に、CSSを貼り付けてください。後に解説するので安心してください。
+<style>
+.swiper-container{
+ max-height: 100vh;
+ transition: height .6s cubic-bezier(.44, .13, .48, .87);
+}
+.swiper-slide{
+ position: relative;
+}
+.swiper-slide img{
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ vertical-align: bottom;
+}
+.slide-overlay::before{
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba(204,204,204,0.8);
+}
+.swiper-slide .slide-content{
+ position: absolute;
+ top: 50%;
+ padding: 20px;
+}
+@media only screen and (max-width: 750px) {
+ .swiper-slide .slide-content{
+ padding: 0px;
+ }
+}
+.swiper-slide .slide-content.center{
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ text-align: center;
+}
+.swiper-slide .slide-content.left{
+ left: 0%;
+ transform: translateX(0%) translateY(-50%);
+ text-align: left;
+}
+.swiper-slide .slide-content.right{
+ right: 0%;
+ transform: translateX(0%) translateY(-50%);
+ text-align: right;
+}
+.swiper-slide .slide-content h2{
+ color: #FFF !important;
+ margin: 0px;
+}
+.swiper-slide .slide-content p{
+ margin: 0px;
+}
+.slideshow--small {
+ height: 175px;
+}
+@media only screen and (min-width: 750px) {
+ .slideshow--small{
+ height: 475px;
+ }
+}
+.slideshow--medium {
+ height: 270px;
+}
+@media only screen and (min-width: 750px) {
+ .slideshow--medium{
+ height: 650px;
+ }
+}
+.slideshow--large{
+ height: 375px;
+}
+@media only screen and (min-width: 750px) {
+ .slideshow--large {
+ height: 775px;
+ }
+}
+.swiper-slide .slide-content h2.mega-title--large{
+ font-size: 45px;
+}
+.swiper-slide .slide-content p.mega-desc--large{
+ font-size: 22px;
+}
+@media only screen and (max-width: 750px) {
+ .swiper-slide .slide-content h2{
+ font-size: 18px;
+ }
+ .swiper-slide .slide-content p{
+ font-size: 12px;
+ }
+ .swiper-slide .slide-content h2.mega-title--large{
+ font-size: 22px;
+ }
+ .swiper-slide .slide-content p.mega-desc--large{
+ font-size: 14px;
+ }
+}
+.slideshow__btn{
+ display: inline-block;
+ margin-top: 20px;
+ padding: 10px 20px;
+ background-color: red;
+ color: #fff;
+ text-decoration: none;
+}
+@media only screen and (max-width: 750px) {
+ .slideshow__btn{
+ display: inline-block;
+ margin-top: 10px;
+ padding: 5px 10px;
+ }
+ }
+ </style>
<div class="swiper-container slideshow--small">
<div class="swiper-wrapper">
- 表示を確認してみてください。まだ、Shopifyの管理画面の設定を変更してもスライダーセクションに反映されません。続きのPart6で紐付けていきます。
