こんにちは。中川瞬(@buppan_system)です。
この記事を読むことで、
- CSSを使ってサイトをカスタマイズする方法がわかる
- CSSのほかにHTMLも使用してカスタマイズする方法がわかる
- カスタマイズをした後に注意することがわかる
この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。
時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。
それでは、CSSを使ってカスタマイズする方法について解説をしていきます。
目次
Shopify上のテーマをCSSでカスタマイズする方法
Shopifyを利用するうえでテーマを使用し、サイトをCSSでカスタマイズする方法があります。
CSSを利用してカスタマイズする際の手順として
- テーマのバックアップをとる
- テーマの名前を変更
- コードを編集する
- Assets 以下に「style.css」という新しい css ファイルを追加する
- CSSを読み込ませる
- プレビューにて確認
このように、6つの工程を踏んでCSSでのカスタマイズが可能です。
それぞれについて詳しく解説します。
テーマのバックアップをとる
まず、設定する前に必ずバックアップをとります。
バックアップをとる理由として、CSSで編集したときに設定を間違えても、元の状態に戻せるようにするためです。
オンラインストアでは、最大20個のテーマが保存できます。
すでに20個のテーマがある場合はそれ以上のテーマを追加できないので、1つ削除してください。
削除をした後、CSSで編集できるものを新たに複製し用意します。
テーマのコピー方法は
- 好みのテーマを選択
- 管理画面上で「オンラインストア」をクリック
- 「テーマ」をクリック
- 複製するテーマで、「アクション」→「複製」の順にクリック
- 複製されたテーマは「複製したテーマ名のコピー」と表示されます。
上記の流れででき、コピーを作って下地が完成です。
テーマの名前を変更
テーマによっては、長いタイトルでややこしいものがあります。
後から整理整頓しやすいように、わかりやすい名前に変更しておきましょう。
おすすめの名前としては、作成した日にちと名前を入れておくことで、後から見直したときでも思い出しやすくなります。
名前の変更方法は、「カスタマイズ」→「名前の変更」で書換えが可能です。
コードを編集する
コードエディタにてファイルを編集する方法です。
先程テーマの名前を変更したファイルを選択すると、「テンプレートファイルを編集する」という画面が出てきます。
コードエディタでは、左側に「テーマファイルのディレクトリ」、右側に「ファイルを編集するスペース」が表示されます。
ディレクトリーは
- Theme
- Layout：サイトを訪問したときの最初のページ
- Templates：商品や404ページなど大枠の部分
- Sections：各ページのスライドショーやフッター、ヘッダー
- Snippets：アイコンやサイトナビゲーションなど細かいパーツ
- Assets
- Config
- Locales
に分かれており、それぞれのディレクトリーのCSS編集は「ファイルを編集するスペース」にて編集します。
ディレクトリーの6～8は視覚的要素に関するディレクトリーです。
6～8に関する記述方法や注意点を以下の2つの項目で説明します。
Assets 以下に「style.css」という新しい css ファイルを追加する
ディレクトリーの「Assets」に「新しいAssetsを追加する」をクリックし、新たにファイルを追加します。
項目で名前とあるので、そこに「style」と入力。
入力後「アセットを追加する」をクリックすることで、css ファイルが作成されます。
CSSを読み込ませる
上記のcssファイルを作成しても、このままではcssファイルは読み込まれないので、「theme.liquid」から反映させるようにしましょう。
ディレクトリーの「Layout」の中の「theme.liquid」を選択します。
「theme.liquid」のヘッド内に{{ ‘style.css’ | asset_url | stylesheet_tag }}と入力しますが、ここで1つ注意点があります。
通常のHTMLにcssファイルを読み込ませるときは「hoge.css」と入れますが、Shopifyでは「.css」の拡張子ではShopify上のファイルにアクセスできず、読み込みができません。
なぜならば、Shopifyでは「background: url({{ ‘line01.png’ | asset_url }})」のタグが使用できなくなるからです。
asset_url はassetフォルダーのことを指し、CSSや画像をassetフォルダーに入れます。
そのうえで、「hoge.css.liquid」のようにcss拡張子の後に「.liquid」をつけることで読み込みができます。
このことから、CSSや画像をassetフォルダーに入れた後、CSS拡張子の後に「.liquid」をつけることを忘れないでください。
プレビューにて確認
CSSで編集した後は、必ずプレビューにて確認作業をします。
確認方法は、テーマライブラリの「アクション」→「プレビュー」の順にクリックするとデモサイトが表示され、HTMLやCSSを確認できます。
記述の配列を確認し、間違いがないか確認したあとにプレビューで再確認しましょう。
確認内容は
• 画像の読み込み
• 文字の配列
• 画像の配置
の3つを確認し、公開した後にお客様に違和感がなく買い物ができるようにするための、最終確認を行いましょう。
HTMLでもカスタマイズできる
HTMLでのカスタマイズ方法を紹介します。
TOPページのオンラインストアから「テーマ」→「カスタマイズ」をクリックし、「セクションを追加」→「コンテンツをカスタムする」を追加。
「コンテンツをカスタムする」を追加することで、商品ページやブログ記事を追加して行えるようになります。
ワードプレスのビジュアルモードのように文章を書き、「<>」の部分をクリックするとHTMLの記述を確認できます。
また「<>」をクリックすることで、ワードプレスのテキストモードのようなHTMLで記述が可能です。
HTMLで記載することで、ほかのサイトとの差別化を図れるので、お客様が使いやすいサイトにしてみましょう。
テーマのアップデートは忘れないように！
テーマの更新を忘れてしまうと、エラーが出る可能性があります。
Shopifyではテーマを追加したときに、カスタマイズされていないものには自動的にアップデートする旨の記載がありました。
しかしこの記事では、コードの編集を行いカスタマイズしているため、手動でアップデートする必要があります。
手動でのアップデートの方法として、テーマストアで最新バージョンにアップデートが可能です。
このときに注意をしておかなければいけないことは、テーマのバックアップを必ず行うことです。
アップデートをしたことで、編集した内容が消えてしまう可能性があり、一から作り直す手間がかかるため、必ずテーマのバックアップをとってください。
ShopifyにあるサイトをCSSで編集するときは6つの手順をしっかりと踏むこと！
ShopifyのサイトをCSSで編集するときは6つの手順をとるようにしましょう。
手順として
- テーマのバックアップをとる
- テーマの名前を変更
- コードを編集する
- Assets 以下に「style.css」という新しい css ファイルを追加する
- CSSを読み込ませる
- プレビューにて確認
を行います。
慣れていない場合、CSSで編集すると間違いの1つや2つはつきものです。
しっかりとバックアップをとっておき、いつでもすぐに戻れるように準備しておいてください。
手順の5では、注意点が1つあります。
Shopifyでは「.css」の拡張子ではShopify上のファイルにアクセスできず、読み込みができないため、CSSや画像をassetフォルダーに入れ、「hoge.css.liquid」のようにcss拡張子の後に「.liquid」をつけることで読み込みが可能となります。
ほかのサイトとの差別化を図るためにも、CSSやHTMLで装飾することは大切です。
しかし、もとのデータが表示されなくなるといったトラブルを防ぐためにも、バックアップは必ず行い、アップデートも手動で必ず行うように意識してください。
物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、下の記事ぜひ読んでください。
