ShopifyのAboutページに表を挿入してみる【備忘録】


## はじめに
ノーコードでShopifyストアを色々カスタマイズしようと考え、沢山のアプリを調査したところ、面白そうなアプリを見つけたので簡単な使い方を備忘録としてまとめておきます。

今回の記事は、Shopifyアプリである「About ページらくらく作成 | リテリア About Us」の使用方法を簡単に解説したものです。

こちらのアプリを使用すると、ノーコードでAboutページに会社概要を追加することができます。

高いカスタマイズ性の表をAboutページに挿入することで、訴求力やブランド力の高いストアを作成することが可能になります。

Shopifyとは世界最大のマルチチャネルコマースプラットフォームであり、日本でも頻繁に使用されています。

こちらのShopifyアプリは、ノーコードで通常のテーマには存在しない「表」をAboutページに挿入することができます。

それでは、頑張っていきましょう。

以下からインストールすることができます。

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

## Shopifyアプリとは
Shopifyアプリとは、簡単に説明すると、Shopifyストアに簡単に導入することができるプラグインのことです。Shopifyのアプリストアから探して、インストールすることができます。

完全に無料で使用することができるShopifyアプリと、月額料金を支払って使用できるアプリがあります。

また、類似のアプリも沢山あるため、Shopifyアプリの調査を行うのは割りと大変です。

また、日本製のShopifyアプリはまだまだ少なく、大多数のShopifyアプリは海外製になっています。

今回紹介するShopifyアプリである「About ページらくらく作成 | リテリア About Us」は、日本製のShopifyアプリである、Shopifyストアに簡単に表を挿入することができます。

それでは、Shopifyアプリである「About ページらくらく作成 | リテリア About Us 」について解説していきます。

## Shopifyアプリ リテリア About Usでできること
それでは、Shopifyアプリである「Aboutページらくらく作成 | リテリア About Us」でできることをみていきましょう。

こちらのアプリは、Shopifyストアにノーコードで簡単に表を挿入することができるアプリです。

以下の画像のように、ノーコードで簡単に会社概要を追加することが可能になります。

![](https://storage.googleapis.com/zenn-user-upload/08e73ad0b62e-20220526.png)

こちらのような、ノーコードで表を挿入することができる日本製のShopifyアプリは、他にありません。

基本的に機能はこれだけ（ノーコードで表を挿入することができるだけ）で、価格は2.99ドルになります。

また、プラン購入から7日感は無料で使用することができ、また開発ストアの場合は完全無料で全機能を使用することができます。

## Shopifyアプリ 「Aboutページらくらく作成 | リテリア About Us」の特徴

それでは、「Aboutページらくらく作成 | リテリア About Us」の特徴について解説していきます。

### ノーコードで簡単にAboutページに表を挿入
「Aboutページらくらく作成 | リテリア About Us」を使用すると、ノーコードで簡単にAbout ページ会社概要を挿入することができます。

会社概要が存在することでユーザに安心感を与えることができます。

###  高いカスタマイズ性
三種類のスタイル変更や、文字の大きさ・色・枠線の変更などを行うことができます。また、項目の幅や枠線の色など、様々な項目でカスタマイズすることができます。

### 日本語の管理画面
日本語のアプリなので、日本語の管理画面を使用することができます。また購入に困った際には、日本のエンジニアがサポートしてくれます。

 それでは、実際の使い方を解説していきます。

 ## リテリア About Usのインストール

 それでは、リテリア About Usのインストールを行いましょう。

 ストアの管理画面から、アプリストアに遷移することができます。

 ![](https://storage.googleapis.com/zenn-user-upload/fe5660202c0b-20220526.png)

 以下のようにアプリ名の検索を行って下さい。

 ![](https://storage.googleapis.com/zenn-user-upload/586b98d1b59e-20220526.png)

 以下のように表示されます。

 クリックして、アプリの詳細画面に遷移しましょう。

 ![](https://storage.googleapis.com/zenn-user-upload/57fa65c4e747-20220526.png)

 詳細画面に遷移したら、アプリを追加しましょう。

 Shopifyパートナー用のアカウント（通称開発アカウント）でインストールを行うと、完全無料で全機能を利用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/b6a10c54-3775-97c8-afe4-8543b105ae8b.png)

アプリを追加するをクリックして、以下の画面に遷移しましょう。

アプリのインストールをクリックすると、アプリのインストールを行うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/1e314b84-58fa-7189-1e41-1fe53dd71570.png)

ここまでで、「リテリア About Us」をインストールすることができました。お疲れ様です。

それでは実際の使い方を見ていきましょう。

## リテリア About Us の設定
それでは、リテリア About Usの設定を行います。

管理画面の自動インストールから、**有効化**をクリックするだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/07110ea0-d4cf-ac05-6b36-8777b4a70c79.png)

また、その際にアプリを有効化するテーマを選択する必要があります。

アプリの有効化をクリックした後に、ストアのカスタマイズ画面に移動します。

一番下に、会社概要が追加されているのが確認できます。

以上の手順で、Shopifyにノーコードで表を挿入することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/458cc6fd-b67a-938b-1952-029d3f50a048.png)


ここから実際に、表のカスタマイズを行うことができます。

頑張りましょう。

まずすべきことは、デフォルトの書き方を参考にして、表をカスタマイズすることです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/024bd668-2713-e776-202a-bb9e540224eb.png)

このように、項目名と内容の区切り文字にそれぞれ注意する必要があります。

以上のように入力すると、以下のような表を作成することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/37cb2832-3dde-934a-4c15-4dc4ef59f6aa.png)


表のスタイルやテーブルの幅、文字の大きさや枠線の色など様々な項目を自由にカスタマイズすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/35801237-1ff9-64fc-20b1-d43235484b2f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/69a01567-1be0-c85e-64b1-e87604606462.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/4a9d0e1a-1005-09ce-ceb7-b6b56294b946.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/4763a1b3-171f-6105-376d-ac1f52c2845d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672276/d19dd626-6052-c8ac-c70d-19d1aaa4aed9.png)

このように、高いカスタマイズ性の表を、ノーコードでShopifyストアに挿入することができます。

## 終わりに
ここまでで、リテリア About Us の紹介は終わりです。

お疲れ様でした。

アプリのインストールは、以下のURLより行うことができます。

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