2024.06.21 2024.07.08

コピペでOK！Shopifyにバナー横並びで表示する方法【独自セクション追加】【DAWN】

にゃん花子

記事内に商品プロモーションを含む場合があります

Shopifyにバナーをいい感じに表示できるセクションが無い〜

はい、今回はただただバナーを表示するセクションを、Shopifyに追加していきます。

使用テーマはお馴染みDAWNです。高機能なんですが、「単純にバナーを表示して、URLリンクするだけ」のようなシンプルなセクションが用意されていませんので、自分で用意してみました。

今回は「コード編集」から、独自セクションを追加します。「コードの編集」自体についての説明はこのブログでは割愛いたします。

このblogでわかること

バナーを横並びにする表示する方法（1つ、2つ、3つ）
URLやバナー画像指定の有無による、表示の条件分岐
セクション違いで同じようなスタイルを使用する場合の注意点
Shopifyでバナー横並びのセクションを追加する方法

バナーの横並びの出来上がりイメージ
追加するソース
使用している、条件分岐の説明
1. URLの指定があるかないか？
2. 2つ以上のバナーで、バナー画像があるか？URL指定はあるか？を判断する条件分岐
同一ページでセクションを使用する場合の注意点
独自セクションの追加方法
おまけ：4つの横並びバナー（SPで2列）

Google広告

バナーの横並びの出来上がりイメージ

今回は、セクションの画像やリンクURLを、このようにカスタマイズ画面で変更できるようにすることがゴールです！
また、URLを入力しない場合は、リンク（a タグ）が非表示になるように、条件分岐をしていきます。（バナーではなく、ただの画像を横並びにしたい場合にも流用可能なように）

追加するソース

liquidファイルのため、そのまま追加ソースを貼ります。
ごちゃごちゃとした説明が不要な方は、下記のソースを新規セクションファイルに貼ってください。

※全てblockでバナー数を追加できるようになっています。

1つのバナー（画像）を100%表示

1<div class="page-width">
2
3<section class="container-1flex">
4
5   {%- if section.settings.link != blank -%}
6            <p><a href="{{ section.settings.link }}"><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></a></p>
7      {% else %}
8        　　　<p><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></p>
9  {%- endif -%}
10
11  {% for block in section.blocks %}
12    {% case block.type %}
13      {% when 'block1' %}
14              {%- if block.settings.block1-url != blank -%}
15             <p><a href="{{ block.settings.block1-url }}"><img src="{{ block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></a></p>
16      {% else %}
17             <p><img src="{{ block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></p>
18          {%- endif -%}
19    {% endcase %}
20  {% endfor %}
21
22</section>
23  
24</div>
25
26{% schema %}
27  {
28    "name": "1つのバナーを100%配置",
29    "settings": [
30    {
31      "type": "image_picker",
32      "id": "image",
33      "label": "バナー"
34    },
35    {
36      "type": "url",
37      "id": "link",
38      "label": "URL"
39    }
40    ] ,
41    "blocks": [
42      {
43        "name": "追加バナー",
44        "type": "block1",
45                "settings": [
46            {
47      "type": "image_picker",
48      "id": "block1-img",
49      "label": "追加バナー"
50            },
51            {
52      "type": "url",
53      "id": "block1-url",
54      "label": "URL"
55    }
56        ]
57      }
58    ] ,
59    "presets": [
60      {
61        "name": "1つのバナーを100%配置"
62      }
63    ]
64  }
65{% endschema %}
66
67{% stylesheet %}
68.container-1flex {
69  display: flex;
70  flex-direction: column;
71  width:100%;
72}
73.container-1flex p{
74  width: 100%;
75  padding:0;
76  margin:0;
77}
78.container-1flex p img{
79  padding:2% 0;
80}
81  @media screen and (max-width: 765px) {
82    
83}
84{% endstylesheet %}
85
86{% javascript %}
87{% endjavascript %}

html、cssはいたってシンプル。

2つ目以降をflexを使用しているため、こちらも合わせてflexを指定しています。
widthを100%表示としているため、PC・SPで個別指定はありません。

2つのバナー（画像）を横並び

PCで2列、スマホでは縦に並びます。

1<div class="page-width">
2
3<section class="container-2flex">
4  {%- if section.settings.link != blank -%}
5            <p><a href="{{ section.settings.link }}"><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></a></p>
6      {% else %}
7            <p><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></p>
8  {%- endif -%}
9  {%- if section.settings.image_2 != blank and section.settings.link_2 != blank -%}
10            <p><a href="{{ section.settings.link_2 }}"><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
11          {%- elsif  section.settings.image_2 != blank -%}
12            <p><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></p>
13
14{%- endif -%}
15  
16
17  {% for block in section.blocks %}
18    {% case block.type %}
19      {% when 'block1' %}
20              {%- if block.settings.block1-url != blank -%}
21             <p><a href="{{ block.settings.block1-url }}"><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></a></p>
22      {% else %}
23             <p><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></p>
24          {%- endif -%}
25    {% endcase %}
26  {% endfor %}
27</section>
28  
29</div>
30
31{% schema %}
32  {
33    "name": "2つのバナー横並び",
34    "settings": [
35    {
36      "type": "image_picker",
37      "id": "image",
38      "label": "1つ目のバナー"
39    },
40    {
41      "type": "url",
42      "id": "link",
43      "label": "URL"
44    },
45    {
46      "type": "image_picker",
47      "id": "image_2",
48      "label": "2つ目のバナー"
49    },
50    {
51      "type": "url",
52      "id": "link_2",
53      "label": "URL"
54    }
55    ] ,
56    "blocks": [
57      {
58        "name": "追加バナー",
59        "type": "block1",
60                "settings": [
61            {
62      "type": "image_picker",
63      "id": "block1-img",
64      "label": "追加バナー"
65            },
66            {
67      "type": "url",
68      "id": "block1-url",
69      "label": "URL"
70    }
71        ]
72      }
73    ] ,
74    "presets": [
75      {
76        "name": "2つのバナー横並び"
77      }
78    ]
79  }
80{% endschema %}
81
82{% stylesheet %}
83.container-2flex {
84  display: flex;
85  flex-wrap: wrap;
86  width:100%;
87}
88.container-2flex p{
89  width: 50%;
90  padding:0;
91  margin:0;
92}
93.container-2flex p img{
94  padding:2%;
95}
96  @media screen and (max-width: 765px) {
97 .container-2flex {
98    flex-direction: column;
99  }
100.container-2flex p {
101    width: 100%;
102  }
103}
104{% endstylesheet %}
105
106{% javascript %}
107{% endjavascript %}

こちらもhtmlとcssは非常にシンプルです。

PCではwidth:50%;を指定し、SPの時はwidth:100%としています。
また、SPではflex-direction: column;を指定して、並び方も変更しています。

３つのバナー（画像）を横並び

PCでは3列、SPでは2列にしています。SPでのwidth指定を変更すれば、1列〜3列まで表示数は変更可能です。

（奇数をレスポンシブっていつも悩みますよね〜…）

1<div class="page-width">
2
3<section class="container-3flex">
4  {%- if section.settings.link != blank -%}
5            <p><a href="{{ section.settings.link }}"><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></a></p>
6      {% else %}
7            <p><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></p>
8  {%- endif -%}
9  {%- if section.settings.image_2 != blank and section.settings.link_2 != blank -%}
10            <p><a href="{{ section.settings.link_2 }}"><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
11          {%- elsif  section.settings.image_2 != blank -%}
12            <p><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></p>
13{%- endif -%}
14  {%- if section.settings.image_3 != blank and section.settings.link_3 != blank -%}
15            <p><a href="{{ section.settings.link_3 }}"><img src="{{   section.settings.image_3 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
16          {%- elsif  section.settings.image_3 != blank -%}
17            <p><img src="{{   section.settings.image_3 | img_url: 'master' }}" style="max-width: 100%;"></p>
18{%- endif -%}
19
20  {% for block in section.blocks %}
21    {% case block.type %}
22      {% when 'block1' %}
23              {%- if block.settings.block1-url != blank -%}
24             <p><a href="{{ block.settings.block1-url }}"><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></a></p>
25      {% else %}
26             <p><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></p>
27          {%- endif -%}
28    {% endcase %}
29  {% endfor %}
30</section>
31  
32</div>
33
34{% schema %}
35  {
36    "name": "3つのバナー横並び",
37    "settings": [
38    {
39      "type": "image_picker",
40      "id": "image",
41      "label": "1つ目のバナー"
42    },
43    {
44      "type": "url",
45      "id": "link",
46      "label": "URL"
47    },
48    {
49      "type": "image_picker",
50      "id": "image_2",
51      "label": "2つ目のバナー"
52    },
53    {
54      "type": "url",
55      "id": "link_2",
56      "label": "URL"
57    },
58    {
59      "type": "image_picker",
60      "id": "image_3",
61      "label": "3つ目のバナー"
62    },
63    {
64      "type": "url",
65      "id": "link_3",
66      "label": "URL"
67    }
68    ] ,
69    "blocks": [
70      {
71        "name": "追加バナー",
72        "type": "block1",
73                "settings": [
74            {
75      "type": "image_picker",
76      "id": "block1-img",
77      "label": "追加バナー"
78            },
79            {
80      "type": "url",
81      "id": "block1-url",
82      "label": "URL"
83    }
84        ]
85      }
86    ] ,
87    "presets": [
88      {
89        "name": "3つのバナー横並び"
90      }
91    ]
92  }
93{% endschema %}
94
95{% stylesheet %}
96.container-3flex {
97  display: flex;
98  flex-wrap: wrap;
99  width:100%;
100}
101.container-3flex p{
102  width: 33%;
103  padding:0;
104  margin:0;
105}
106.container-3flex p img{
107  padding:2%;
108}
109  @media screen and (max-width: 765px) {
110 .container-3flex {
111
112  }
113.container-3flex p {
114  width: 50%;
115  }
116}
117{% endstylesheet %}
118
119{% javascript %}
120{% endjavascript %}

使用している、条件分岐の説明

liquid内で使用している条件分岐について説明します。

URLの指定があるかないか？

今回はバナーということで、それぞれにリンクのURLを指定できるようにしています。
もしURLの指定がなければ、aタグを表示しないように、条件分岐を加えています。

1   {%- if section.settings.link != blank -%}
2　　　{% comment %}もしURLの欄が空白で無い場合は以下を実行{% endcomment %}
3            <p><a href="{{ section.settings.link }}"><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></a></p>
4      {% else %}
5　　　　　{% comment %}上記以外（つまりURLの欄が空白だった場合に）以下を実行{% endcomment %}
6        　　　<p><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></p>
7  {%- endif -%}

2つ以上のバナーで、バナー画像があるか？URL指定はあるか？を判断する条件分岐

バナーを1つだけ表示する場合は問題ありませんが、2つ以上・3つ以上を表示する場合に、「からなず3つバナーを出す」と運用上の縛りが生まれます。
そうすると、もし1つのバナーを、左端に出したい場合に、エラーとなり対処できません。

そのため、2列・3列の表示liquidには
・2つ目、3つ目のバナー画像が指定されているか？
・それぞれURLは指定されているか？
の、2つの条件を組み合わせて条件分岐しています。

1  {%- if section.settings.image_2 != blank and section.settings.link_2 != blank -%}
2　　　{% comment %}もし2つ目のバナー画像が空欄で無い、かつURLの欄が空白で無い場合は以下を実行{% endcomment %}
3            <p><a href="{{ section.settings.link_2 }}"><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
4          {%- elsif  section.settings.image_2 != blank -%}
5　　　{% comment %}もし2つ目のバナー画像が空欄で無い場合は以下を実行{% endcomment %}
6            <p><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></p>
7
8{%- endif -%}

バナー画像・URLがどちらも空欄の場合は、とくに実行内容を指定していません。またURLだけ掲載の場合も、記載間違いの可能性が高く、こちらも特に実行内容を指定していません。

同一ページでセクションを使用する場合の注意点

今回ご紹介したバナーの表示についてなのですが、同一ページ内で合わせて使うのは、あるあるパターンだと思っています。
その場合に気をつけなければならないのが、CSSの干渉です。

違うセクションであっても、同じページ内で読み込まれると、CSS同士が干渉します。
そのため、今回のように条件の違うflexを使用する場合には、「flexのスタイル指定のclass名を分ける」ようにしましょう。

今回であれば、バナー1つ〜バナー3つまでのスタイルなので、それぞれに
・container-1flex
・container-2flex
・container-3flex
としています。

独自セクションの追加方法

それでは、セクションをShopifyに追加していきます。

まずは「オンライン」＞「テーマ」＞「コードを編集」の画面を表示し、
セクション > 「新しいセクションを追加する」をクリックします。
任意の名前を入力して「liquidファイル」を作成しましょう。

liquidの追加画面が表示されますので、任意のliquidを記載して保存すればOKです！

おまけ：4つの横並びバナー（SPで2列）

後日、4つのバナーバージョンを作ったので、ソースのみ掲載しておきます。

1<div class="page-width">
2
3<section class="container-4flex">
4  {%- if section.settings.link != blank -%}
5            <p><a href="{{ section.settings.link }}"><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></a></p>
6      {% else %}
7            <p><img src="{{   section.settings.image | img_url: 'master' }}" style="max-width: 100%;"></p>
8  {%- endif -%}
9  {%- if section.settings.image_2 != blank and section.settings.link_2 != blank -%}
10            <p><a href="{{ section.settings.link_2 }}"><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
11          {%- elsif  section.settings.image_2 != blank -%}
12            <p><img src="{{   section.settings.image_2 | img_url: 'master' }}" style="max-width: 100%;"></p>
13{%- endif -%}
14  {%- if section.settings.image_3 != blank and section.settings.link_3 != blank -%}
15            <p><a href="{{ section.settings.link_3 }}"><img src="{{   section.settings.image_3 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
16          {%- elsif  section.settings.image_3 != blank -%}
17            <p><img src="{{   section.settings.image_3 | img_url: 'master' }}" style="max-width: 100%;"></p>
18{%- endif -%}
19    {%- if section.settings.image_4 != blank and section.settings.link_4 != blank -%}
20            <p><a href="{{ section.settings.link_4 }}"><img src="{{   section.settings.image_4 | img_url: 'master' }}" style="max-width: 100%;"></a></p>
21          {%- elsif  section.settings.image_4 != blank -%}
22            <p><img src="{{   section.settings.image_4 | img_url: 'master' }}" style="max-width: 100%;"></p>
23{%- endif -%}
24
25  {% for block in section.blocks %}
26    {% case block.type %}
27      {% when 'block1' %}
28              {%- if block.settings.block1-url != blank -%}
29             <p><a href="{{ block.settings.block1-url }}"><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></a></p>
30      {% else %}
31             <p><img src="{{  block.settings.block1-img | img_url: 'master' }}" style="max-width: 100%;"></p>
32          {%- endif -%}
33    {% endcase %}
34  {% endfor %}
35</section>
36  
37</div>
38
39{% schema %}
40  {
41    "name": "4つのバナー横並び",
42    "settings": [
43    {
44      "type": "image_picker",
45      "id": "image",
46      "label": "1つ目のバナー"
47    },
48    {
49      "type": "url",
50      "id": "link",
51      "label": "URL"
52    },
53    {
54      "type": "image_picker",
55      "id": "image_2",
56      "label": "2つ目のバナー"
57    },
58    {
59      "type": "url",
60      "id": "link_2",
61      "label": "URL"
62    },
63    {
64      "type": "image_picker",
65      "id": "image_3",
66      "label": "3つ目のバナー"
67    },
68    {
69      "type": "url",
70      "id": "link_3",
71      "label": "URL"
72    },
73    {
74      "type": "image_picker",
75      "id": "image_4",
76      "label": "4つ目のバナー"
77    },
78    {
79      "type": "url",
80      "id": "link_4",
81      "label": "URL"
82    }
83    ] ,
84    "blocks": [
85      {
86        "name": "追加バナー",
87        "type": "block1",
88                "settings": [
89            {
90      "type": "image_picker",
91      "id": "block1-img",
92      "label": "追加バナー"
93            },
94            {
95      "type": "url",
96      "id": "block1-url",
97      "label": "URL"
98    }
99        ]
100      }
101    ] ,
102    "presets": [
103      {
104        "name": "4つのバナー横並び"
105      }
106    ]
107  }
108{% endschema %}
109
110{% stylesheet %}
111.container-4flex {
112  display: flex;
113  flex-wrap: wrap;
114  width:100%;
115}
116.container-4flex p{
117  width: 25%;
118  padding:0;
119  margin:0;
120}
121.container-4flex p img{
122  padding:2%;
123}
124  @media screen and (max-width: 765px) {
125 .container-4flex {
126
127  }
128.container-4flex p {
129  width: 50%;
130  }
131}
132{% endstylesheet %}
133
134{% javascript %}
135{% endjavascript %}