ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「About ページらくらく作成 | リテリア About Us」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

「About ページらくらく作成 | リテリア About Us」は、Shopify の About Us ページに簡単に会社概要等を挿入できるアプリです。

正確には、About Us ページ以外の全てのページに、会社概要を作成することができます。

三種類の高いデザイン性の表を挿入することで、ストアの信頼性を高めることができます。

興味がある方は、以下の URL よりアプリのインストールを行って下さい。

https://apps.shopify.com/about-us-1?locale=ja&from=zenn

それでは、アプリをインストールするとできること・インストール方法・使い方の解説を行っていきます。

「About ページらくらく作成 | リテリア About Us」でできること

Shopify アプリである「About ページらくらく作成 | リテリア About Us」をインストールすると、以下のようにノーコードで「会社概要」を追加することができます。

こちらのアプリは正確には「表」を挿入できるアプリなので、会社概要として使用する以外にも使用することができます。

ストアの任意の場所に「表」を挿入することができるアプリである、と認識頂いて大丈夫です。

それでは、「About ページらくらく作成 | リテリア About Us」のインストール方法と使い方を解説していきます。

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面のアプリ管理から、ストアをカスタマイズに移動しましょう。

アプリの検索窓に、About ページらくらく作成 | リテリア About Usと入力して下さい。

広告に敗北していますが、4 番目に出てきました。

こちらをクリックして、アプリ画面に移動して下さい。

アプリを追加するをクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント(通称開発アカウント)でインストールを行うと、全ての機能を無料で利用することができます。
ちなみに、マーチャント用のアカウントだと、月額 2.99 ドルで利用できます。7 日間の無料プラン付きです。

アプリを追加するをクリックすると、以下の画面に遷移します。
右上のアプリをインストールをクリックして、アプリのインストールを行いましょう。

以下の管理画面に遷移します。ここまでで、アプリのインストールは終了です。

アプリ設定

それでは次に、アプリの設定を行いましょう。

自動インストールの有効化をクリックします。

そして次に、プレビューをクリックしましょう。

ストアのトップページの下に、会社概要が追加されました。

ここまでで、アプリの設定は一通り終了です。

もう少し、細かい設定を見てみましょう。まずは、表の書き方についてです。

デフォルトのものを参考にして、表をカスタマイズして下さい。

表における項目名内容の区切り文字として//を使用し、改行には--を使用します。
つまり、上記のように記述することで、以下の会社概要(表)を作成することができます。

結構細かい設定項目があり、テーブルの幅やテーブルヘッダーの幅などもカスタマイズすることができます。

例えば、テーブルの幅をカスタマイズすると以下のようになります。

また、表のスタイルも変更することができます。

セクションの表のスタイルから、簡単に変更できます。

About ページらくらく作成 | リテリア About Us には、以下の3つのデザインがあります。

また、テキストや枠線の色等も細かくカスタマイズすることができます。表を細かくカスタマイズして、自分好みの表を作成しましょう。

ここまでで、アプリの設定方法は終了です。

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」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/about-us-1?locale=ja&from=zenn

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説