Shopifyの好きなページに見出しを挿入できるアプリを解説
目次
はじめに
Shopify の既存のテーマでは、意外と自由に見出しを追加できないことがありますよね。
今回は、Shopify のストアの好きなページに自由に見出し（タイトル）を挿入できるアプリについて解説していきたいと思います。
見出し（タイトル）は以下のようなものです。
今回解説していくのは以下のアプリです。
らくらく見出し挿入アプリ｜リテリア Title
アプリの特徴は以下の通りです。
- アプリブロックを追加するだけで、ノーコードで見出しを追加できる
- あらゆるページに見出しセクションを挿入できる
- テキストの色や大きさ、太さなど、デザインを自由にカスタマイズできる
- 見出しにアイコン画像を追加できる
- Online Store 2.0 完全対応のため、既存のテーマやアプリと干渉の心配がない
月額料金は 1.99 ドルで、現時点では 7 日間の無料体験期間があります。
らくらく見出し挿入アプリ｜リテリア Title の使い方
アプリのインストール方法から詳細設定の仕方までを簡単に確認していきましょう。
アプリのインストール方法
ストアの管理画面でアプリ管理＞ストアをカスタマイズとクリックしていきます。
Shopify のアプリストアに移動するので、検索ボックスにらくらく見出し挿入アプリ｜リテリア Titleと入力して検索します。
該当のアプリをクリックしましょう。
アプリを追加するをクリックし、次の画面でアプリをインストールをクリックします。
ここまでで、アプリのインストールは完了です。
次にアプリの設定をします。テーマに反映の項目で「アプリをインストールするテーマ」を選択し、有効化をクリックしましょう。
ここでは「Studio（公開中のテーマ）」を選択しています。
アプリを有効化しましたというポップアップがでれば、アプリの設定は完了です。
続いて、有効化ボタンの隣にあるプレビューボタンをクリックしましょう。
Shopify のストア画面が表示されるので、下の方までスクロールします。
以下のようにタイトル Part5 のアプリボックスが追加されています。
画面左側の項目を下までスクロールすると、以下のようにタイトル Part5が追加されているのでクリックしましょう。
画面右側にタイトル Part5の詳細設定が表示されます。
アプリで好きな場所に見出しを移動する方法
例えば見出しのアプリボックスをページの一番上に移動したい場合には、次のように操作します。
画面左側の項目にある、タイトル Part5 が表示されているアプリの右側をクリック＆ドラッグ（クリックしたままマウスを移動する）して上まで持っていきましょう。
以下のようにアプリボックスを移動できるようになります。
一番上までアプリボックスを移動し、クリックすると、以下のようにページの上部に見出しが追加されました。
好きなページにアプリで見出しを挿入する方法
好きなページに見出しを挿入するには、次のように操作します。
Shopify のストアの一番上・中央にボックスがあるので、タイトルを挿入したいページを選択しましょう。
今回はデフォルトの商品ページを選択してみました。
画面左側の項目を下までスクロールするとでてくるセクションを追加をクリックしましょう。
でてきた項目を下までスクロールすると、らくらく見出し挿入アプリ｜リテリア Titleのタイトル Part1 ～タイトル Part5までが表示されています。
好きな見出しを 5 つまで設定できるということですね。今回はタイトル Part1 を選択してみます。
以下のように表示されました。
アプリの詳細設定
まず、画面左側の項目で、タイトル Part5をクリックしましょう。
画面右側にタイトル Part5の詳細設定が表示されます。
画面右側の詳細設定にあるテキストのボックスに、見出しにする文章を入力すると、以下のようにストアに反映されます。
テキストについては、以下の点を PC（パソコン）・SP（スマホ）それぞれで設定できます。
- 文字の色
- 間隔
- 太さ
- 大きさ
- 左右の余白（文字とボーダーの距離）
- アプリブロックの余白
また、見出しのタイトルの両端にある**―（ボーダー）**については、以下の点を PC（パソコン）・SP（スマホ）それぞれで設定できます。
- ボーダーを二重線にする
- ボーダーの色
- 長さ
- 太さ
- 二重線の間隔（二重線の内側の距離）
今回は、以下のように完成しました。
その他、このアプリでは見出しにアイコン画像を追加することもできます。カスタマイズしてみると面白そうです。
最後に
ここまでで、らくらく見出し挿入アプリ｜リテリア Titleの使い方についての解説は終わりです。
アプリボックスを追加するだけで見出しを追加できるため、多くの人が簡単に導入できそうです。
ここまでお読みいただき、ありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
