Shopifyの好きなページに見出しを挿入できるアプリを解説

はじめに

Shopifyの既存のテーマでは、意外と自由に見出しを追加できないことがありますよね。

今回は、Shopifyのストアの好きなページに自由に見出し(タイトル)を挿入できるアプリについて解説していきたいと思います。

見出し(タイトル)は以下のようなものです。
image.png

今回解説していくのは以下のアプリです。
らくらく見出し挿入アプリ|リテリア Title

アプリの特徴は以下の通りです。

  • アプリブロックを追加するだけで、ノーコードで見出しを追加できる
  • あらゆるページに見出しセクションを挿入できる
  • テキストの色や大きさ、太さなど、デザインを自由にカスタマイズできる
  • 見出しにアイコン画像を追加できる
  • Online Store 2.0完全対応のため、既存のテーマやアプリと干渉の心配がない

月額料金は1.99ドルで、現時点では7日間の無料体験期間があります。

らくらく見出し挿入アプリ|リテリア Titleの使い方

アプリのインストール方法から詳細設定の仕方までを簡単に確認していきましょう。

アプリのインストール方法

ストアの管理画面でアプリ管理>ストアをカスタマイズとクリックしていきます。
image.png

Shopifyのアプリストアに移動するので、検索ボックスにらくらく見出し挿入アプリ|リテリア Titleと入力して検索します。
image.png

該当のアプリをクリックしましょう。
image.png

アプリを追加するをクリックし、次の画面でアプリをインストールをクリックします。

ここまでで、アプリのインストールは完了です。
image.png
image.png

次にアプリの設定をします。テーマに反映の項目で「アプリをインストールするテーマ」を選択し、有効化をクリックしましょう。

ここでは「Studio(公開中のテーマ)」を選択しています。
image.png

アプリを有効化しましたというポップアップがでれば、アプリの設定は完了です。

続いて、有効化ボタンの隣にあるプレビューボタンをクリックしましょう。
image.png

Shopifyのストア画面が表示されるので、下の方までスクロールします。
image.png

以下のようにタイトルPart5のアプリボックスが追加されています。
image.png

画面左側の項目を下までスクロールすると、以下のようにタイトルPart5が追加されているのでクリックしましょう。
image.png
image.png

画面右側にタイトルPart5の詳細設定が表示されます。
image.png

アプリで好きな場所に見出しを移動する方法

例えば見出しのアプリボックスをページの一番上に移動したい場合には、次のように操作します。

画面左側の項目にある、タイトルPart5が表示されているアプリの右側をクリック&ドラッグ(クリックしたままマウスを移動する)して上まで持っていきましょう。
image.png

以下のようにアプリボックスを移動できるようになります。
image.png

一番上までアプリボックスを移動し、クリックすると、以下のようにページの上部に見出しが追加されました。
image.png

好きなページにアプリで見出しを挿入する方法

好きなページに見出しを挿入するには、次のように操作します。

Shopifyのストアの一番上・中央にボックスがあるので、タイトルを挿入したいページを選択しましょう。
image.png
image.png

今回はデフォルトの商品ページを選択してみました。

画面左側の項目を下までスクロールするとでてくるセクションを追加をクリックしましょう。
image.png
image.png

でてきた項目を下までスクロールすると、らくらく見出し挿入アプリ|リテリア TitleタイトルPart1~タイトルPart5までが表示されています。
image.png

好きな見出しを5つまで設定できるということですね。今回はタイトルPart1を選択してみます。
image.png

以下のように表示されました。
image.png

アプリの詳細設定

まず、画面左側の項目で、タイトルPart5をクリックしましょう。

画面右側にタイトルPart5の詳細設定が表示されます。
image.png

画面右側の詳細設定にあるテキストのボックスに、見出しにする文章を入力すると、以下のようにストアに反映されます。
image.png

テキストについては、以下の点をPC(パソコン)・SP(スマホ)それぞれで設定できます。

  • 文字の色
  • 間隔
  • 太さ
  • 大きさ
  • 左右の余白(文字とボーダーの距離)
  • アプリブロックの余白
    image.png
    image.png

また、見出しのタイトルの両端にある**―(ボーダー)**については、以下の点をPC(パソコン)・SP(スマホ)それぞれで設定できます。

  • ボーダーを二重線にする
  • ボーダーの色
  • 長さ
  • 太さ
  • 二重線の間隔(二重線の内側の距離)

今回は、以下のように完成しました。
image.png

その他、このアプリでは見出しにアイコン画像を追加することもできます。カスタマイズしてみると面白そうです。

最後に

ここまでで、らくらく見出し挿入アプリ|リテリア Titleの使い方についての解説は終わりです。

アプリボックスを追加するだけで見出しを追加できるため、多くの人が簡単に導入できそうです。

らくらく見出し挿入アプリ|リテリア Title

ここまでお読みいただき、ありがとうございました。

おすすめ記事