Tenoraのインストールと設定
このページでは、Tenoraをストアに追加し、プリセットを選び、テーマをカスタマイズして公開する方法を説明します。あとからテーマをアップデートする方法も紹介します。
始める前に
- Shopifyストアと、テーマを管理する権限が必要です。
- テーマを追加しても、公開中のストアは変わりません。Tenoraを公開するまでは、現在のテーマが公開されたままです。
- Tenoraは購入前に無料で試せます。料金はテーマを公開するときに支払います。
テーマストアからテーマを追加する
- ShopifyテーマストアでTenoraのページを開きます。
- 最初に使うプリセットをTenora、Terrace、Lanternから選びます。プリセットごとにデモストアがあるので、事前に確認できます。
- テーマを公開せずにストアに追加する場合はテーマを試す(Try theme)を、すぐに購入する場合はテーマを購入(Buy theme)を選択します。
- Tenoraがオンラインストア → テーマのテーマライブラリに追加されます。
プリセットを選ぶ
販売する商品に最も近いプリセットを選びます。色、フォント、その他の設定はすべてあとから変更できるため、プリセットはあくまで出発点です。
| プリセット | こんな商品を販売している場合に |
|---|---|
| Tenora | 家庭用家具:ソファ、テーブル、ベッド、収納家具 |
| Terrace | アウトドア・ガーデン家具 |
| Lantern | 照明、ランプ、インテリア雑貨(ダークなギャラリー風の見た目) |
テーマをプレビューする
- オンラインストア → テーマに移動します。
- テーマライブラリでTenoraを見つけます。
- ...(アクション)ボタンを選択し、プレビューを選択します。
- ホームページ、コレクション、商品ページ、カートを確認します。パソコンだけでなく、スマートフォンでもストアを確認してください。

テーマをカスタマイズする
- オンラインストア → テーマに移動します。
- Tenoraのテーマカードでカスタマイズを選択します。テーマエディターが開きます。
- エディター上部のページセレクターで、編集したいページを開きます。例:ホームページ、商品 → デフォルトの商品。
- 左側のサイドバーでセクションまたはブロックを選択し、設定を変更します。
- 色、フォント、ボタンなどのグローバル設定を変更するには、テーマ設定(歯車アイコン)を選択します。テーマ設定をご覧ください。
- 完了したら保存を選択します。
おすすめの手順は次のとおりです。
- テーマ設定 → ロゴとファビコンで、ロゴとファビコンをアップロードします。
- テーマ設定 → 色で、色を確認します。
- ヘッダーセクションでメインメニューを設定します。メインメニュー設定では、デフォルトでハンドルが
main-menuのメニューが使われます。 - ホームページの画像、テキスト、商品を自社のものに置き換えます。
- 家具向け機能のために商品データを準備します。メタフィールドとメタオブジェクトの設定をご覧ください。
テーマを公開する
- オンラインストア → テーマに移動します。
- テーマライブラリでTenoraを見つけます。
- ...(アクション)ボタンを選択し、公開するを選択します。
- 確認します。これでTenoraが公開中のテーマになります。
テーマを試すを使った場合は、公開する前にテーマの購入を求められます。
プリセットで変わる設定
プリセットは、グローバルなテーマ設定を決めます。また、テーマを追加したときのホームページ、ヘッダー、フッターのコンテンツも決まります。
| 設定 | Tenora | Terrace | Lantern |
|---|---|---|---|
| 色 | 温かみのあるオフホワイト、ダークブラウンの文字、木目調ブラウンのアクセント | 淡いストーン、ダークグリーンの文字、モスグリーンのアクセント、テラコッタの配色 | ほぼ黒の背景、明るい文字、真鍮色のアクセント |
| 見出しのフォント | Cormorant | Fraunces | Bodoni Moda |
| 本文のフォント | Instrument Sans | Work Sans | Manrope |
| 粒子テクスチャ | オン | オン | オフ |
| ページの幅 | 標準(1440px) | 標準(1440px) | 広い(1680px) |
| セクションの間隔 | 標準 | 標準 | ゆったり |
| グリッドの間隔 | 24px | 20px | 32px |
| ボタンの角の丸み | 0px | 24px | 0px |
| ボタンの大文字表記 | 大文字 | デフォルト | 大文字 |
| 入力欄の角の丸み | 0px | 8px | 0px |
| カードのスタイル | スウォッチ | 標準 | フレーム |
| カードの画像の比率 | 縦長 | 正方形 | 正方形 |
| カードの角の丸み | 0px | 8px | 0px |
各プリセットのホームページは、同じセクションを異なる順序と内容で使っています。3つのホームページすべてに、画像バナー、おすすめコレクション、コレクションリスト、おすすめ商品、お部屋から選ぶ、テキスト付き画像、お客様の声、ブログ記事、メール登録のセクションが含まれています。
その他の設定(カート、検索、通貨形式、ロゴの幅、本文のフォントサイズ)は、すべてのプリセットで同じです。
インストール後にスタイルを変更する
テーマエディターのテーマ設定では、各プリセットのテーマスタイルを表示できます。別のスタイルを選ぶと、色やフォントなどのグローバル設定が変わります。ホームページのコンテンツ、ヘッダー、フッターは置き換わりません。
別のプリセットのホームページを使いたい場合は、そのプリセットでテーマストアからTenoraをもう一度追加します。別のテーマとしてテーマライブラリに追加されます。
テーマをアップデートする
修正や改善を含むアップデートを随時リリースしています。テーマのバージョンはテーマライブラリに表示されます。
- アップデートが利用可能になると、オンラインストア → テーマのテーマカードにお知らせが表示されます。
- テーマカードでアップデートのオプションを選択します。
- アップデート版が新しいテーマとしてテーマライブラリに追加されます。テーマ設定とコンテンツはそのテーマにコピーされます。
- アップデート版をプレビューし、主要なページを確認します。
- 準備ができたら、アップデート版を公開します。
注: ご自身または開発者がテーマコードに加えた変更は、アップデート版にはコピーされません。もう一度同じ変更を加えられるよう、コードの変更内容を記録しておいてください。カスタムコードは、設定として保存されるカスタムLiquidセクションやブロックに入れることをおすすめします。