【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とは?」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。

私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。

shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。

ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。

今回紹介したのは、両方とも日本語の教材です。

内容も初心者向けなので、

これからshopifyに関わってみたい!

shopify一通り分かっているけれど、抜けてる部分がないか確認したい!

といった方にはとてもおすすめです。

まとめ

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

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

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

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

この記事を書いた人

hiro

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

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