ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説
はじめに
今回の記事は、Shopify アプリである「About ページらくらく作成 | リテリア About Us」の解説記事になります。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。
「About ページらくらく作成 | リテリア About Us」は、Shopify の About Us ページに簡単に会社概要等を挿入できるアプリです。
正確には、About Us ページ以外の全てのページに、会社概要を作成することができます。
三種類の高いデザイン性の表を挿入することで、ストアの信頼性を高めることができます。
興味がある方は、以下の URL よりアプリのインストールを行って下さい。
それでは、アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。
「About ページらくらく作成 | リテリア About Us」でできること
Shopify アプリである「About ページらくらく作成 | リテリア About Us」をインストールすると、以下のようにノーコードで「会社概要」を追加することができます。
こちらのアプリは正確には「表」を挿入できるアプリなので、会社概要として使用する以外にも使用することができます。
ストアの任意の場所に「表」を挿入することができるアプリである、と認識頂いて大丈夫です。
それでは、「About ページらくらく作成 | リテリア About Us」のインストール方法と使い方を解説していきます。
アプリのインストール
それでは、実際にアプリのインストールを行っていきましょう。
ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。
アプリの検索窓に、About ページらくらく作成 | リテリア About Usと入力して下さい。
広告に敗北していますが、4 番目に出てきました。
こちらをクリックして、アプリ画面に移動して下さい。
アプリを追加するをクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント（通称開発アカウント）でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 2.99 ドルで利用できます。7 日間の無料プラン付きです。
アプリを追加するをクリックすると、以下の画面に遷移します。
右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。
以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。
アプリ設定
それでは次に、アプリの設定を行いましょう。
自動インストールの有効化をクリックします。
そして次に、プレビューをクリックしましょう。
ストアのトップページの下に、会社概要が追加されました。
ここまでで、アプリの設定は一通り終了です。
もう少し、細かい設定を見てみましょう。まずは、表の書き方についてです。
デフォルトのものを参考にして、表をカスタマイズして下さい。
表における項目名と内容の区切り文字として//を使用し、改行には--を使用します。
つまり、上記のように記述することで、以下の会社概要（表）を作成することができます。
結構細かい設定項目があり、テーブルの幅やテーブルヘッダーの幅などもカスタマイズすることができます。
例えば、テーブルの幅をカスタマイズすると以下のようになります。
また、表のスタイルも変更することができます。
セクションの表のスタイルから、簡単に変更できます。
About ページらくらく作成 | リテリア About Us には、以下の３つのデザインがあります。
また、テキストや枠線の色等も細かくカスタマイズすることができます。表を細かくカスタマイズして、自分好みの表を作成しましょう。
ここまでで、アプリの設定方法は終了です。
About Us ページに会社概要（表）を挿入する
せっかくなので、「About ページらくらく作成 | リテリア About Us」を用いて About Us ページに会社概要（表）を挿入する方法も解説します。
現在のテーマのアクションのコードを編集から、コードの編集画面に移動して下さい。
Templatesの新しい template を追加するより、テンプレートの作成を行って下さい。
目的にpageを、テンプレートタイプにJSONを、ファイル名にabout-usと入力して、テンプレートの作成を行って下さい。
そうすると、page.about-us.jsonを作成する準備ができますが、中にある程度のコードを書かないと、このファイルを作成することができせん。
なので、page.jsonのコードを丸ごとコピーして、page.about-us.jsonに貼り付けて下さい。
この状態で、右上の保存するをクリックすると、保存が完了します。
ここまで完了したら、ストアのカスタマイズ画面に戻りましょう。
ストアの管理画面から、ページ→ページを追加より、ページの追加を行って下さい。
右下のテーマテンプレートより、about-usを選択して下さい。先程作成したテンプレートファイルですね。
ここまで完了したら、保存をクリックしましょう。
ここまでで、About Us ページの作成は完了です。
それでは次に、「About ページらくらく作成 | リテリア About Us」を About Us ページへ追加していきます。
カスタマイズより、テーマのカスタマイズ画面に移動しましょう。
移動が終わったら、上部のドロップダウンメニューより、ページ→about-usに移動しましょう。
左下のセクションを追加より、らくらく会社概要を追加して下さい。
これで、About Us ページに、「About ページらくらく作成 | リテリア About Us」を追加することができました。
お疲れ様でした。
終わりに
今回は、「About ページらくらく作成 | リテリア About Us」の解説を行いました。
少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。
ここまでお付き合い頂き、誠にありがとうございました。
.png%3Fw%3D400&w=828&q=75)
.png%3Fw%3D400&w=828&q=75)
