[Shopify]コピペで簡単！タイムスケジュール用のセクションを設置（Dawn）13/100
こんにちは。まりん(@crowd37cord)です。
ページ内でタブを設置して、ページ内で任意の箇所へスクロールできるセクションテンプレートをDawnテーマで作成しました！
セミナーのタイムテーブルとかで使用すると便利♪
インスタライブのスケジュールをアナウンスするのにもお役立ちです★
✔️今回のゴール
「タイムテーブル」というセクションの中に追加できる「ブロック」が5種類
・画像：メインビジュアルとか途中に画像入れたいとき
・タブスクロール：タブ名
・３カラム：説明入れたい時に最大３カラム挿入可
・スケジュール：タイムスケジュールのカードが一つポコっと出現
・余白調整：余白をお好みで調整できます
✔️設置手順はたったの２ステップ
❶Sectionを追加
管理画面＞テーマ＞アクション＞コードを編集＞Section追加クリック
Section名は何でもOK。
私は「malin-lp-timetable」にしました。
以下のサンプルコードをコピペし保存。
◆サンプルコード
<style>
.spaced-section {
margin-top:0;
}
.timetable-kv {
height: 200px;
}
.timetable-kv img,
.timetable-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.timetable-tab,
.timetable-3col {
width: 80%;
margin: 0 auto;
}
.timetable-tab a {
text-decoration: none;
}
.timetable-tab li:hover {
opacity: 0.6;
}
.timetable-tab-card {
position: relative;
width: 100%;
background: #dcdcdc;
padding: 1em;
border-radius: 8px;
}
.timetable-tab-card h3 {
margin: 0;
color: #fff;
font-weight: 600;
}
.timetable-tab-card::after {
content: "▼";
color: #fff;
position: absolute;
top: 13px;
left: 2em;
}
.timetable-3col {
padding-top: 2em;
}
.timetable-3col h2 {
font-size: 2em;
}
.timetable-3col-content {
padding: 1em;
}
.timetable-schedule {
background: #dcdc;
}
.timetable-schedule {
padding: 2em;
}
.timetable-details-card {
background: #fff;
border-radius: 8px;
padding: 1em 2em;
}
.timetable-schedule-left {
padding-right: 5em;
}
.timetable-schedule-title {
font-size: 2.3em;
padding-bottom: 2em;
}
.timetable-schedule-detail {
margin: 0;
}
.timetable-image {
max-width: 100%;
padding-top: 1em;
}
.timetable-txt {
padding-bottom: 1.5em;
}
.timetable-topic {
font-size: 1.6em;
line-height: 1.2;
}
.timetable-btn {
padding: 0.5em 2em;
background: #59b392;
border-radius: 50px;
color: #fff;
font-weight: 600;
text-decoration: none;
}
.timetable-btn:hover {
opacity: 0.6;
}
@media only screen and (max-width: 749px) {
.timetable-3col h2 {
font-size: 1.3em;
}
.timetable-schedule-left {
padding-right: 0;
}
.timetable-tab,
.timetable-3col {
width: 95%;
}
.timetable-schedule {
padding-left: 0;
padding-right: 0;
}
.timetable-schedule-title {
padding-bottom: 1em;
}
}
</style>
<div class="malin-timetable">
<h2 id="{{ section.settings.timetable_id }}" class="center">{{ section.settings.timetable_title }}</h2>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'timetable_img' -%}
{% if block.settings.mv_img != blank %}
<div class="timetable-kv"><img src="{{ block.settings.mv_img | img_url: 'master' }}" alt="" loading="lazy"></div>
{% endif %}
{%- when 'tab_scroll' -%}
<div class="page-width">
<div class="timetable-tab ">
<ul class="grid grid--1-col grid--3-col-tablet collection-list--3-items negative-margin--small">
{% if block.settings.timetable_tab != blank %}<li class="grid__item center"><a href="#{{ block.settings.timetable_tab }}"><div class="timetable-tab-card"><h3>{{ block.settings.timetable_tab }}</h3></div></a></li>{% endif %}
{% if block.settings.timetable_tab2 != blank %}<li class="grid__item center"><a href="#{{ block.settings.timetable_tab2 }}"><div class="timetable-tab-card"><h3>{{ block.settings.timetable_tab2 }}</h3></div></a></li>{% endif %}
{% if block.settings.timetable_tab3 != blank %}<li class="grid__item center"><a href="#{{ block.settings.timetable_tab3 }}"><div class="timetable-tab-card"><h3>{{ block.settings.timetable_tab3 }}</h3></div></a></li>{% endif %}
</ul>
</div>
</div>
{%- when 'timetable_3col' -%}
<div class="page-width">
<div class="timetable-3col">
<h2 id="{{ block.settings.timetable_id }}" class="center">{{ block.settings.timetable_title }}</h2>
<div class="timetable-3col-contents">
<ul class="grid grid--1-col grid--3-col-tablet collection-list--3-items negative-margin--small">
{% if block.settings.timetable_col1 != blank %}<li class="grid__item"><div class="timetable-3col-content"><h3 class="center">{{ block.settings.timetable_title1 }}</h3><p>{{ block.settings.timetable_col1 }}</p></div></li>{% endif %}
{% if block.settings.timetable_col2 != blank %}<li class="grid__item"><div class="timetable-3col-content"><h3 class="center">{{ block.settings.timetable_title2 }}</h3><p>{{ block.settings.timetable_col2 }}</p></div></li>{% endif %}
{% if block.settings.timetable_col3 != blank %}<li class="grid__item"><div class="timetable-3col-content"><h3 class="center">{{ block.settings.timetable_title3 }}</h3><p>{{ block.settings.timetable_col3 }}</p></div></li>{% endif %}
</ul>
</div>
</div>
</div>
{%- when 'timetable_schedule' -%}
<div class="timetable-schedule" style="padding-bottom: {{ block.settings.timetable_margin }}px">
<div class="page-width">
<h2 id="{{ block.settings.timetable_id }}" class="center timetable-schedule-title">{{ block.settings.timetable_title }}</h2>
<div class="timetable-details-card">
<div class="grid grid--1-col grid--2-col-tablet collection-list--2-items negative-margin--small">
<div class="grid__item timetable-schedule-left">
<div class="grid grid--1-col grid--2-col-tablet collection-list--2-items negative-margin--small">
<div class="grid__item">
<p class="timetable-schedule-detail" style="font-size: 2.5em; font-weight: 600;">{{ block.settings.timetable_date }}</p>
<p class="timetable-schedule-detail">時間： {{ block.settings.timetable_time }}</p>
<p class="timetable-schedule-detail">場所： {{ block.settings.timetable_place }}</p>
<p class="timetable-schedule-detail">料金： {{ block.settings.timetable_price }}</p>
</div>
{% if block.settings.timetable_img != blank %}
<div class="grid__item">
<div class="timetable-image"><img src="{{ block.settings.timetable_img | img_url: 'master' }}" alt="" loading="lazy"></div>
</div>
{% endif %}
</div>
</div>
<div class="grid__item">
<div class="timetable-txt">
<p class="timetable-topic">{{ block.settings.timetable_topic }}</p>
<p>{{ block.settings.timetable_description }}</p>
</div>
<div>
<a href="{{ block.settings.timetable_link }}" target="_blank" class="timetable-btn">{{ block.settings.timetable_btn }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{%- when 'timetable_margin' -%}
<div style="padding-bottom: {{ block.settings.timetable_margin }}px"> </div>
{%- endcase -%}
{%- endfor -%}
</div>
{% schema %}
{
"name": "タイムテーブル",
"settings": [
{
"id": "timetable_id",
"type": "html",
"label": "ID",
"info": "タブ名と同じID名を挿入するとタブでスクロールできます。"
},
{
"id": "timetable_title",
"type": "html",
"label": "見出し"
}
],
"blocks": [
{
"type": "timetable_img",
"name": "画像",
"settings": [
{
"type": "image_picker",
"id": "mv_img",
"label": "画像"
},
{
"type": "paragraph",
"content": "-------設定-------"
}
]
},
{
"type": "tab_scroll",
"name": "タブスクロール",
"settings": [
{
"id": "timetable_tab",
"type": "html",
"label": "タブ1"
},
{
"id": "timetable_tab2",
"type": "html",
"label": "タブ2"
},
{
"id": "timetable_tab3",
"type": "html",
"label": "タブ3"
},
{
"type": "paragraph",
"content": "-------設定-------"
},
{
"type": "color",
"id": "color_tabBK",
"label": "背景カラー",
"default": "#000 "
},
{
"type": "color",
"id": "color_tabTxt",
"label": "タブ文字カラー",
"default": "#000 "
}
]
},
{
"type": "timetable_3col",
"name": "３カラム",
"settings": [
{
"id": "timetable_id",
"type": "html",
"label": "ID",
"info": "タブ名と同じID名を挿入するとタブでスクロールできます。"
},
{
"id": "timetable_title",
"type": "html",
"label": "見出し"
},
{
"type": "paragraph",
"content": "▼３カラムまで設定可"
},
{
"id": "timetable_title1",
"type": "html",
"label": "小見出し1"
},
{
"id": "timetable_col1",
"type": "html",
"label": "説明1"
},
{
"id": "timetable_title2",
"type": "html",
"label": "小見出し2"
},
{
"id": "timetable_col2",
"type": "html",
"label": "説明2"
},
{
"id": "timetable_title3",
"type": "html",
"label": "小見出し3"
},
{
"id": "timetable_col3",
"type": "html",
"label": "説明3"
},
{
"type": "paragraph",
"content": "-------設定-------"
},
{
"type": "color",
"id": "color_title",
"label": "見出しカラー",
"default": "#000 "
},
{
"type": "color",
"id": "color_col",
"label": "小見出しカラー",
"default": "#000 "
}
]
},
{
"type": "timetable_schedule",
"name": "スケジュール",
"settings": [
{
"id": "timetable_id",
"type": "html",
"label": "ID",
"info": "タブ名と同じID名を挿入するとタブでスクロールできます。"
},
{
"id": "timetable_title",
"type": "html",
"label": "見出し"
},
{
"id": "timetable_date",
"type": "html",
"label": "日程"
},
{
"id": "timetable_time",
"type": "html",
"label": "時間"
},
{
"id": "timetable_place",
"type": "html",
"label": "場所"
},
{
"id": "timetable_price",
"type": "html",
"label": "参加費"
},
{
"type": "image_picker",
"id": "timetable_img",
"label": "画像"
},
{
"id": "timetable_topic",
"type": "html",
"label": "トピック"
},
{
"id": "timetable_description",
"type": "html",
"label": "説明"
},
{
"id": "timetable_btn",
"type": "text",
"label": "ボタン"
},
{
"id": "timetable_link",
"type": "url",
"label": "リンク"
},
{
"type": "number",
"id": "timetable_margin",
"label": "余白(px)",
"default": 20
},
{
"type": "paragraph",
"content": "-------設定-------"
},
{
"type": "color",
"id": "color_bk",
"label": "セクション背景カラー",
"default": "#fff "
},
{
"type": "color",
"id": "color_title",
"label": "小見出しカラー",
"default": "#59b392 "
},
{
"type": "color",
"id": "color_topic",
"label": "トピック文字カラー",
"default": "#fff "
},
{
"type": "color",
"id": "color_cardBK",
"label": "カード背景カラー",
"default": "#fff "
},
{
"type": "color",
"id": "color_btn",
"label": "ボタンカラー",
"default": "#59b392 "
},
{
"type": "color",
"id": "color_btnTxt",
"label": "ボタン文字カラー",
"default": "#fff "
}
]
},
{
"type": "timetable_margin",
"name": "余白調整",
"settings": [
{
"type": "number",
"id": "timetable_margin",
"label": "余白(px)",
"default": 20
}
]
}
],
"presets": [
{
"name": "タイムテーブル",
"blocks": [
{
"type": "tab_scroll"
}
]
}
]
}
{% endschema %}
<script>
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
for (let i = 0; i < smoothScrollTrigger.length; i++){
smoothScrollTrigger[i].addEventListener('click', (e) => {
e.preventDefault();
let href = smoothScrollTrigger[i].getAttribute('href');
let targetElement = document.getElementById(href.replace('#', ''));
const rect = targetElement.getBoundingClientRect().top;
const offset = window.pageYOffset;
const gap = 10;
const target = rect + offset - gap;
window.scrollTo({
top: target,
behavior: 'smooth',
});
});
}
</script>※サンプルコードはカラーなどのCSS部分は反映されません。
以上で、セクションに「タイムテーブル」というセクションが追加されてると思います！
❷カスタム画面で設定
管理画面＞テーマ＞カスタム
セクション追加＞タイムテーブル選択
あとはお好きにカスタマイズしてみてください。
Shopifyは簡単にLPも作成できるのが嬉しいですね♪
✔️コピペでOK！フルコード
見出しや背景カラー、画像サイズなどをカスタム画面から編集できるフルコードをご用意する予定です。
完成しましたらこちらへアップします。
サンプルコードではスマホ版調整できてないので、その辺も調整します。
ここまでご覧いただきありがとうございました！