How to Remove “Powered by Shopify” & Edit Shopify Footer

Jul 22, 2020

386 Dmitriy Parhomenko

How to Remove “Powered by Shopify” & Edit Shopify Footer

Want to make sure your customers can find any information they need? Footer is one of the most significant components as it serves for webstore navigation, contact information, valuable resources such as social links. Here, you will learn how to remove “Powered by Shopify” sign and edit it to meet any user’s needs. Footer can have a higher impact on users than any other part of a page. Let’s get started!

How to add logo to Shopify footer
How to change Shopify footer menu
How to Set up Shopify Newsletter
How to change Shopify payment icons
How to remove “Powered by Shopify”
How to add social media to Shopify

In the default theme, Shopify footer looks like this:

How to Remove Powered by Shopify & Edit Shopify Footer - shopify newsletter

After editing, it will look like this:

How to Remove Powered by Shopify newsletter

It’s important to note that any time you make changes in the files theme and visual editor, don’t forget to save the changes!

How to add logo to Shopify footer

Make a condition using liquid in the markup to display the logo image if it is attached or show the store name.

Go to edit a theme code and find the footer.liquid file in the Sections folder.

How-to-Remove-Powered-by-Shopify-newsletter-shopify-newslett

Line 140 must contain the following code <div class="page-width"> . Place the code after the line 140:


Now, let’s add a logo image via the admin panel in the footer section, and resize it using a range type.

To do this, find the {% schema %}{% endschema %} block and the beginning of the array settings JSON object at the bottom of the page, and place the following code:

gif shopify footer - how to remove powered by shopify

As it is a JSON object, keep an eye on the closing and opening brackets, commas, and quotation marks.


After that, the following settings will be displayed in the footer section of the admin panel:

shopify footer settings

Open the theme.scss.liquid file in the Assets folder and add custom styles at the bottom of the file:

how to remove powered by shopify from footer

Place the following styles:

How to change Shopify footer menu

To edit Shopify menu, open Quick links. There you can change the menu’s name and its links.

quick links edit shopify menu how to remove powered by shopify

Click on Add new menu items, and fill out the name and link for it.

edit shopify footer - edit shopify menu - how to remove powered by shopify from footer

Add styles for the menu:


Now, custom styles look as follows:

shopify custom styles how to remove powered by shopify from shopify footer

How to Set up Shopify Newsletter

To change the placeholder text, click on Edit language.

edit languages shopify newsletter configuration

Find the Newsletter form section and change the text.

how to remove powered by shopify from footer newsletter configuration

If you want to add a text above the subscription form, in the footer.liquid file find the Subscription form by class newsletter__input using the keyboard shortcut Ctrl + F and place the code above it.

<p class="newsletter__text">{{ 'general.newsletter_form.newsletter__text' | t }}</p>

how to edit footer on shopify newsletter configure

Then open the en.default.json language file on the way Edit code – Locales – en.default.json. In the search, find the newsletter_form object and insert the newsletter__text key into the text.

shopify newsletter form configuration

Now our field is displayed on the translation page in the Newsletter form section.

how to edit footer in shopify

You can also sign up newsletters this way for other language files.

How to change Shopify payment icons

Find the following code in the footer.liquid file:

{% for type in enabled_payment_types %}

Replace it with:


How to manage shopify payment icons

The payment providers that you include in this list will determine which payment icons display on your online store.

The values you can use are listed below:

  • american_express
  • apple_pay
  • bitcoin
  • dankort
  • diners_club
  • discover
  • dogecoin
  • dwolla
  • forbrugsforeningen
  • google_pay
  • ideal
  • jcb
  • klarna
  • klarna-pay-later
  • litecoin
  • maestro
  • master
  • paypal
  • shopify_pay
  • sofort
  • Visa

How to remove “Powered by Shopify”

Using a quick search, find all the places where with the text powered_by_link.

learn here how to remove powered by shopify

And delete all of these places:

remove powered by shopify

How to add social media to Shopify

Go to the Visual editor, select the footer section and add links to social networks in the theme settings. After adding, social icons will be displayed in the footer.

how to add social media to shopify all steps

Move the copyright to the center:

1. Find all the site-footer-items-align-right classes in the footer.liquid file and replace it with site-footer-items-align-center.

how to remove powered by shopify from footer in a few steps

2. Add a style for the class.


shopify footer - how to add social media to shopify

 

That’s all, your new footer is done! We hope that our article was useful for you, and helps you create the footer for your website. We tried to describe everything simple and in detail. However, if you need some advice, feel free to ask in the comments below!

Vlad Yunusov

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *