{"id":26437,"date":"2020-07-22T12:00:32","date_gmt":"2020-07-22T10:00:32","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=26437"},"modified":"2026-05-08T16:01:18","modified_gmt":"2026-05-08T14:01:18","slug":"edit-shopify-footer","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/edit-shopify-footer.html","title":{"rendered":"How to Edit Footer in Shopify and Remove \u201cPowered by Shopify\u201d in 2026"},"content":{"rendered":"\n

Shopify footer customization looks different in 2026. The reason behind this is that most themes now use Shopify OS 2.0 sections, app blocks, and the new theme editor instead of heavy code edits in footer.liquid.<\/p>\n

<\/p>\n

This guide shows how to update your footer with a custom logo, newsletter signup, payment icons, social links, and navigation menus while keeping your store fast and mobile-friendly. You’ll also learn how to remove the default “Powered by Shopify” text and replace it with custom branding that matches your store identity.<\/p>\n

How to add logo to Shopify footer
\n<\/a>How to change Shopify footer menu
\n<\/a>How to Set up Shopify Newsletter
\n<\/a>How to change Shopify payment icons
\n<\/a>How to remove “Powered by Shopify”
\n<\/a>How to add social media to Shopify<\/a><\/p>\n

In the default theme, the Shopify footer looks like this:<\/p>\n

\"How<\/a><\/p>\n

After editing, it will look like this:<\/p>\n

\"How<\/a><\/p>\n

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!<\/strong><\/p>\n

How to add logo to Shopify footer<\/h2>\n

Make a condition using liquid in the markup to display the logo image if it is attached, or show the store name.<\/p>\n

Go to edit a theme code and find the footer.liquid <\/strong>file in the Sections<\/strong> folder.<\/p>\n

\"How-to-Remove-Powered-by-Shopify-newsletter-shopify-newslett\"<\/a><\/p>\n

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

<div class=\"site-footer__logo\">\r\n   \t\t{% if request.page_type == 'index' %}\r\n          <h1 class=\"h2\">\r\n        {% else %}\r\n          <div class=\"h2\">\r\n        {% endif %}\r\n          {% if section.settings.logo %}\r\n            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}\r\n            <a href=\"{{ routes.root_url }}\" class=\"site-footer__logo-image\">\r\n              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}\r\n              <img class=\"lazyload js\"\r\n                   src=\"{{ section.settings.logo | img_url: '300x300' }}\"\r\n                   data-src=\"{{ img_url }}\"\r\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\r\n                   data-aspectratio=\"{{ section.settings.logo.aspect_ratio }}\"\r\n                   data-sizes=\"auto\"\r\n                   alt=\"{{ logo_alt | escape }}\"\r\n                   style=\"max-width: {{ section.settings.logo_max_width }}px\">\r\n              <noscript>\r\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\r\n                <img src=\"{{ section.settings.logo | img_url: image_size }}\"\r\n                     srcset=\"{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x\"\r\n                     alt=\"{{ section.settings.logo.alt | default: shop.name }}\"\r\n                     style=\"max-width: {{ section.settings.logo_max_width }}px;\">\r\n              <\/noscript>\r\n            <\/a>\r\n          {% else %}\r\n            <a class=\"site-footer__logo-link\" href=\"{{ routes.root_url }}\">{{ shop.name }}<\/a>\r\n          {% endif %}\r\n        {% if request.page_type == 'index' %}\r\n          <\/h1>\r\n        {% else %}\r\n          <\/div>\r\n        {% endif %}\r\n    <\/div><\/pre>\n
Now, let’s add a logo image via the admin panel in the footer section, and resize it using a range type.<\/p>\n
To do this, find the {% schema %}{% endschema %}<\/code> block and the beginning of the array settings JSON object at the bottom of the page, and place the following code:<\/p>\n
\"gif<\/a><\/p>\n
As it is a JSON object, keep an eye on the closing and opening brackets, commas, and quotation marks.<\/p>\n
{\r\n      \"type\": \"header\",\r\n      \"content\": {\r\n        \"da\": \"Logobillede\",\r\n        \"de\": \"Logo\",\r\n        \"en\": \"Logo\",\r\n        \"es\": \"Logo\",\r\n        \"fi\": \"Logokuva\",\r\n        \"fr\": \"Logo\",\r\n        \"hi\": \"लोगो इमेज\",\r\n        \"it\": \"Logo\",\r\n        \"ja\": \"ロゴ画像\",\r\n        \"ko\": \"로고 이미지\",\r\n        \"nb\": \"Logobilde\",\r\n        \"nl\": \"Logo\",\r\n        \"pt-BR\": \"Logotipo\",\r\n        \"pt-PT\": \"Logótipo\",\r\n        \"sv\": \"Logobild\",\r\n        \"th\": \"รูปภาพโลโก้\",\r\n        \"zh-CN\": \"logo 图片\",\r\n        \"zh-TW\": \"標誌圖片\"\r\n      }\r\n    },\r\n\t{\r\n      \"type\": \"image_picker\",\r\n      \"id\": \"logo\",\r\n      \"label\": {\r\n        \"da\": \"Logobillede\",\r\n        \"de\": \"Logo-Foto\",\r\n        \"en\": \"Logo image\",\r\n        \"es\": \"Logo\",\r\n        \"fi\": \"Logokuva\",\r\n        \"fr\": \"Image du logo\",\r\n        \"hi\": \"लोगो इमेज\",\r\n        \"it\": \"Immagine del logo\",\r\n        \"ja\": \"ロゴ画像\",\r\n        \"ko\": \"로고 이미지\",\r\n        \"nb\": \"Logobilde\",\r\n        \"nl\": \"Afbeelding van logo\",\r\n        \"pt-BR\": \"Imagem do logotipo\",\r\n        \"pt-PT\": \"Imagem do logótipo\",\r\n        \"sv\": \"Logobild\",\r\n        \"th\": \"รูปภาพโลโก้\",\r\n        \"zh-CN\": \"logo 图片\",\r\n        \"zh-TW\": \"標誌圖片\"\r\n      }\r\n    },\r\n    {\r\n      \"type\": \"range\",\r\n      \"id\": \"logo_max_width\",\r\n      \"label\": {\r\n        \"da\": \"Tilpasset logobredde\",\r\n        \"de\": \"Logobreite\",\r\n        \"en\": \"Custom logo width\",\r\n        \"es\": \"Ancho del logo personalizado\",\r\n        \"fi\": \"Mukautetun logon leveys\",\r\n        \"fr\": \"Largeur personnalisée du logo\",\r\n        \"hi\": \"कस्टम लोगो की चौड़ाई\",\r\n        \"it\": \"Larghezza logo personalizzato\",\r\n        \"ja\": \"ロゴの幅をカスタマイズする\",\r\n        \"ko\": \"사용자 지정 로고 폭\",\r\n        \"nb\": \"Tilpasset logobredde\",\r\n        \"nl\": \"Aangepaste logo-breedte\",\r\n        \"pt-BR\": \"Largura do logotipo personalizado\",\r\n        \"pt-PT\": \"Largura de logótipo personalizada\",\r\n        \"sv\": \"Anpassad logotypsbredd\",\r\n        \"th\": \"ความกว้างของโลโก้แบบกำหนดเอง\",\r\n        \"zh-CN\": \"自定义 logo 宽度\",\r\n        \"zh-TW\": \"自訂商標寬度\"\r\n      },\r\n      \"min\": 50,\r\n      \"max\": 250,\r\n      \"step\": 5,\r\n      \"unit\": \"px\",\r\n      \"default\": 100\r\n    },\r\n<\/pre>\n
After that, the following settings will be displayed in the footer section of the admin panel:<\/p>\n
\"shopify<\/a><\/p>\n
Open the theme.scss.liquid <\/strong>file in the Assets<\/strong> folder and add custom styles at the bottom of the file:<\/p>\n
\"how<\/a><\/p>\n
Place the following styles:<\/p>\n
\/*================ Custom styles ================*\/\r\n\r\n\/\/\/\r\n\/\/\/ Footer logo\r\n\r\n.site-footer__logo {\r\n   margin-bottom: 40px;\r\n  \r\n  .h2 {\r\n  \ttext-align: center;\r\n  }\r\n}\r\n\r\n.site-footer__logo-image img {\r\n width: 100%;\r\n}<\/pre>\n
How to change Shopify footer menu<\/h2>\n
To edit Shopify menu, open Quick links<\/strong>. There you can change the menu’s name and its links.<\/p>\n
\"quick<\/a><\/p>\n
Click on Add new menu items<\/strong>, and fill out the name and link for it.<\/p>\n
\"edit<\/a><\/p>\n
Add styles for the menu:<\/p>\n
\/\/\/\r\n\/\/\/ Footer menu\r\n\r\n.site-footer__item-inner {\r\n  width: 100%;\r\n  \r\n  .h4 {\r\n    text-transform: uppercase;\r\n    border-bottom: 1px solid $color-border;\r\n    margin-bottom: $footer-spacing-small;\r\n    padding-bottom: $footer-hr-bottom-spacing \/ 2;\r\n  }\r\n  \r\n  .site-footer__linklist {\r\n    @include display-flexbox;\r\n  \t@include flex-direction(column);\r\n    text-transform: uppercase;\r\n    \r\n    li.site-footer__linklist-item {\r\n      padding: 0 $grid-gutter ($footer-hr-bottom-spacing \/ 2) 0;\r\n    }\r\n  }\r\n}<\/pre>\n
Now, custom styles look as follows:<\/p>\n
\"shopify<\/a><\/p>\n
How to Set up Shopify Newsletter<\/h2>\n
To change the placeholder text, click on Edit language<\/strong>.<\/p>\n
\"edit<\/a><\/p>\n
Find the Newsletter form<\/strong> section and change the text.<\/p>\n
\"how<\/a><\/p>\n
If you want to add a text above the subscription form, in the footer.liquid<\/strong> file find the Subscription<\/strong> form by class newsletter__input<\/strong> using the keyboard shortcut Ctrl + F<\/strong> and place the code above it.<\/p>\n
<p class=\"newsletter__text\">{{ 'general.newsletter_form.newsletter__text' | t }}<\/p><\/code><\/p>\n
\"how<\/a><\/p>\n
Then open the en.default.json <\/strong>language file on the way Edit code – Locales – en.default.json<\/strong>. In the search, find the newsletter_form<\/strong> object and insert the newsletter__text<\/strong> key into the text.<\/p>\n
\"shopify<\/a><\/p>\n
Now our field is displayed on the translation page in the Newsletter form <\/strong>section.<\/p>\n
\"how<\/a><\/p>\n
You can also sign up for newsletters this way for other language files.<\/p>\n
How to change Shopify payment icons<\/h2>\n
Find the following code in the footer.liquid <\/strong>file:<\/p>\n
{% for type in enabled_payment_types %}<\/code><\/p>\n
Replace it with:<\/p>\n
{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}\r\n{% for type in enabled_payment_types %}<\/pre>\n
\"How<\/a><\/p>\n
The payment providers that you include in this list will determine which payment icons display on your online store.<\/p>\n
The values you can use are listed below:<\/p>\n