catch-img

【図解・Shopify(ショッピファイ)基礎編】ページデザインの編集方法を解説。テーマのインストール~設定・編集


目次[非表示]

  1. 1.テーマを選択
  2. 2.Shopifyテーマのインストール
  3. 3.ShopifyのTOPページを作成する方法
  4. 4.TOPページのデザインを編集する方法
  5. 5.セクションに要素を追加しよう
  6. 6.各セクションを編集する
  7. 7.テーマの設定をしよう
  8. 8.テーマの設定を行う


Shopify(ショッピファイ)の始め方~基礎編dya3~

この記事ではShopifyテーマの設定・変更方法やデザインを編集する基本的な方法を初心者向けに解説いたします。



テーマを選択

無料のテーマDebutとMinimalの2種類


Shopify(ショッピファイ)ではTOPページや商品ページのデザインは
「テーマ」と呼ばれるテンプレートを主に活用して制作していきます。
テーマを切り替える事で簡単にTOPや商品詳細ページのデザインを変更する事が出来ます。

このセクションからは、メインデザインであるテーマの設定を行っていきます。
今回は家具の専門店を作成していきます。(今回はMinimalを利用します)
まずはテーマの設定から行っていきましょう。


Shopifyテーマのインストール

Shopifyのテーマはデザインや特徴も様々なので、
クライアント様のイメージに合ったものを選びましょう。

使用メニュー オンラインストア>テーマ


オンラインストア → テーマ
の中から「無料のテーマを探す」を選択します


無料テーマの中からMinimalを選択します


テーマライブラリーに追加する」を選択します


追加したテーマの「アクション」から「公開する」を選択します


確認画面で「公開する」を選択する事で追加したテーマに入れ替える事が出来ます



ShopifyのTOPページを作成する方法


続いてTOPページの編集に入っていきます。
Shopifyではそのテーマのデザインに最適な「セクション」のテンプレートが
既に作成されており、セクションを配置する事でレイアウトを編集する事が出来ます。


TOPページのデザインを編集する方法

Shopifyのレイアウト変更は手軽に行えます。
セクションを活用しレイアウトを設定していきましょう。

使用メニュー オンラインストア>テーマ>アクション


テーマの編集を行う前にバックアップ(複製)をしておきます。
テーマ → アクション → 複製する
を選択します。


複製されたテーマの名前を変更します。
テーマ → アクション→ 名前の変更
を選択します。
名前は「(テーマ名)_年月日」等にしておくと分かりやすいです。



名前を変更したテーマの
アクション → 公開する
を選択します。

確認画面で「公開する」を選択します。

これで複製したテーマに入れ替える事が出来ました。


テーマのカスタマイズを行っていきます。
現在のテーマ → カスタマイズ
を選択します。


テーマエディターの画面が表示されます。


①戻るボタン…管理画面に戻ります。
②ヘッダー、フッター…デフォルトでヘッダーとフッターが配置されています。
 表示項目は後述のメニューの作成で行います。
③セクション…この領域は「セクション」と呼ばれます。ページ内に自由に配置、
 追加、表示・非表示、削除が出来るので、メインレイアウトはここで作成します。
④セクションの追加…セクションを追加する際に使用します。
⑤テーマ設定…背景色やヘッダー、フッターカラー、文字色やフォントの変更を行えます。
⑥テーマアクション…コードや言語の編集を行えます。
⑦表示・非表示…目のマークを押すとセクションの表示・非表示の切り替えが出来ます。
⑧場所移動…クリックしたままカーソルを動かすと好きな位置にセクションを移動出来ます。


セクションを編集してベースとなるレイアウトを作ります。
まずは現在配置されているセクションを一旦削除します。
削除するセクションを選択して下さい。


セクションを選択すると編集画面に推移します。
右上の…ボタンを選択し「セクションを削除する」を選択して
セクションを削除して下さい。

全てのセクションが削除出来たら次のスライドに移動して下さい。
※ヘッダー、フッターは削除出来ません。


デモページに沿ってレイアウトを作っていきます。
以下の指定通り、セクションを並べましょう。

①スライドショー…画像コンテンツ内から選択します
②特集コレクション…コレクションコンテンツ内から選択します
③コレクションリスト…コレクションコンテンツ内から選択します
④テキスト付き画像…画像コンテンツ内から選択します
⑤テキスト付き画像…画像コンテンツ内から選択します
 ※画像の位置の入れ替えは各セクションの設定項目で解説します

⑥ブログ記事…ブログコンテンツ内から選択します
⑦ビデオ…ビデオコンテンツ内から選択します
⑧おすすめ商品…商品についてコンテンツ内から選択します
⑨マップ…ストア情報コンテンツ内から選択します


これで全てのセクションの配置が完了しました。
必ず右上の「保存する」をしておきましょう。


セクションに要素を追加しよう

TOPレイアウトの大枠が完成した所で、各セクションに要素を追加したり、
カラーを調整したりしてサイトの見た目を整えていきます。
細かい設定も多く大変ですが、大切な部分です。


各セクションを編集する


ページ全体のセクションの編集を行います。

使用メニュー オンラインストア>テーマ>カスタマイズ

※テーマの編集を行う前にバックアップ(複製)をしておきましょう。


ヘッダーの編集から行っていきます。


テーマエディターの画面からヘッダーを選択して下さい。

①ロゴ…サイトロゴをアップします。
 ファイル名:trans_logo1.jpeg
②ロゴのサイズ…ロゴのサイズを160ピクセルに変更します。
③レイアウト調整…以下の項目にチェックを入れます。
・ロゴの下のメインメニューを中央寄せする
・ロゴを左寄せする
・ヘッダーに分割線を表示する
④告知バー…キャンペーンや重要情報などをヘッダーで告知する為のエリアです。
 今回は使用しないのでチェックを外します。

これでヘッダーの設定は完了です。


スライドショーの編集をしていきます。



①コンテンツ…編集したいスライドを選択します。選択すると右の画面に推移します。
②画像のアップ…表示したい画像をアップし、表示位置の調整を行います。
 1枚目:pixta_3195485_M.jpg・・・中央下
 2枚目:pixta_16544683_M.jpg・・・中央下
 3枚目:pixta_21452235_M.jpg・・・中央部左側
 4枚目:pixta_21911790_M.jpg・・・中心
③オーバーレイ不透明率…オーバーレイ時の不透明率を設定します。
 不透明率・・・0%
④テキスト…画像の上に表示させるテキストや画像選択時のリンクの設定を行います。
 今回は使用しないので全て空欄にして下さい。
⑤スライドの高さ…スライドショー全体の高さを指定します。
 今回は「大」で設定を行います。
⑥スライドの自動切り替え…スライドを自動で切り替えるかどうかの設定を行います。
 自動でスライダーが流れるようにしたいのでチェックをして下さい。

これでスライドショーの設定は完了です。


特集コレクションの編集をしていきます。


①見出し…コレクション上部の見出しを記述します。
 見出し:New Items
②コレクションの指定
 このエリアに表示したいアイテムを内包するコレクションを指定します。
 「変更」を選択すると次の画面に推移します。
③コレクションの選択…作成したコレクションの一覧が表示されます。
 今回は「テーブルウェア」を選び、右下の「選択」を押して下さい。
④表示数…1行の表示商品数と何行表示するかを設定します。
 今回の設定は「行あたりの商品数:4」「行:1」
⑤販売元情報の表示…商品登録時に設定した販売元の表示・非表示を切り替えます。
 今回は「表示する」にします。

これで特集コレクションの設定は完了です。


コレクションリストの編集をしていきます。


①コンテンツ…どのコレクションを表示させるかを設定します。
 選択すると次の画面に推移します。
②コレクションの選択
 「コレクションを選択する」を選択すると次の画面に推移します。
 先程の特集コレクションの時と同じようにコレクションを選びます。
③表示するコレクションの指定
今回は
インテリア テーブルウェア プレート、お皿
の3つのコレクションを表示させたいので各々選択して下さい。
選択したら右下の「選択」を押して下さい。
④見出し…コレクション上部の見出しを記述します。
 見出し:Pick Up Collection

これでコレクションリストの設定は完了です。


テキスト付き画像の編集をしていきます。



同じセクションなので一緒に解説します。


①画像…表示させたい画像を選択します。
 上:pixta_28094238_M.jpg
 下:pixta_41006409_M.jpg
②画像アラインメント…選択した画像を左右どちらに表示させるかを選べます。
 上側に表示させるコンテンツの方は「左」
 下側に表示させるコンテンツの方は「右」
③見出し…見出しテキストを記述します。
 上側:フィットする暮らし、つくろう
 下側:自分にフィットするものを捜し、それに出会う
④テキスト…表示するテキストを記述します。
 (下記の記載テキストを記述して下さい)
---------
上側テキスト
Transcosmosは、オーダーメイドなライフスタイルを求めるお客様を、
様々なWEBサービスの提供を通して、お手伝いすることを目的に設立されました。

私たちは、人生が自分用にあつらえられたかのように、「フィットしている」と
感じられる事こそ、本当の意味で豊かで幸せなことだと考えています。

下側テキスト
その過程で誰かと比較する必要も無い、自分用のフィットする暮し方をつくって行く。

そうやって多くの人々が、自分の人生をお気に入りの着心地抜群のシャツのように
感じるようになったなら、自由で、多様で、寛容で、ハッピーな世の中に
なるんじゃないか。そんなことを夢見ています。
---------

これでテキスト付き画像の設定は完了です。


ブログ記事の編集をしていきます。


①見出し…TOPページに表示されるタイトルを入力します。
 今回は新着記事を主に表示させたいので「News」とします。
②表示記事…表示させたいブログのカテゴリーを選択します。
 変更を選択し、次の画面で選びます。
③ブログを選択する…既に作成されているブログ記事のカテゴリーが
​​​​​​​表示されますので選択します。
 今回は「ニュース」を表示させたいので選択します。
 選択したら右下の「選択」を押して保存します。
④投稿…横一列に何個のブログ記事を表示させるかを設定します。
 今回は「4」にします。
⑤表示項目…サムネイルや記事へのリンクを設定します。今回は
 日付を表示する
 表紙画像を表示する
 「すべて表示」ボタンを表示する
 にチェックを入れて下さい。(それ以外の項目のチェックは外してください)

これでブログ記事の設定は完了です。


ビデオの編集をしていきます。


①見出し…タイトルの設定を行います。今回は空欄にして下さい。
②URL…ビデオのURLを貼り付けます。
 https://www.youtube.com/watch?v=QDuMgTI2Kj4

これでビデオの設定は完了です。


おすすめ商品の編集をしていきます。


①商品選択…表示したい商品を選択します。
 変更を選択すると次の画面で商品を選択することが出来ます。
②商品選択…表示したい商品を選択します。
 今回は「ハンドタオルセット」を選択して下さい。
 選択したら右下の「選択」を押して保存します。
③表示項目…商品ぺージの表示項目を選択します。今回は
 ・販売元を表示する
 ・数量セレクターを表示する
 ・画像のズーム「なし」
 ・ソーシャルメディアでの共有ボタンを表示する
 を選択して下さい。
④商品オプションのフォーム…動的チェックアウトボタン
 (=今すぐ購入ボタン)の表示・非表示を切り替えます。
 今回は表示したいのでチェックを付けて下さい。
⑤ボタンサイズ…数量セレクターやボタンなど、 表示されている
 項目の大きさを操作します。今回は「小」にして下さい。

これでおすすめ商品の設定は完了です。


マップの編集をしていきます。


①見出し…タイトルの設定を行います。
 今回は「ショールーム」と入力してください。
②住所と営業時間…住所や連絡先、営業時間の表示を行います。
 ---------
 〒150-0002
 東京都渋谷区渋谷3丁目25番18号
 03-4363-0270
 【営業時間】
 平日10:00~18:00
 土日祝日12:00~19:00
 ---------
③マップアドレス…Google Mapへのリンクを設定します。
 東京都渋谷区渋谷3丁目25番18号
④マップリンクラベル…マップへのリンクボタンのテキストを設定します。
 今回は「道順」で設定します。ピンの表示はチェックを入れて下さい。
⑤マップのAPIキー…設定が複雑なので割愛します。
⑥画像…表示する画像を設定します。
 ファイル名:pixta_39115104_M.jpg
⑦画像の位置…表示する画像のトリミング位置を設定します。
 今回は「中心」を選択して下さい。

これでマップの設定は完了です。


フッターの編集をしていきます。


今回は

・フッターメニュー ・ニュースレターの登録 ・ソーシャルアイコン
の3つを表示させます。
セクションの編集と同じ要領で場所を入れ替えたりしてください。

①フッターメニュー…フッターに表示するメインメニューを選択します。
 見出し:Service
 メニュー:フッターメニュー
②支払アイコン…利用可能な決済一覧の表示・非表示を設定します。
 今回は表示させたいのでチェックを入れて下さい。

これでフッターの設定は完了です。



テーマの設定をしよう

次に、サイト全体のカラーや文字の色などを細かく設定していきます。
Shopifyでは、特にCSSを編集する事無く設定が可能です。


テーマの設定を行う

ページの文字色や背景色の設定を行います。
デモページのと同じ見た目にする為に設定していきます。

使用メニュー オンラインストア>テーマ>カスタマイズ


カスタマイズ画面が出てきたら、
下部に有る「テーマ設定」を選択して下さい。


レイアウト」を選択し、「ワイドレイアウトを有効にする
にチェックを入れます。

これでワイド画面で見た際に、ページ内のコンテンツが
均等に配置されるようになります。


各部の色を設定します。




カラーコードは下記の通りです。
背景
トップバーの背景:#F7F7F7
本文の背景:#FFFFFF
フッターの背景:#F7F7F7
線と罫線:#F7F7F7
ボタン
ボタンとリンク:#F29702
ボタンテキスト:#F7F7F7
テキスト…全て#333333


ファビコンの設定を行います。


ファイル名:trans_logo1.jpeg


SNSの設定を行います。
ここで設定したSNSのアイコンがフッターに表示されます。

Twitter… https://twitter.com/transcosmosrnd
Facebook… https://www.facebook.com/transcosmos
Instagram… https://www.instagram.com/transcosmos_fuk/?hl=ja
Youtube… https://www.youtube.com/channel/UC0arTSNRU_3Lx-rlo22N63w



この記事のPDF版をダウンロードしたい場合はこちら

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア

トランスコスモスは日本で5社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopify構築によって得られた知見などをブログ記事にて発信していきます。

関連記事

【図解・Shopify(ショッピファイ)基礎編】ヘッダー・フッタのメニュー作成・編集方法を解説

Shopify(ショッピファイ)の始め方紹介。サイトにヘッダー・フィッタメニューを作成・編集する方法を解説します。

【図解・Shopify基礎編】いろいろなページの作成方法PageFlyの使い方を解説

Shopify(ショッピファイ)の始め方。ページビルダーアプリケーションを活用する事で、任意のページを好きにデザインする事が出来ます

【図解・Shopify基礎編】アプリのインストールと設定、liquidコード編集方法を解説

Shopify(ショッピファイ)の始め方。アプリケーションをインストール・設定して機能拡張する方法を解説

【図解・Shopify(ショッピファイ)基礎編】配送設定と決済テスト方法を解説

Shopify(ショッピファイ)の管理画面から配送・決済の設定方法と決済のテストを実施する方法を図解で紹介

全33件中 1〜 4件を表示


【無料】セミナー動画視聴

本セミナーでは、トランスコスモスのEC支援に対する豊富な実績をもとに今後の変革に必要と考えられる「CRM、データドリブン、生産性向上」をテーマとした当社コンサルティングサービスについて、講義形式のセミナー開催

【Shopify構築・運用セミナー】拡大するEC市場に不可欠なバックエンド業務の最新トレンド。EC事業を成功させるために『効率化に向けたバックエンド業務の最新トレンド』と題して、Shopify構築・運用に連携できるサービスをご紹介。

トランスコスモス主催のオンラインセミナー!EC事業を成功させるために『効率化に向けた最新テクノロジー』を丸紅情報システムズならびにグーグルクラウドジャパンをお招きしRPA,AI-OCRなど最新事例を交えてお伝えさせていただきます。

全11件中 1〜 3件を表示
お気軽に
お問い合わせください

Shopify(ショッピファイ) ECストア構築・運用代行

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」企業です

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

 【無料】資料ダウンロード

Shopify操作マニュアルのダウンロード一覧

ショッピファイの管理画面の使い方を図解で開設した操作マニュアル資料をPDFにてダウンロード頂けます。

ECサービス紹介資料無料ダウンロード一覧

トランスコスモスのEC関連のサービス資料の一覧ページです。PDFにて概要のわかる資料を「無料」でダウンロードして頂けます。

セミナー発表資料の無料ダウンロード一覧

トランスコスモスのEC関連のWEBセミナーで使用した資料一覧ページです。PDFにてセミナーの内容がわかる資料を「無料」でダウンロードして頂けます。

全3件中 1〜 3件を表示

Shopify認定パートナー企業

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください