Shopify有料テーマの使い方 | テーマを探すところからインストール方法まで紹介しました

こんにちは、個人でShopifyを使ったオンラインショップ制作をしておりますたかぼー(@taka_forward)です。テーマ選定の際に「無料テーマを使う？有料テーマを使う？」という話になると思うのですが、いざ有料テーマを使うことになった場合にどうやって有料テーマを使えばいいのか？という疑問にお答えする記事になります。

ぺんぎん

「有料テーマ」をどうやって使えばいいのか知りたいです！できれば一回試して使ってみたいのですが……

たかぼー

有料テーマを使うには「テーマストアからインストール」を行います！「お試し」でカスタマイズをすることもできますのでぜひ一度使ってみましょう〜！！

<この記事を読むことのメリット>
・Shopifyのテーマストアの使い方がわかる
・テーマを選ぶ際に気を付けるべきポイントがわかる
・有料テーマのインストール方法がわかる

テーマストアについて

2020年9月現在、64の有料テーマと9の無料テーマがあります。

テーマの探し方

テーマストアでは以下の4つの方法からお好みのテーマを探すことができます。

• ドロップダウンメニュー（Collections）からテーマについている機能や見た目などから絞り込みを行うことができます
• ドロップダウンメニュー（Industries）から業界別に使われているテーマを表示して自分にあったテーマを探せます
• All themesから全てのテーマを表示して業界や機能による条件で絞り込みを行えます（おすすめ！）
• 「Search」からテーマ名で検索をすることでインストールするテーマを直接探せます

All themesから全てのテーマを表示した際には、以下の項目を元にした条件の絞り込みが行えます。

• Price：テーマの値段→「有料／無料」
• Number of products：商品数による分類→「1つ／小規模／中規模／大規模」
• Layout style：レイアウトよる分類→「ワイド／グリッド」など
• Product page：商品ページの機能による分類→「タブ機能の有無／写真のズーム機能の有無／関連商品機能の有無」など
• Home page：ホームページの機能による分類→「スライドショー／ヘッダーのスライドショー」など
• Navigation：ナビゲーションの形状による分類→「サイドバー／複数階層メニュー」など
• Marketing and social media：メールマーケティング機能やSNS連携による分類→「ポップアップの表示／プロモーションバーの表示／Disqus Blog Commentとの連携／Twitterとの連携」
• Industries：販売商品の業界別による分類→「ファッション／アクセサリー／美容品／食品／スポーツ用品」など

上記の項目から自分にあったテーマを探してみましょう。

ぺんぎん

「View demo」からデモストアにアクセスすることができ、実際のストアの表示がどのようになっているかを確認することができます！

※参考：2020.9現在 有料テーマ人気ランキング
第1位：Prestige
第2位：Impulse
第3位：Warehouse
第4位：Streamline
第5位：Motion

※参考：2020.9現在 無料テーマ人気ランキング
第1位：Minimal
第2位：Simple
第3位：Debut
第4位：Narrative
第5位：Brooklyn

テーマを選ぶ際に気をつけるべきポイント【必読】

テーマを選ぶ際に気をつけるポイントがいくつかありますので紹介させていただきます。

• 掲載する商品数とテーマが対応しているかどうか
• 掲載する商品のイメージがテーマとあっているか
• カラーバリエーションがある商品を販売する場合、それを商品一覧ページに載せるかどうか？
• トップページのレイアウトのみだけではなく、その他のページ（特に「コレクションページ（商品一覧がみれるページ）」・「商品詳細ページ」もみてテーマを選んでいるか？
• ブログ機能を活用される場合、ブログのレイアウトもチェックしているか？

有料テーマのインストール方法

公式テーマを使用する場合、「テーマストア」からインストールを行います。

使用テーマが決まっている場合のテーマ購入方法：テーマの詳細から「buy theme」にて購入

お客様から「テーマを指定されている」場合、管理画面から公式ストアにアクセスをし、以下の順序でインストールを行っていきます。

1. 管理画面にログイン > （オンラインストア内の）テーマ > テーマストアに行く をクリック

2. テーマストアにて、「Search」よりテーマ名で検索 > 「Buy theme」をクリックし購入します

3. 購入画面に移行するので、「請求を承認する」クリックで購入が完了します。

購入は「クレジットカード」もしくは「Paypal」になります。また、ストアにカード登録されていない場合、この画面の前にカード登録の画面が出ますので登録をしましょう。

使用テーマが決まっていない場合のテーマの購入方法：テーマの詳細から「Try theme」にてテーマ選定後の購入

ぺんぎん

実際のサイトイメージをみてからテーマを決めたいというお客さんもたくさんいらっしゃいますので、有料テーマを使用する際の多くはこちらのケースになるかと思われます；；

お客様から「テーマを指定されていない場合は」以下の順序でテーマの選定とインストールを行っていきます。

1. 大まかなテーマ選定を行う
2. 決められたテーマを「Try theme」から仮インストールをし、触って写真やテキストを流し込む
3. お客様からOKが出たらテーマ購入を行います

1. 大まかなテーマ選定を行う

打ち合わせの際にテーマの提案を行います。僕は販売する商品の内容と商品数を予め聞いておいて、打ち合わせの際にテーマストアをみながらお客さんと一緒に選んでます。

2. 決められたテーマを「Try theme」から仮インストールをし、触って写真やテキストを流し込む

打ち合わせの際にテーマの提案を行います。僕は販売する商品の内容と商品数を予め聞いておいて、打ち合わせの際にテーマストアをみながらお客さんと一緒に選んでます。

1. （使用テーマが決定 > ）管理画面にログイン > （オンラインストア内の）テーマ > テーマストアに行く をクリック

2. テーマストアから選定されたテーマを表示、「Try theme」をクリック

3. テーマの画面が表示されるので右下の「Customize theme」からテーマの作り込みを行います。もし画面を閉じてしまった場合や、改めて編集をする場合は「管理画面のテーマ > テーマライブラリー内（使用テーマの）カスタマイズ」から編集を再開することが可能です。

テーマを購入しないとコードをさわれないのでこの時点では画像とテキストをいれる、テーマ機能で用意されている範囲でのカスタマイズになります。

3. お客様からOKが出たらテーマ購入を行います

「管理画面のテーマ > テーマライブラリー内（使用テーマの）アクション > プレビュー > Share preview」機能を使って発行されるURLをお客様にお送りし、画面の確認を行います。ここでOKが出れば、「管理画面のテーマ > テーマライブラリー内（使用テーマの）アクション > 購入する」からテーマの購入を行います。

ぺんぎん

ここから購入した場合、カスタマイズしたデータを残したまま購入されますので再び１からサイトを作り直す、ということはありません！

有料テーマをインストールした後に気をつけたいポイント：translation missingが表示されてしまった時の対処法について

この画像のように、「translation missing: ja.[id]」と表示される画面が出てしまった時の対処法

1. （左下の）設定 > ストアの言語 から、デフォルトの言語が日本語になっていることを確認する
2. 「テーマ言語を変更する」から言語を日本語に再設定し、翻訳する画面が出るのでそこで翻訳を埋める

まとめ

• Shopifyのテーマストアの使い方がわかる

テーマストアでは75のテーマが公開されており、ヘッダメニューの「All themes」から機能や業界別でテーマを選ぶのがおすすめ。また人気があるテーマは業界問わず汎用性があるので合わせて検討しましょう。

• 有料テーマのインストール方法がわかる

有料テーマのインストール方法は2種類で、「Buy theme」で直接生データを購入するか、「Try theme」からカスタマイズしたデータを購入することができます。

• 有料テーマを使う時に気をつけるべきポイントを知れる

使用テーマによっては、日本語の翻訳ファイルが入っていないため「translation missing: ja.[id]」と表示されてしまいます。その場合は管理画面から翻訳を行いましょう。

よくある質問

ご不明点・サイト構築のご相談などありましたらお気軽に連絡ください！

お問い合わせはこちら！

ビジネスを開始し、成長させて、拡大する – Shopify

オンラインビジネスや小売ビジネスを自分の思い通りに構築できます。どこでも販売でき、いつでもサポートが受けられます。初日でも1,000日目でも、Shopifyがすべてをカバ…

www.shopify.jp