【Shopify】Powered by Shopifyの表示を消す方法

powerd by shopify

Shopifyで作ったサイトのフッターに「powered by Shopify」と表示される。これの消し方を教えて欲しい

こんなことを考えている方へ。

この記事のポイントは以下です。

開発元表記「powered by Shopify」の消し方

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。

先日こんなツイートをしました。

この記事では上記のツイートを掘り下げます。

Powered by Shopifyの表示を消す方法

Powered by Shopifyの表示を消す方法は3つです。

管理画面から消す(簡単)
liquidコードを編集して消す
cssでdisplay: none;にして消す


特別な理由がない限り、①の管理画面から消すことをおすすめします。

Powered by Shopifyの表示の表示場所はテーマによって異なります。

Debutの場合は以下の場所です。

PC時の位置はこちら。

powerd by shopify

スマホ時の位置はこちら。

powerd by shopify

隣に表示されている「test-cgvhjbk」の部分には自分のサイトの名前が入ります。

Shopifyの公式ヘルプに「Powered by Shopify」の消し方がマニュアル化されています。ただ、画像もなく分かり辛いです。本記事で詳しく解説します。

管理画面から消す(簡単)

Powered by Shopifyの表示を管理画面から消す方法を紹介します。この方法ならノーコードで編集可能です。

Shopifyにログイン後「オンラインストア」をクリックします。

powerd by shopify

「アクション」から「言語を編集する」を選択します。

powerd by shopify

絞り込み用の検索窓があるので、そこに「Powered by Shopify」と入力します。

powerd by shopify

以下の項目がヒットするはずです。

powerd by shopify

右半分のエリアに半角スペースを入れます。

powerd by shopify

画面右上にある「保存」を押します。

powerd by shopify

「Translations updated」と表示されれば更新完了です。

powerd by shopify

サイトをプレビューして、ちゃんと変わっているかを確認します。「Powered by Shopify」が消えていれば作業完了です。

powerd by shopify

ちなみに、この「言語を編集する」画面は、サイトの日本語表記を調整する際に使用します。

有料テーマの中には、そのまま使用すると日本語訳がおかしいものが結構あります。たとえば、コンタクトフォームの「Submit」の日本語訳が「提出する」になっていたり。

そういったおかしな翻訳を修正する際に使用します。

liquidコードを編集して消す

liquidのコードを編集してPowered by Shopifyの表示を管理画面から消す方法を紹介します。

特に理由がなければこの方法ではなく、前述の管理画面からの編集をおすすめします。

手順を解説します。

まず、万が一に備えてコードをいじる前にバックアップを取ります。管理画面 > オンラインストア > アクション > 複製する を選択します。

powerd by shopify

すると、現在使用しているテーマの中身がコピーされます。

powerd by shopify

コピーしたら名前を変更します。別に変えなくてもいいのですが、私は「いつコピーしたものか?」を管理するために名前を変えています。

powerd by shopify

「yyyymmddまで_“テーマ名”」とかに変えます。

powerd by shopify

テーマの複製が完了しました。

powerd by shopify

いよいよコードを編集します。アクション > コードを編集する を押下します。

powerd by shopify

コードエディターが開きます。テーマによって異なりますが「Powered by Shopify」に関係するコードはfooterファイルに掲載されていることがほとんどです。

今回は無料テーマDebutを例に取ります。

左にあるフォルダ・ファイル一覧の中から、Sectionフォルダを見つけます。

powerd by shopify

その中にあるfooter.liquidを開きます。

powerd by shopify

「Powered by Shopify」の記述は {{ powered_by_link }} という記述で出力されています。Ctl + F キーでコード内に検索をかけて記載箇所を探します。

Debutでは3ヶ所あります。3つもあるのはif分岐でフッターの出力レイアウトが分かれているためです。

powerd by shopify

当該コードは以下です。

{{ 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>
powerd by shopify

3ヶ所とも変えた状態は以下。

powerd by shopify

編集が完了したら保存します。

powerd by shopify

これで完了です。

プレビューで確認すると確かに消えています。

powerd by shopify

ちなみにですが、もしも万が一コードの編集を誤ってしまって、

やばい・・・元に戻せない

となっても大丈夫です。

ファイルの「旧バージョン」を押下します。

powerd by shopify

過去の編集バージョンが表示されるので「Original」を選択すれば、最初のバージョンに戻せます。

powerd by shopify

cssでdisplay: none;にする

cssを編集してPowered by Shopifyの表示を管理画面から消す方法を紹介します。

特に理由がなければこの方法ではなく、前述の管理画面からの編集をおすすめします。

手順を解説します。

まず、ブラウザの検証モードなどで「Powered by Shopify」に該当する箇所のクラス名を調べます。

powerd 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」というファイルです。

powerd by shopify

このファイルの中に追記をします。

/*開発元表記を消す*/
.site-footer__copyright-content-powered-by{
 display: none;
}
powerd by shopify

今回はファイルの最終行に追記する形を取りましたが、案件ではカスタマイズ用のcss(もしくはscss)ファイルを別に作成して、読み込ませることが多いです。

既存のcssに書き足してもいいのですが、「既存」と「カスタマイズ」の記述を分けた方が分かりやすいので、私は分けています。

最後にプレビューで確認します。

display: none; が効いて「Powered by Shopify」が消えていることがわかります。これで完了です。

powerd by shopify

Shopifyでのサイト構築を学ぶおすすめの方法

Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。

  • オンラインスクールで学ぶ

TechAcademy(テックアカデミー)に、専属のパーソナルメンターがマンツーマンでサポートする「Shopifyコース」が誕生しました。
安い買い物ではないので、TechAcdemyの講座を無料体験で試してみるのがおすすめです。

  • 本で学ぶ

商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは?という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。

  • 動画で学ぶ

Udemyの「Shopifyでクライアントのストアを作る人のための講座 」がオススメです! 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。

【Udemyがセール中(2021年7月30日(金)まで)】
対象コースが ¥1,730から。
2021年7月30日(金)まで!【Udemy】セール中のShopifyの講座一覧を見る >>

まとめ

この記事のポイントをまとめます。

「Powered by Shopify」の表記を消す方法は以下の3つです。特別な理由がない限り、管理画面から消すことをおすすめします。

管理画面から消す(簡単)
liquidコードを消す
cssでdisplay: none;にする

今回の記事はここまです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。