hiro 
Shopifyで作ったサイトのフッターに「powered by Shopify」と表示される。これの消し方を教えて欲しい
こんなことを考えている方へ。
この記事のポイントは以下です。
開発元表記「powered by Shopify」の消し方
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
この記事では上記のツイートを掘り下げます。
Powered by Shopifyの表示を消す方法
Powered by Shopifyの表示を消す方法は３つです。
特別な理由がない限り、①の管理画面から消すことをおすすめします。
Powered by Shopifyの表示の表示場所はテーマによって異なります。
Debutの場合は以下の場所です。
PC時の位置はこちら。
スマホ時の位置はこちら。
隣に表示されている「test-cgvhjbk」の部分には自分のサイトの名前が入ります。
Shopifyの公式ヘルプに「Powered by Shopify」の消し方がマニュアル化されています。ただ、画像もなく分かり辛いです。本記事で詳しく解説します。
管理画面から消す（簡単）
Powered by Shopifyの表示を管理画面から消す方法を紹介します。この方法ならノーコードで編集可能です。
Shopifyにログイン後「オンラインストア」をクリックします。
「アクション」から「言語を編集する」を選択します。
絞り込み用の検索窓があるので、そこに「Powered by Shopify」と入力します。
以下の項目がヒットするはずです。
右半分のエリアに半角スペースを入れます。
画面右上にある「保存」を押します。
「Translations updated」と表示されれば更新完了です。
サイトをプレビューして、ちゃんと変わっているかを確認します。「Powered by Shopify」が消えていれば作業完了です。
ちなみに、この「言語を編集する」画面は、サイトの日本語表記を調整する際に使用します。
有料テーマの中には、そのまま使用すると日本語訳がおかしいものが結構あります。たとえば、コンタクトフォームの「Submit」の日本語訳が「提出する」になっていたり。
そういったおかしな翻訳を修正する際に使用します。
liquidコードを編集して消す
liquidのコードを編集してPowered by Shopifyの表示を管理画面から消す方法を紹介します。
特に理由がなければこの方法ではなく、前述の管理画面からの編集をおすすめします。
手順を解説します。
まず、万が一に備えてコードをいじる前にバックアップを取ります。管理画面 > オンラインストア > アクション > 複製する を選択します。
すると、現在使用しているテーマの中身がコピーされます。
コピーしたら名前を変更します。別に変えなくてもいいのですが、私は「いつコピーしたものか？」を管理するために名前を変えています。
「yyyymmddまで_“テーマ名”」とかに変えます。
テーマの複製が完了しました。
いよいよコードを編集します。アクション > コードを編集する を押下します。
コードエディターが開きます。テーマによって異なりますが「Powered by Shopify」に関係するコードはfooterファイルに掲載されていることがほとんどです。
今回は無料テーマDebutを例に取ります。
左にあるフォルダ・ファイル一覧の中から、Sectionフォルダを見つけます。
その中にあるfooter.liquidを開きます。
「Powered by Shopify」の記述は {{ powered_by_link }} という記述で出力されています。Ctl + F キーでコード内に検索をかけて記載箇所を探します。
Debutでは3ヶ所あります。3つもあるのはif分岐でフッターの出力レイアウトが分かれているためです。
当該コードは以下です。
{{ powered_by_link }}この記述をコメントアウトして無効化してあげればOKです。liquidでは{% comment %}と{% endcomment %}で挟んだ記述はコメントアウトされます。
{% comment %}
ここに無効化したい記述を挟む
{% endcomment %}というわけで、以下のように記述を変えます。
<small class=“site-footer__copyright-content site-footer__copyright-content—powered-by”>
{% comment %}
開発元表記を非表示に変更
{{ powered_by_link }}
{% endcomment %}
</small>
3ヶ所とも変えた状態は以下。
編集が完了したら保存します。
これで完了です。
プレビューで確認すると確かに消えています。
ちなみにですが、もしも万が一コードの編集を誤ってしまって、
やばい・・・元に戻せない
となっても大丈夫です。
ファイルの「旧バージョン」を押下します。
過去の編集バージョンが表示されるので「Original」を選択すれば、最初のバージョンに戻せます。
cssでdisplay: none;にする
cssを編集してPowered by Shopifyの表示を管理画面から消す方法を紹介します。
特に理由がなければこの方法ではなく、前述の管理画面からの編集をおすすめします。
手順を解説します。
まず、ブラウザの検証モードなどで「Powered by Shopify」に該当する箇所のクラス名を調べます。
無料テーマDebut（デビュー）の場合は「site-footer__copyright-content-powered-by」ですね。
これをdisplay: none;してあげればOKです。
ただ、指定するクラス名の吟味が必要です。今回のように複数のクラスがついている場合、誤って複数ページで使われている共通クラスをdisplay: none;すると、サイトが崩れます。
ちゃんと「Powered by Shopify」だけに該当するクラス名にスタイルを当ててあげることが大切です。
では、cssを編集します。
管理画面 > オンラインストア > アクション > コードの編集を開きます。「Assets」というフォルダの中にあるcssファイルを探します。
テーマによってcssだったりscssだったりします。Debutの場合は「theme.css」というファイルです。
このファイルの中に追記をします。
/*開発元表記を消す*/
.site-footer__copyright-content-powered-by{
display: none;
}
今回はファイルの最終行に追記する形を取りましたが、案件ではカスタマイズ用のcss（もしくはscss）ファイルを別に作成して、読み込ませることが多いです。
既存のcssに書き足してもいいのですが、「既存」と「カスタマイズ」の記述を分けた方が分かりやすいので、私は分けています。
最後にプレビューで確認します。
display: none; が効いて「Powered by Shopify」が消えていることがわかります。これで完了です。
Shopifyでのサイト構築を学ぶのにオススメな教材
- 本なら2020年の12月に発売された「商品売るならShopify 世界標準かつ最先端のECサイト構築入門
」がおすすめ！
私も買いましたが「shopifyとは？」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
- 動画ならUdemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！
私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。
ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。
今回紹介したのは、両方とも日本語の教材です。
内容も初心者向けなので、
これからshopifyに関わってみたい！
shopify一通り分かっているけれど、抜けてる部分がないか確認したい！
といった方にはとてもおすすめです。
まとめ
この記事のポイントをまとめます。
「Powered by Shopify」の表記を消す方法は以下の3つです。特別な理由がない限り、管理画面から消すことをおすすめします。
今回の記事はここまです。