Shopifyのカスタマイズとは？初心者向けに簡単解説！

ShopifyでECストアの運営を開始された方の中には、ストアのデザインや機能など、カスタマイズを行いたいが、どのように操作したら良いかわからないと悩んでいる方もいるでしょう。
また、コードを編集せずにどこまでカスタマイズ可能なのか知りたいという方もいるのではないでしょうか。

そこで本記事では、Shopifyでカスタマイズを行なう方法をキャプチャ付きで詳しく解説しています。ここで紹介している方法を一通り理解しておけば、コード編集なしでも基本的なカスタマイズが可能です。

カスタマイズを外部に依頼した際の事例紹介や、カスタマイズを実際に行なう前の注意点についても触れているので、ぜひ最後までご覧ください。

何をカスタマイズできる？

Shopifyでは、プログラミングについての知識がなくても、ノーコードで基本的な機能をカスタマイズできます。カスタマイズが可能な箇所は以下の通りです。

• テーマ
• トップページ
• 商品ページ
• 購入ボタン
• SEOページ
• お問い合わせページ
• ストアに実装する機能

また、コード編集を行なうことで詳細な変更も可能です。カスタマイズによって、より作りこまれたECサイトを構築でき、ストアの雰囲気や世界観をよりダイレクトに反映することができます。

カスタマイズの重要性

ECサイトのテーマや機能をカスタマイズすることは、ストアの成長を左右する大切な要素でもあります。

ここでは、なぜカスタマイズが重要なのか、3つの観点から説明します。

ブランドの一貫性と個性の向上

カスタマイズすることにより、カラースキーム、フォント、ブランドメッセージなどストア運営者は自社のブランドに合わせた独自のデザインや機能を実装できます。

これにより、競合ストアとは異なる個性的なオンラインストアを構築でき、顧客に強い印象を与えることができます。カスタマイズによって、ブランドメッセージや視覚的アイデンティティを一貫して表現することに繋がります。

顧客体験の向上

カスタマイズは、商品ページのビジュアルや説明、ショッピングカートの使いやすさ、支払い手続きのスムーズさなど、顧客がストア内で商品を見つけやすく、シームレスな購買体験を得られるようにサポートします。これにより、売上の増加やリピート購入の増加を期待できるかもしれません。

効率的な運用と拡張性

カスタマイズには、特定のビジネスニーズに合わせた機能の追加やプロセスの最適化も含まれます。これにより、ストアの運用効率が向上し、作業の自動化や負担軽減が可能になります。また、将来的な成長に備えてストアを拡張できる柔軟性も備わっているため、新しい機能を追加して、ビジネスをスケーリングしやすくなるというメリットもあります。

これらの理由により、Shopifyのカスタマイズはビジネスの成功に向けた重要な手段となり、競争力を高めるのに役立ちます。

具体的な2つのカスタマイズ方法

カスタマイズ方法は、コード編集のあり・なしの大きく2つに分けられます。

1つ目は、「コード編集なしでカスタマイズする方法」です。この方法は、コードの知識がない方や、カスタマイズ初心者の方におすすめで、Shopifyの管理画面上で簡単に操作できます。

2つ目は、「コード編集ありでカスタマイズする方法」です。コードの編集を行なう場合、HTML・CSSに加えてLiquidというShopifyの独自言語を理解する必要があります。

この方法は、ある程度コードについての知識があり、細部にまでこだわったカスタマイズがしたい人におすすめです。独自のデザインや機能を追加することで、より魅力的なサイトを構築できます。

1.コーディングの知識なしの場合

ここでは初心者の方向けに、コード編集をせずにカスタマイズする方法を紹介します。ここで紹介する内容は、Shopifyを運営していく上での基本的な知識でもあるので、しっかりと理解しておくことをおすすめします。

テーマ

テーマのカスタマイズについて解説します。そもそもShopifyのテーマとは何かを知りたい方は、下記記事をご参照ください。

手順1：テーマの編集を行なう場合、Shopify管理画面から「オンラインストア」＞「テーマ」＞「カスタマイズ」の順にクリックします。

手順2：画面左側の「テーマ設定」ボタンをクリックします。

クリックすると、テーマの中で編集可能な項目が表示されます。レイアウトや配色、チェックアウトページに表示させたい画像の設定などはここから行えます。

トップページ

手順1：トップページの編集を行なう場合、Shopify管理画面から「オンラインストア」＞「テーマ」＞「カスタマイズ」の順にクリックします。表示される画面を「エディター画面」と呼びます。

このエディター画面から、トップページに表示される画像やコンテンツ、ボタンの位置を変更できます。

手順2：コンテンツを削除したい場合、各コンテンツ右側のゴミ箱ボタンをクリックすると、コンテンツが削除されます。

手順3：コンテンツを非表示にしたい場合、目のマークをクリックすることで表示非表示を選択できます。

手順4：コンテンツの配置を変更したい場合、一番右側のドットマークを押しながら操作することで並べ替えが可能です。

手順5：コレクションページを追加したい場合、「セクションを追加」を押すと、追加可能なセクションが表示されます。

手順6：追加したいセクション（今回は「お問い合わせフォーム」）を選択し、追加されたセクションの見出し文や中身の文章、サイズなどは、追加したセクションをクリックし、編集画面から設定可能です。

手順7：トップページの編集が完了したら、右上の「保存する」ボタンを押します。

商品ページ

次に紹介するのは、商品ページのカスタマイズ方法です。

手順1：まずは管理画面にログインし、「商品管理」＞編集したい商品をクリックします。

手順2：説明欄には、商品の特徴や、色、大きさ、保管方法などを記入します。他にも、こだわっているポイントなどがあればそれを書くことで他社との差別化にも繋がります。メディアはメインビジュアルとなる商品画像です。商品の第一印象を左右する重要な部分でもあるため、設定は必須です。

選択したテーマに商品レビュー機能がある場合、レビューの公開・非公開や、返信、削除などを管理できます。

購入ボタン

次に、購入ボタンの色や形をカスタマイズする方法を紹介します。このカスタマイズには、無料のShopifyアプリ「Buy Button channel」をインストールする必要があります。ダウンロードはここから行えます。

手順1：アプリをダウンロードしクリックすると、「購入ボタンを作成する」ボタンが表示されるのでクリックします。

手順2：商品ごとに購入ボタンを作成するか、コレクション全体の購入ボタンを作成するかを選択できるので、作成したい方をクリックします。今回は、「商品購入ボタン」をクリックした場合の画面です。

手順3：商品の選択ができるので、購入ボタンを作成したい商品をクリックし、右下の「選択」をクリックします。

手順4：画面左側で、ボタンの表示スタイルや、色などを変更できます。変更が完了したら、右上の「次へ」をクリックします。

手順5：「コードをコピーする」をクリックすると、自動でコードをコピーできます。

コードをコピーしたら、管理画面に戻ります。

手順6：「オンラインストア」＞「ブログ記事」＞「ブログ記事を追加する」の順で進めます。コンテンツ欄の右端「HTMLを表示する」をクリックします。

手順7：クリックしたら、先ほどコピーしたコードを貼り付けます。このブログは商品紹介ページにもなるため、画面右側の「組織」内の「ブログ」欄に商品ページであることがわかるような名前を付けます。また、タイトル欄には商品名を記入し、右上の「保存」をクリックします。

手順8：「オンラインストア」＞「テーマ」＞「カスタマイズ」をクリックし、先ほど作成したブログ記事をトップページに表示させます。

手順9：テンプレート欄にある「セクションを追加」＞「ブログ記事」を選択し、ブログ記事欄から「ブログを選択」をクリックします。

手順10：先ほど作成した商品ページのブログを選択すると、購入ボタンをカスタマイズしたページが表示されるので、「選択」をクリックします。

手順11：ここまでの設定が完了したら、右上にある「保存」をクリックします。

SEOページ

管理画面から、「商品管理」＞編集する商品名をクリックします。

Shopifyの商品ページの検索結果内の「編集」から、ページタイトル、メタディスクリプション、URLハンドル、画像のaltタグ（代替テキスト）を入力することで、SEO対策ができます。

手順1：ページタイトルは、検索時にメインで表示されるものであるため、簡潔かつ分かりやすい文言を入力します。

手順2：メタディスクリプションは、ページの内容を100文字程度で要約した文章を入力します。ここに入力する文章は、そのページがユーザーにとってどのようなメリットをもたらすかを意識して書きましょう。

手順3：URLハンドルとは、そのページのURLです。設定しなかった場合、自動でURLが作成されますが、長くなりすぎたり、意味を持たないURLになったりしてしまいます。そのため、何のURLなのかを示すためにも、ページタイトルと関連するようなワードを入力することをおすすめします。

手順4：画像のaltタグ（代替テキスト）を設定するには、商品ページに設定してある画像をクリックします。

画像のaltタグ（代替テキスト）とは、その画像が何なのかを検索エンジンに伝えるためのテキスト情報です。また、この代替テキストに入力された内容は視覚障害者のための画像読み上げソフトで使用されるものでもあるため、記述しましょう。

手順5：「代替テキストを追加」と表示されるのでそこをクリックし、入力し「代替テキストを保存」を押します。

上記すべての情報を入力しておくことで、関連するキーワードで検索された場合の検索順位が上がりやすくなります。

お問い合わせページ

ユーザーが疑問を持った際にストア運営者に直接連絡できるのが、「お問い合わせページ」です。顧客体験を損なわないためにも、必ず設置しましょう。

手順1：「オンラインストア」＞「ページ」の順に進み、「ページを追加」をクリックします。

手順2：タイトルに「お問い合わせ」と入力し、オンラインストア欄のテーマテンプレートでは「contact」を選びます。コンテンツにはお問い合わせページに表示させる文言を入力し、保存ボタンをクリックします。

手順3：「オンラインストア」＞「メニュー」の順に進み、「フッターメニュー」または「メインメニュー」のどちらかを選択します。この際選択するのは、「お問い合わせ」ページを設置したい方で構いません。

手順4：ページ遷移先で、「メニュー項目を追加する」をクリックします。検索欄をクリックし、「ページ」＞「お問い合わせ」を選択します。

手順5：右下の「追加する」ボタンをクリックすると、メニューにページが追加されたことを確認できます。右下の「メニューを保存」を押せば、設定は完了です。

ストアに実装する機能

Shopifyには、Shopifyアプリ（プラグイン）と呼ばれるECサイトの機能を拡張できるツールがあります。無料のものから有料のものまで、8,000以上の種類があります。Shopifyのデフォルト機能よりもさらに機能性を高めたい場合、このShopifyアプリを活用することで、さまざまなカスタマイズが可能です。

集客促進ができるアプリや、注文管理ができるもの、送料をより細かく設定できるものなど、種類も豊富です。

2.コーディングの知識ありの場合

上記ではShopifyのカスタマイズにおいてコーディングなしで編集する方法を紹介しました。

ここでは、コードを自分で編集し、より細かくカスタマイズを行なう方法を紹介します。

テーマのカスタマイズ

Shopifyでは、管理画面上でテーマコードの編集ができます。

この際、HTMLやCSS、JavaScriptだけでなく、Shopifyの独自言語である「Liquid」を理解している必要があります。Liquidという言語は、他の言語で用いられる構文と似たような特徴があるため、マークアップ言語を理解している方であれば、十分理解できるでしょう。

「Liquid」について詳しく知りたい方は、下記ブログも併せてご覧ください。

管理画面上でテーマのコードを編集するには、「オンラインストア」＞「テーマ」＞「・・・」＞「コードを編集」をクリックすると、コードを編集できる画面が表示されます。

カスタマイズを外部にお願いするなら

高度なカスタマイズを実施したいが、プログラミングの知識が無くすぐには実施できない、といった悩みを持つ方もいるでしょう。そのような場合、カスタマイズの外注が可能です。

外部にカスタマイズをお願いすれば、自分で試行錯誤する時間を短縮でき、かつクオリティの高いストアを構築できます。また、イメージや実現したいことを伝えることで、プロの目線からどうすればそれを実現できるかを一緒に考えてくれる企業もあります。そのため、ECストアの運営が初めての方にとって、心強い存在にもなります。

ここでは、Shopifyのカスタマイズを外注できるShopify Expertsを紹介します。

Shopify Expertsの紹介

Shopifyには、ECストア運営者の事業を支援する、Shopify公認のパートナー企業や個人事業主が存在しています。Shopifyパートナーは、テーマの開発やShopifyアプリの開発、ストア構築などを行なっています。

このShopifyパートナーの中で、厳しい審査を経てより優れた実績を認められているのが、Shopify Expertsです。多くのShopifyパートナーの中から公式に認められていることの証明でもあるため、信頼度も高く、安心してストア構築を依頼できます。

株式会社and.d

株式会社and.dは、Shopifyのストア構築だけでなくShopifyアプリの開発も手がけるShopify Expertsです。Shopifyに対する深い造詣と高い技術力を持っており、企画/提案からデザイン、Shopifyストア構築、Shopifyアプリ提供など多岐にわたる内容で支援します。

ここでは、Shopifyストア構築を行なった2つの事例を紹介します。

事例1：カキトカザイ

「カキトカザイ」は、山林にある季節の植物を職人とともにセレクトし、花器（カキ）をコンパクトに収納した創作型ギフトを作っている企業です。

定期的に植物を届けるプランや、ギフト用の品、植物への理解を深めるワークショップを実施しており、様々な目的をもったユーザーがページを訪れます。そのため、どのような方であっても、スムーズな購入体験ができるようなオンラインストアの構築に取り組みました。。

また、and.dの提供するShopifyアプリ「チケット&予約管理.amp」を活用し、定期販売やイベントチケット販売の仕組みの実装にも成功しました。

事例2：横浜FC

「横浜FC」は、地域に密着したクラブづくりを目指しているプロサッカークラブです。データをもとに、各ユーザーにパーソナライズされたオンラインストアの運営をするため、JリーグID*と連携したクラブチームに特化したオンラインストアの構築を行いました。
*Jリーグの各種サービスで利用できる共通の会員ID。、過去の観戦履歴やグッズの購入履歴なども紐づいています。

具体的には、Shopify Plusプランで利用できる「Multipass API」を活用し、JリーグIDと連携したカスタムアプリを構築。横浜FCのオンラインストアに「JリーグID」でログインができる仕組みを搭載しました。

その他にも、受注商品や限定品の購入個数制限機能の搭載や、特定期間のみ商品を販売できる機能など、クラブチームのオンラインストアの運営には欠かせない様々な機能を実装しています。

コマースメディア株式会社

コマースメディア株式会社は、日本で3社目のShopify Experts企業です。Shopifyのみならず、楽天市場やAmazonなどECモール店舗の運営実績も豊富で、ECサイト、モールの両方に強みを持っています。

事例：ちいかわマーケット

大人気キャラクター「ちいかわ」のECサイトには年々多くの人が訪れるようになり、従来利用していたシステムではトラフィックに耐えきれなくなりました。そこで、大量のユーザー訪問数にも耐えられるよう、Shopify Plusの導入を決めました。また、受注・在庫管理システムでは「LOGILESS」を導入します。

この2つの組み合わせによって、在庫・店舗・販売・出荷をシームレスに運用できるようになり、大量受注が発生しても現場で混乱が起きない環境構築に成功しました。

株式会社これから

株式会社これからは、ネットショップ自動集客ツールの開発や、ネットショップコンサルティング、ネットショップ制作など幅広いサービスを提供しているShopify Experts企業です。ネットショップ支援数は2,000社以上、制作後の広告運用やコンサルティングなどのアフターサービスも充実しています。

事例：Darich

株式会社YSMの運営するレディースアパレルアパレルブランド「Darich」。以前利用していたシステムのデザインの変更における制限が増えたため、デザインをより柔軟に変更できるシステムへの移行を検討しShopify Plus導入を決めました。

「Darich」の会員数は数万件に登るため、情報をすべてShopifyへ移行する作業は大変でしたが、最終的には希望通りのデザインや機能の搭載に成功しました。また、従来変更できなかった部分についてもカスタマイズできるようになり、満足度も向上したとのことです。

株式会社R6B

株式会社R6Bは、EC・Webサイト構築を完全紹介制で行なっているShopify Experts企業です。EC構築のみならず、InstagramやTikTokなどのSNS支援のほか、アプリ開発事業も手がけています。

事例：HERALBONY

岩手県発のアートライフスタイルブランド「HERALBONY」の公式オンラインストアのストア構築では、ヒートマップデータを参考にサイトの構成設計から機能実装までを行ないました。

購入者にとって便利な商品の絞り込み機能や、探している商品にたどりつきやすい導線を設計し、商品登録の設計を大幅に変更しました。

また、ブランドの世界観を反映させつつも購入体験の向上を両立させたデザインも作成し、最新のトレンドに合わせた機能実装も行なわれました。

カスタマイズする際の注意点

Shopifyのカスタマイズを実施する際、下記3点に注意が必要です。

• テーマの利用できるサポート
• バックアップの作成
• 画像アップロード

それぞれの注意事項を詳しく解説します。

テーマの利用できるサポートについて

テーマごとに利用できるサポートレベルが異なります。

無料のテーマを選択している場合、Shopifyからカスタマイズについてのサポートを最大60分まで受けることが可能で、60分を超えてしまった場合、Shopify Expertによる有料サポートを受けることができます。

有料のテーマを使用している場合、サポートレベルは開発者によって異なります。どのようなサポートが受けられるかは、サポートドキュメントを確認するか、開発者に問い合わせる必要があります。

バックアップの作成について

テーマをカスタマイズする前には、必ずバックアップを取るようにしましょう。バックアップを取っておけば、万が一カスタマイズ中に不備があり必要なデータが消えてしまったとしても、元に戻せます。

テーマのバックアップを取るには、「オンラインストア」＞「テーマ」＞「・・・」＞「テーマファイルをダウンロード」＞「メールを送信する」の順にクリックしていきます。届いたメールに記載されている「テーマのエクスポート」をクリックすると、zip形式でファイルがダウンロードされます。

また、商品情報のバックアップを取りたい場合、「商品管理」＞「エクスポートする」の順に選択します。エクスポートする内容とファイル形式を選択後「商品をエクスポートする」をクリックすると、CSV形式で情報のバックアップを取ることができます。

画像アップロードについて

カスタマイズに際し、画像のアップロードを行ないます。

Shopifyでサポートされていない形式やサイズの画像をアップロードした場合、正しく画像が表示されず作り直す手間が発生してしまいます。そのため、アップロード可能な画像のファイル形式とサイズを事前に確認しておくことが大切です。

アップロード可能なファイル形式は以下の通りです。

• PNG
• JPEG
• PSD
• TIFF
• BMP
• GIF
• SVG
• HEIC
• WebP

画像サイズについては、最大5000×5000ピクセル、または25メガピクセルまでのサイズがアップロード可能です。また、商品画像やコレクション画像のファイルサイズが20MB以上の場合、Shopifyには追加できないため注意が必要です。

まとめ

本記事では、Shopifyのカスタマイズについて詳しく紹介しました。Shopifyのカスタマイズは、コードの知識がない方でも自由に色やサイズの変更ができ、ストアの世界観を表現できます。コードの知識がある場合、より細かな変更も可能です。

カスタマイズを行なっていく中で、自社では実現が難しいことも出てくるかもしれません。その際は、Shopify Expertsなどに認定されている企業などへの依頼がおすすめです。丁寧なヒアリングをもとに、実現したい高度な機能やデザインを作成してもらうことが可能です。自社のECストアにはどのようなカスタマイズが必要か、どのような機能が欲しいかを考え、費用対効果を考慮した選択を行ないましょう。

ShopifyのECストア構築にお困りの方は、ぜひShopify ExpertsとしてECに対する深い造詣と高い技術力を持つand.dへぜひご相談ください。