>> 【徹底解説】Shopifyを学ぶならデイトラがおすすめ

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

Powered by Shopifyの表示を消す カスタマイズ

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

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

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

フッターに自動で表示される「powered by Shopify」の消し方

Shopify飯店

Shopify飯店

 

スポンサーリンク

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

Powered by Shopifyの表示を消す方法は3つあります。

①管理画面から消す(ノーコードなのでおすすめ)
②Liquidコードを編集して消す(やや高度)
③CSSでdisplay: none;にして消す(おすすめしない)

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

②の場合はテーマファイルを開いてLiquidを編集しなければいけません。③もテーマファイルを開いてCSSを追記することになりますが、それなら②の方法で消せばいいです。

なお、Powered by Shopifyはフッターに表示されます。

となりに「MARCH ROAD」とありますが、これはストアネーム(お店の名前)です。デフォルトではこのように、お店の名前の隣に「Powered by Shopify」が表示されるようになっています。

 

①管理画面から「Powered by Shopify」を消す(ノーコードなのでおすすめ)

管理画面を操作して消す方法を解説します。この方法ならノーコードで消すことができます。公式も推奨している方法です。

公式ヘルプに動画もあります。

動画を見たらわかるのですが、作業方法を画像でも解説します。まずは、Shopifyにログイン後に、オンラインストアをクリックします。

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

これでOKです。

最後に、正しく変更できているかを確認します。まずは「オンラインストア」をクリックします。

画面の右上にある「ストアを見る」をクリックします。

ストアのフッターを見て「Powered by Shopify」がちゃんと消えていればOKです。

ちなみに、今回操作した「言語を編集する」の画面は、サイトの日本語表記を調整する際に使用します。有料テーマの中には、そのまま使用すると日本語訳がおかしいものが結構あるんです。

たとえば、コンタクトフォームの「Submit」の日本語訳が「提出する」になっていたり。そういったおかしな翻訳を修正する際にこの機能を使用します。

 

②Liquidコードを編集して「Powered by Shopify」を消す

Liquidコードを編集してPowered by Shopifyの表示を消す方法を紹介します。特に理由がなければこの方法ではなく、①の方法をおすすめします。

手順を解説します。

まず、万が一に備えてテーマファイルを編集前にバックアップを取ります。管理画面>オンラインストア>アクション>複製するを選択します。

【キャプチャが古いですがご了承ください】
この記事を書いている2022年8月時点でテーマDebutは存在しません。ただ、基本的な操作の流れは後継のDAWNもその他のテーマも同じです。

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

私はいつも「yyyymmddまで_サイト名」や「yyyymmddまで_テーマ名」にしています。今回は「20201212まで_Debut」としました。

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

では、コードを編集します。

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

Powered by Shopifyの表示を消す

すると、テーマファイル一式が表示されコードエディターが開きます。

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

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

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

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

「Powered by Shopify」の記述は、

{{ powered_by_link }}

というLiquidの記述で出力されています。Ctl + F キーでコード内に検索をかけて、{{ powered_by_link }} を探します。

Powered by Shopifyの表示を消す

テーマDebutでは3ヶ所ありました。なぜ3つもあるのかというと、if分岐でフッターの出力レイアウト(デザイン)が分かれているためです。

<small>タグごと消してもいいのですが、今回は {{ powered_by_link }} の部分のみを無効化してみます。

Liquidファイルでコードを無効化するには、{% comment %}と{% endcomment %}を使います。この開始タグと閉じタグに挟まれた箇所は、記述が無効化されます。

つまり、

{% comment %}
この間に書いた記述は無効化される。実案件では、カスタマイズのメモを残したり、不要な記述を無効化したりするときに使う。
{% endcomment %}

こんな感じです。

実際に変えた状態がこちらです。

<small class=“site-footer__copyright-content site-footer__copyright-content—powered-by”>
  {% comment %}
     開発元表記を非表示に変更
     {{ powered_by_link }}
  {% endcomment %}
</small>

Powered by Shopifyの表示を消す

3ヶ所とも同じように変えていきます。

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

これでLiquidの編集は完了です。

最後に、正しく変更できているかを確認します。まずは「オンラインストア」をクリックします。

画面の右上にある「ストアを見る」をクリックします。

ストアのフッターを見て「Powered by Shopify」がちゃんと消えていればOKです。

万が一、Liquidコードの編集を誤り、

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

となっても大丈夫です。

エディターの上にある「旧バージョン」を押下します。

Powered by Shopifyの表示を消す

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

Powered by Shopifyの表示を消す

 

③CSSでdisplay: none;にして「Powered by Shopify」を消す

CSSを編集して「Powered by Shopify」の表示を消す方法を紹介します。特に理由がなければこの方法ではなく、①の方法で消すのがおすすめです。

手順を解説します。

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

Powered by Shopifyの表示を消す

該当するコードは、

<small class=“site-footer__copyright-content site-footer__copyright-content—powered-by”>
  Powered by Shopify
</small>

ですね。

これで、「Powered by Shopify」のsmallタグのクラス名は「site-footer__copyright-content-powered-by」だとわかりました。

あとは、このクラス名を display: none; すればOKです。しかし、CSSをあてるクラス名には十分注意する必要があります。

今回は、

  • site-footer__copyright-content
  • site-footer__copyright-content—powered-by

という2つのクラスがついていました。

誤って「site-footer__copyright-content」の方を display: none; すると、「Powered by Shopify」以外の部分も消えて、サイトのデザインが崩れてしまいます。

では、CSSを編集します。

管理画面>オンラインストア>アクション>コードの編集 を開きます。「Assets」フォルダの中にあるCSSファイルを探します。

Debutの場合は「theme.css」というファイルです。

Powered by Shopifyの表示を消す

このファイルの一番下に、以下を記述します。

/*フッターの開発元表記を消す*/
.site-footer__copyright-content-powered-by{
  display: none;
}

Powered by Shopifyの表示を消す

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

既存のCSSを編集してもいいのですが、「既存」と「カスタマイズ」の記述を分けた方が分かりやすいので、私はファイルを分けています。

最後に、正しく変更できているかを確認します。まずは「オンラインストア」をクリックします。

画面の右上にある「ストアを見る」をクリックします。

ストアのフッターを見て「Powered by Shopify」がちゃんと消えていればOKです。

検証モードで確認すると、display: none; が効いて「Powered by Shopify」が消えていることがわかります。

Powered by Shopifyの表示を消す

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2022年最新】デイトラShopifyコースは買うべき?【レビュー】

デイトラShopifyコースは買うべきか?徹底レビュー【2022年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyで初めて買う場合はお得!】
初回購入ならShopifyの動画教材が安く買える!
Udemyはほとんど常に、初回購入者向けのセールを開催しています。通常1万〜2万円の商品が初回購入だと2,000円程度で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

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

Powered by Shopifyの表示を消す方法は3つあります。

①管理画面から消す(ノーコードなのでおすすめ)
②Liquidコードを編集して消す(やや高度)
③CSSでdisplay: none;にして消す(おすすめしない)

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

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

タイトルとURLをコピーしました