2024.07.08

【Shopify】告知バーをカスタマイズしよう

にゃん花子

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

Shopifyで重要な役割を果たす、告知バー（アナウンスバー）。シンプルで使いやすいのですが、少しカスタマイズしてみましょう！

今回は、liquidを使って、告知バーを変更していきます。今回の使用テーマはDAWNです。

このblogで分かること

告知バーのカスタマイズ方法

アナウンスバーのカスタマイズ後
変更するliquidファイル
追加したliquidファイルのコード
1. annoncement-bar.liquidの全文

Google広告

アナウンスバーのカスタマイズ後

PCで表示イメージ

入力欄に、2箇所テキスト追加をしています。

変更するliquidファイル

変更するアナウンスバーのliquidファイルは、「セクション」のannoncement-bar.liquidを変更します。

今回は、告知バーに

赤文字での表記箇所を２つ
フォントサイズを一部大きくする

の2つの変更を行います。

具体的には、liquidページ上部に{% stylesheet %} … {% endstylesheet %} でcssスタイルを追加します。

追加したliquidファイルのコード

まず、赤文字で表示する2つのテキストの入力欄を追加します。
56~67行目の箇所を追加しています。

今回は元あった一文の前後に、赤文字を追加するため、2つのテキスト入力欄を追加しています。

次に、出力箇所を追記します。
26行目の赤く囲んだ箇所を、追記しています。

先ほどの2箇所追加した入力欄を出力します。<span></span>で出力します。
※styleを追加するため、任意のクラス名を追加しておきましょう。

最後に、liquidファイル上部にstyleを追記します。

annoncement-bar.liquidの全文

最後に、全文を紹介しておきます。

1{% stylesheet %}
2span.text_red1,span.text_red2{
3  color:#7f0019;
4}
5  .h5 span.text_red2 {
6    font-size: calc(var(--font-heading-scale) * 1.4rem);
7}
8@media only screen and (min-width: 750px) {
9    .h5 span.text_red2 {
10        font-size: calc(var(--font-heading-scale) * 1.5rem);
11    }
12}
13
14{% endstylesheet %}
15
16{%- for block in section.blocks -%}
17  {%- case block.type -%}
18    {%- when 'announcement' -%}
19      <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
20        {%- if block.settings.text != blank -%}
21          {%- if block.settings.link != blank -%}
22            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
23          {%- endif -%}
24              <div class="page-width">
25                <p class="announcement-bar__message {{ block.settings.text_alignment }} h5">
26                  <span class="text_red1">{{ block.settings.text2 | escape }}</span> <span>{{ block.settings.text | escape }}</span> <span class="text_red2">{{ block.settings.text3 | escape }}</span>
27                  {%- if block.settings.link != blank -%}
28                    {% render 'icon-arrow' %}
29                  {%- endif -%}
30                </p>
31              </div>
32          {%- if block.settings.link != blank -%}
33            </a>
34          {%- endif -%}
35        {%- endif -%}
36      </div>
37  {%- endcase -%}
38{%- endfor -%}
39
40{% schema %}
41{
42  "name": "t:sections.announcement-bar.name",
43  "max_blocks": 12,
44  "class": "announcement-bar-section",
45  "blocks": [
46    {
47      "type": "announcement",
48      "name": "t:sections.announcement-bar.blocks.announcement.name",
49      "settings": [
50        {
51          "type": "text",
52          "id": "text",
53          "default": "Welcome to our store",
54          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
55        },
56        {
57          "type": "text",
58          "id": "text2",
59          "default": "red style text",
60          "label": "赤文字にします（前方）"
61        },
62        {
63          "type": "text",
64          "id": "text3",
65          "default": "red style text",
66          "label": "赤文字にします（後方）"
67        },
68        {
69          "type": "select",
70          "id": "text_alignment",
71          "options": [
72            {
73              "value": "left",
74              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
75            },
76            {
77              "value": "center",
78              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
79            },
80            {
81              "value": "right",
82              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
83            }
84          ],
85          "default": "center",
86          "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
87        },
88        {
89          "type": "select",
90          "id": "color_scheme",
91          "options": [
92            {
93              "value": "accent-1",
94              "label": "t:sections.all.colors.accent_1.label"
95            },
96            {
97              "value": "accent-2",
98              "label": "t:sections.all.colors.accent_2.label"
99            },
100            {
101              "value": "background-1",
102              "label": "t:sections.all.colors.background_1.label"
103            },
104            {
105              "value": "background-2",
106              "label": "t:sections.all.colors.background_2.label"
107            },
108            {
109              "value": "inverse",
110              "label": "t:sections.all.colors.inverse.label"
111            }
112          ],
113          "default": "accent-1",
114          "label": "t:sections.all.colors.label"
115        },
116        {
117          "type": "url",
118          "id": "link",
119          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
120        }
121      ]
122    }
123  ],
124  "default": {
125    "blocks": [
126      {
127        "type": "announcement"
128      }
129    ]
130  }
131}
132{% endschema %}
133