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

投稿日 2020年12月28日
更新日 2021年9月7日
著者 hiro
カテゴリー Shopify

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

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

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

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

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

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

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

ECプラットフォームshopifyでサイトを作るとフッター部分に「Powered by Shopify」が表示されますが、これを消す方法はこちら。https://t.co/zXULzuVi5V

shopifyはまだまだ日本語の情報が少ないため、情報収集中・・・。 pic.twitter.com/l8NgUcSM3s
— hiro@大阪のフリーランス (@hiro_267123) May 13, 2020

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

Powered by Shopifyの表示を消す方法

管理画面から消す（簡単）

liquidコードを編集して消す

cssでdisplay: none;にして消す

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

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

PC時の位置はこちら。

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

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

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

ストアから「Powered by Shopify」を削除する >

関連記事：Shopifyの無料テーマDebut（デビュー）を実際に使ってみた感想 >

管理画面から消す（簡単）

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

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

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

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

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

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

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

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

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

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

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

Shopify公式ヘルプ – テーマの翻訳 >

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でのサイト構築を学ぶおすすめの方法

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

デイトラで学ぶ

デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「ShopifyEC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。