This tutorial will help you remove or modify the following types of links in the footer: “Powered by Shopify”, “Ecommerce Software by Shopify” or “E-commerce by Shopify” and also links like: “This shop will be powered by Shopify” on the themes offline pages.
I’ll cover removing “Powered by Shopify” for all 8 free themes located in the Shopify directory.
All free themes are developed by Shopify.
First of all, maybe you are wondering why is this link present in the theme footer?
Well, this is a way for Shopify to promote their business. If you want to promote Shopify and tell others about it, I recommend leaving the link where it is.
Let’s say somebody is visiting your website and sees the link in the footer: “Powered by Shopify”, “Ecommerce Software by Shopify” or “E-commerce by Shopify”. He starts wondering: “Hey, what is this link for?” and clicks on it to see where it goes.
Usually the link takes the user to the Shopify website: www.shopify.com . Once he sees what is the platform that powers your website, he decides that he wants to open himself a shop and starts using the Shopify platform for that.
Leaving the link will help Shopify a lot in their journey to change commerce as we know it. I love what they do and I encourage you to keep the link but in some cases you really need to remove the link from the footer.
For those of you that are wondering if search engines will penalize you for having this link in the footer let me tell you that from my knowledge this is not the case.
I’ve looked at all 8 free themes developed by Shopify and they have the recommended tag rel=”nofollow”, though these days this tag is a strong signal meaning that Google might take it into consideration or it may not.
The rel=”nofollow” tells search engines to not associate your website with any Shopify endorsements or crawl the linked page from your site.
Not removing the link has some drawbacks though. For example, once a user clicks an external link and moves to another website chances that he will not come back are increased and you can lose a customer.
If the user is in your sales funnel he will get back but if he isn’t, you can lose him forever and he may never visit your site again.
To avoid issues like this one it is better that you remove this link since your shop is an ecommerce one and not a blog to promote affiliate products.
The first method and the most simple one is to remove the text from Shopify admin inside the theme “Language” section.
This is also the method listed in Shopify documentation but in my opinion it is not the correct one because this method will replace the text with a space that you’ll be typing inside the input box, leaving the code in the front-end intact.
I do not like to see on my websites pieces of code that don’t contribute to the website overall. If a piece of code is not needed it should not be patched but removed entirely from the website.
If you replace the text with a space to make it invisible, the code that you leave in the front-end will load on every page slowing down your website.
Maybe you’re thinking that it’s just a small line of code and won’t do any harm. I would say one small line of code here, another one there and another over there and soon you’ll have a lot of kilobytes or as I have seen in some extreme cases even megabytes of useless code.
A couple of kilobytes of code will not harm so much a user on a high speed internet connection with a powerful computer. If all your users will have high speed internet and powerful connections you’ll be fine but I doubt that.
Most of your users will use mobile devices and WI-FI internet connections on the road, stations, airports, restaurants and some of them will be in the countryside using a slow internet connection.
Because of that I can tell you from my experience that even the smallest optimisation you can do matters and makes a huge difference.
In the first method I’ll show you how to remove the text by replacing it with a space. This method is explained in the Shopify documentation as well, but it is not crystal clear, so I’ll try to make it clearer and easier to understand for those that are not familiar with ecommerce platforms.
I do not recommend this method but for those that do not understand coding it is much safer. By changing your Shopify store code, because you do not understand entirely what you do, you can break your theme.
Shopify has a tracking feature that could help with this by saving an older version of your page once you’ve made changes to it. If you break something you can revert to the working version of the file.
Anyway, I still recommend hiring a developer to change the code and point him to this tutorial to help him complete the job faster.
The second method is the one that I recommend and I’ll show you how to remove the code and keep the theme clean.
Please note that “Powered by Shopify” is theme related meaning that when you’ll remove it, it will be removed only for that theme and not for the entire shop.
When you install a new theme “Powered by Shopify” will display again and you have to remove it.
For every theme the tutorial is repetitive so it is best to go at the top of the article and click on the theme that you want to change the copyright.
Clicking or tapping on the theme name will take you directly to the specific section of the tutorial for that theme.
Debut
We start with the Debut theme since this one is preinstalled on every new Shopify installation you make.
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
Once you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top of the page for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
What you see in the box with a light grey color is the placeholder, the default text that you see in the website front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit the purple “Save” button on the top right corner:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Check the copyright in the shop front-end and you’ll see that it is removed.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by Shopify” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your website back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Debut theme and after on the “Edit Code”:
A new page will open that will list the Debut theme files:
Now let’s maximize the editor, to work in full screen and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a “Dark mode” if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that, type in the “Search files” input box the word “footer”:
Two files are listed: “footer.liquid” and “password-footer.liquid”. We will remove the copyright on both files but for the moment will work with the “footer.liquid” file so let’s open it.
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
The “powered_by_link” variable is located in 2 places on the Debut theme: one is when the footer doesn’t have social icons displayed and another is when the social icons are displayed.
The code could be improved to display only one time the variable, honestly I’m not sure why Shopify developers chose to do it like this since it is more code than needed.
Type ⌘ + F (Mac) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We have this code:
<small class="site-footer__copyright-content site-footer__copyright-content-powered-by">{{ powered_by_link }}</small>
The code has a “small” tag and 2 CSS classes: “site-footer__copyright-content” and “site-footer__copyright-content-powered-by”.
The code above needs to be removed entirely so please select it and hit delete.
Let’s proceed with the next piece of code:
Select all the code below and hit delete:
<small class="site-footer__copyright-content site-footer__copyright-content--powered-by">
{{ powered_by_link }}
</small>
As I see Shopify developers made a small bug here since if a developer were to target the “site-footer__copyright-content-powered-by” class to style the link, the styles will not apply to the second line of code because the classes names are not identical. See the difference:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password-footer.liquid” file located in the same folder “Sections”:
We need to remove the following code:
This is the code that you need to remove:
<div class="password-powered-by">
{% capture shopify %}
<a class="classic-link shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">Shopify</a>
{% endcapture %}
<small>{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}</small>
</div>
Fold the code by clicking on the little arrow on the editor and delete it:
Check the front-end and you should no longer see the copyright: “This shop will be powered by Shopify” line:
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Debut theme supports at the time of writing this tutorial, multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Close the “Sections” folder and open the languages folder called “Locales” on the Shopify editor:
We need to open the “en.default.json” file:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Type ⌘ + F (Mac) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}""powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
Also delete the “,” from the line above. If you do not remove the comma you’ll get an error like: “Error: Invalid JSON: unexpected token”. Remove the comma and the error is gone.
If you check the themeʼs back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Debut theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<small class="site-footer__copyright-content site-footer__copyright-content--powered-by">
{{ powered_by_link }}
</small>
In order to change it easily later without modifying directly the code we need to add a translation key to the code:
We can modify all the above code as we see fit. I’ll replace the above code with a simple text “All rights reserved.”:
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Please note that you have to replace it in 2 places in the same file:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.” You can choose whatever text you like, the process is the same.
Let’s open the Shopify code editor and filter for the “password-footer.liquid” file and open it:
Now let’s search for the following code:
<div class="password-powered-by">
{% capture shopify %}
<a class="classic-link shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">Shopify</a>
{% endcapture %}
<small>{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}</small>
</div>
This is how it looks in your code editor:
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<div class="password-footer">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
<small>
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</small>
</div>
I’ll explain the code so you can understand what you are doing.
<div class="password-footer"></div>
First is the footer container to which we’ve changed the class.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – this shows the current year and the format.
{{ routes.root_url }} – this is a Shopify object that helps you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now save your new changes by hitting the purple “Save” button in the top right corner.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!"
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Boundless
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
Once you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient because sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
What you see in the box with a light grey color is the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button.
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Boundless theme and after on the “Edit Code”:
A new page will open that will list Boundless theme files:
Now let’s maximize the editor, to work in full screen and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
One file is listed: “footer.liquid” so let’s open it.
What we are looking for is to remove the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
The “powered_by_link” variable is located in one place on the Boundless theme.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you paste the “powered_by_link” variable in the search box, the editor will display the result. You do not have to hit enter, everything happens automatically.
As you see we have this code:
<span class="site-footer__copyright">© {{ 'now' | date: '%Y' }}, <a href="{{ routes.root_url }}">{{ shop.name }}</a>. {{ powered_by_link }}</span>
We remove only the variable {{ powered_by_link }} and leave everything else. After removal your code should look like this:
<span class="site-footer__copyright">© {{ 'now' | date: '%Y' }}, <a href="{{ routes.root_url }}">{{ shop.name }}</a>.</span>
We remove only the “Powered by Shopify” and leave everything else like the year and your website title, in our case: “© 2019, How Commerce.”
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
We need to search for a file called “password.liquid” located in the “Templates” folder:
Open the file and locate the following code:
This is the code that you need to remove:
<footer class="password-footer" role="contentinfo">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Click ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Check the front-end and you should no longer see the copyright.
Now we need to remove the CSS code. Search for the “theme.scss.liquid” file:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type “password-footer”:
.password-footer {
background-color: $color-footer;
display: table-cell;
vertical-align: bottom;
padding: $gutter-site;
color: $color-footer-text;
}
.shopify-logo-svg {
width: 1.5 * $font-size-base * 120 / 35;
height: 1.5 * $font-size-base;
display: inline-block;
line-height: 0;
vertical-align: top;
path {
fill: $color-footer-text;
}
}
/* =========
Hiding the word 'Shopify' but not from screen readers.
IE8 does not support SVG, so in it we hide the logo and show the word.
To target all browsers except IE8, we use the class 'modern',
which needs to be added to the html element.
========= */
.shopify-name {
.modern & {
@extend .visually-hidden;
}
}
Fold the code and remove it:
Let’s now remove the Shopify SVG icon from the theme file structure. Since you’ve removed the code it is no longer possible for you to see the icon on the website front-end but this is how it looked before code deletion:
Search in the code editor for the “svg-definitions.liquid” file:
We need to remove the following code:
{% when 'shopify-logo' %}
<svg xmlns="http://www.w3.org/2000/svg" class="{{ icon }}-svg" viewBox="0 0 150 43" version="1.1" aria-hidden="true">
<title>Shopify logo</title>
<path fill="#999999" d="M33.3,8.9 C33.3,8.9 33.3,8.7 33.2,8.6 C33.1,8.5 33,8.5 33,8.5 L29.6,8.3 L27.5,6.2 C27.4,6.1 27.3,6.1 27.2,6.1 L25.4,42.2 L38,39.5 L33.3,8.9 Z M25.8,5.9 L24.9,6.2 C24.3,4.6 23.6,3.4 22.6,2.7 C21.9,2.2 21.1,2 20.3,2.1 C20.1,1.9 19.9,1.7 19.7,1.5 C18.8,0.8 17.6,0.6 16.1,1.2 C11.8,2.7 10,8.3 9.3,11 L5.5,12.1 C5.5,12.1 4.6,12.3 4.4,12.6 C4.2,12.9 4.1,13.6 4.1,13.6 L0.9,37.9 L24.5,42.3 L26.3,6 C26.1,5.8 25.9,5.9 25.8,5.9 Z M20.1,7.6 L16,8.9 C16.5,6.8 17.6,4.6 19.6,3.8 C20,4.8 20.1,6.3 20.1,7.6 Z M16.6,2.4 C17.5,2.1 18.2,2.1 18.7,2.4 C16,3.6 14.8,6.7 14.3,9.3 L11,10.3 C11.7,7.8 13.3,3.6 16.6,2.4 Z M18.9,20.3 C18.7,20.2 18.5,20.1 18.2,20 C17.9,19.9 17.7,19.8 17.4,19.7 C17.1,19.6 16.8,19.6 16.4,19.5 L15.3,19.5 C15,19.5 14.7,19.6 14.4,19.7 C14.1,19.8 13.9,19.9 13.7,20.1 C13.5,20.3 13.4,20.5 13.3,20.7 C13.2,20.9 13.1,21.2 13.1,21.4 C13.1,21.6 13.1,21.8 13.2,22 C13.3,22.2 13.4,22.4 13.5,22.6 C13.7,22.8 13.9,23 14.1,23.2 C14.3,23.4 14.6,23.6 14.9,23.8 C15.4,24.1 15.8,24.4 16.3,24.8 C16.8,25.2 17.2,25.6 17.5,26.1 C17.9,26.6 18.2,27.1 18.4,27.8 C18.6,28.4 18.7,29.1 18.7,29.9 C18.6,31.1 18.4,32.2 17.9,33.1 C17.5,34 16.8,34.7 16.1,35.2 C15.4,35.7 14.5,36 13.6,36.1 C12.7,36.2 11.7,36.2 10.8,35.9 C10.3,35.8 9.9,35.6 9.5,35.5 C9.1,35.3 8.7,35.1 8.3,34.9 C8,34.7 7.6,34.5 7.4,34.3 C7.1,34.1 6.9,33.9 6.7,33.6 L7.8,30 C8,30.2 8.2,30.3 8.5,30.5 C8.8,30.7 9.1,30.9 9.4,31 C9.7,31.2 10.1,31.3 10.4,31.5 C10.8,31.6 11.1,31.7 11.5,31.8 L12.3,31.8 C12.5,31.7 12.8,31.6 12.9,31.5 C13.1,31.4 13.2,31.2 13.3,31 C13.4,30.8 13.4,30.6 13.5,30.3 C13.5,30.1 13.5,29.8 13.4,29.6 C13.3,29.4 13.2,29.2 13.1,28.9 C13,28.7 12.8,28.5 12.5,28.2 C12.3,28 12,27.7 11.6,27.5 C11.2,27.2 10.8,26.9 10.4,26.5 C10.1,26.1 9.7,25.8 9.5,25.3 C9.3,24.9 9.1,24.4 8.9,23.9 C8.8,23.4 8.7,22.9 8.7,22.3 C8.7,21.3 8.9,20.5 9.3,19.7 C9.6,18.9 10.1,18.2 10.7,17.5 C11.3,16.9 12,16.3 12.9,15.9 C13.8,15.5 14.7,15.2 15.8,15 C16.3,14.9 16.8,14.9 17.2,14.9 C17.7,14.9 18.1,14.9 18.5,15 C18.9,15.1 19.3,15.1 19.6,15.2 C19.9,15.3 20.2,15.4 20.5,15.5 L18.9,20.3 Z M21.5,7.2 L21.5,6.7 C21.5,5.4 21.3,4.3 21,3.5 C21.3,3.5 21.6,3.6 21.9,3.8 C22.7,4.3 23.2,5.4 23.6,6.6 L21.5,7.2 Z"/>
<path fill="#999999" d="M45.3,29.6 C46.2,30.1 47.8,30.7 49.4,30.7 C50.8,30.7 51.6,29.9 51.6,29 C51.6,28.1 51.1,27.5 49.5,26.6 C47.6,25.5 46.2,24 46.2,22 C46.2,18.5 49.2,16 53.6,16 C55.5,16 57,16.4 57.8,16.8 L56.6,20.3 C55.9,20 54.8,19.6 53.5,19.6 C52.1,19.6 51.2,20.2 51.2,21.3 C51.2,22.1 51.9,22.7 53.1,23.3 C55.1,24.4 56.7,25.9 56.7,28 C56.7,32 53.5,34.2 49,34.1 C46.9,34.1 45,33.5 44.1,32.9 L45.3,29.6 Z M57.7,34.1 L62.6,8.9 L67.6,8.9 L65.7,18.7 L65.8,18.7 C67.1,17.1 68.9,16 71.1,16 C73.7,16 75.2,17.7 75.2,20.5 C75.2,21.4 75.1,22.7 74.8,23.8 L72.8,34.1 L67.8,34.1 L69.7,24.2 C69.8,23.5 69.9,22.7 69.9,22 C69.9,20.9 69.5,20.2 68.3,20.2 C66.7,20.2 65,22.2 64.3,25.5 L62.6,34.2 L57.7,34.2 L57.7,34.1 Z M93.3,23 C93.3,29.1 89.3,34.4 83.4,34.4 C78.9,34.4 76.5,31.3 76.5,27.5 C76.5,21.5 80.5,16.1 86.5,16.1 C91.2,16.1 93.3,19.4 93.3,23 Z M81.6,27.3 C81.6,29.1 82.3,30.5 84,30.5 C86.7,30.5 88.1,25.8 88.1,22.8 C88.1,21.3 87.5,19.8 85.7,19.8 C83.1,19.9 81.6,24.5 81.6,27.3 Z M92.1,41.1 L95.6,23 C96,21 96.4,18.3 96.6,16.4 L101,16.4 L100.7,19.2 L100.8,19.2 C102.1,17.3 104.1,16.2 106.1,16.2 C109.8,16.2 111.3,19.1 111.3,22.5 C111.3,28.5 107.4,34.6 101.6,34.6 C100.4,34.6 99.2,34.1 98.7,34.1 L98.6,34.1 L97.2,41.1 L92.1,41.1 Z M99.3,29.9 C99.8,30.3 100.5,30.6 101.4,30.6 C104.2,30.6 106.1,26 106.1,22.8 C106.1,21.5 105.6,20.1 104.1,20.1 C102.4,20.1 100.7,22.1 100.1,25.2 L99.3,29.9 Z M111.5,34.1 L114.9,16.4 L120,16.4 L116.6,34.1 L111.5,34.1 Z M118,14.5 C116.6,14.5 115.6,13.4 115.6,11.9 C115.6,10.3 116.9,9 118.5,9 C120,9 121,10.1 121,11.6 C121,13.4 119.6,14.5 118,14.5 Z M120.9,34.1 L123.6,20.1 L121.3,20.1 L122,16.4 L124.3,16.4 L124.4,15.6 C124.8,13.5 125.6,11.4 127.3,10 C128.6,8.9 130.4,8.4 132.2,8.4 C133.4,8.4 134.3,8.6 134.9,8.8 L133.9,12.7 C133.5,12.6 133,12.4 132.3,12.4 C130.6,12.4 129.6,13.9 129.3,15.6 L129.1,16.4 L132.6,16.4 L131.9,20.1 L128.4,20.1 L125.7,34.1 L120.9,34.1 L120.9,34.1 Z M138.9,16.4 L139.7,24.3 C139.9,26.1 140.1,27.6 140.1,28.5 L140.2,28.5 C140.6,27.6 141,26.2 141.7,24.3 L144.8,16.4 L150,16.4 L143.9,29.5 C141.7,34 139.6,37.2 137.3,39.4 C135.5,41.1 133.4,41.9 132.4,42.1 L131,37.9 C131.8,37.6 132.9,37.2 133.8,36.5 C135,35.7 135.9,34.6 136.5,33.5 C136.6,33.2 136.7,33 136.6,31.6 L133.6,16.4 L138.9,16.4 Z"/>
</svg>
Fold the code in the editor and delete it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Boundless theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Close the “Sections” folder and open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Boundless theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.”.
This is how the code looks inside the footer section of the theme:
<div class="grid__item large-up--one-half">
<span class="site-footer__copyright">© {{ 'now' | date: '%Y' }}, <a href="{{ routes.root_url }}">{{ shop.name }}</a>. {{ powered_by_link }}</span>
</div>
In order to modify the code we need to remove the {{ powered_by_link }} variable.
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check at this moment the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password.liquid” file:
Open the file and locate the following code:
This is the code that you need to remove:
<footer class="password-footer" role="contentinfo">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – this displays the current year and the format.
{{ routes.root_url }} – this is a Shopify object that will help you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check the website in front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!",
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting the purple “Save” button in the top right corner.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Brooklyn
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
Once you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient because sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
What you see in the box with a light grey color is the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit the purple “Save” button on the top right corner:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Brooklyn theme and after on the “Edit Code”:
A new page will open that will list Brooklyn theme files:
Let’s maximize the editor, to work in full screen mode and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We need to remove this code:
<br>{{ powered_by_link }}
Delete it and after hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password.liquid” file located in the folder “Layout”:
We need to remove the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Now we need to remove the CSS code. Search for the “theme.scss.liquid” file:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type “password-page__footer”:
.password-page__footer {
display: table-row;
height: 1px;
}
.password-page__footer_inner {
display: table-cell;
vertical-align: bottom;
padding: $gutter;
line-height: 1.5 * $baseFontSize;
font-size: 95%;
}
.shopify-link {
color: inherit;
&:hover {
color: inherit;
}
}
.shopify-logo-svg {
width: 1.5 * $baseFontSize * 120 / 35;
height: 1.5 * $baseFontSize;
display: inline-block;
line-height: 0;
vertical-align: top;
path {
fill: currentColor;
}
}
/* =========
Hiding the word 'Shopify' but not from screen readers.
========= */
.shopify-name {
@include visuallyHidden;
}
Fold the code to make it easier for selection and remove it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Let’s now remove the Shopify SVG icon from the theme file structure. Since you’ve removed the code it is no longer possible for you to see the icon on the websiteʼs front-end but this is how it looked before code deletion:
Search in the code editor for the “svg-definitions.liquid” file:
We need to remove the following code:
{% when 'shopify-logo' %}
<svg xmlns="http://www.w3.org/2000/svg" class="{{ icon }}-svg" viewBox="0 0 150 43" version="1.1" aria-hidden="true">
<title>Shopify logo</title>
<path fill="#999999" d="M33.3,8.9 C33.3,8.9 33.3,8.7 33.2,8.6 C33.1,8.5 33,8.5 33,8.5 L29.6,8.3 L27.5,6.2 C27.4,6.1 27.3,6.1 27.2,6.1 L25.4,42.2 L38,39.5 L33.3,8.9 Z M25.8,5.9 L24.9,6.2 C24.3,4.6 23.6,3.4 22.6,2.7 C21.9,2.2 21.1,2 20.3,2.1 C20.1,1.9 19.9,1.7 19.7,1.5 C18.8,0.8 17.6,0.6 16.1,1.2 C11.8,2.7 10,8.3 9.3,11 L5.5,12.1 C5.5,12.1 4.6,12.3 4.4,12.6 C4.2,12.9 4.1,13.6 4.1,13.6 L0.9,37.9 L24.5,42.3 L26.3,6 C26.1,5.8 25.9,5.9 25.8,5.9 Z M20.1,7.6 L16,8.9 C16.5,6.8 17.6,4.6 19.6,3.8 C20,4.8 20.1,6.3 20.1,7.6 Z M16.6,2.4 C17.5,2.1 18.2,2.1 18.7,2.4 C16,3.6 14.8,6.7 14.3,9.3 L11,10.3 C11.7,7.8 13.3,3.6 16.6,2.4 Z M18.9,20.3 C18.7,20.2 18.5,20.1 18.2,20 C17.9,19.9 17.7,19.8 17.4,19.7 C17.1,19.6 16.8,19.6 16.4,19.5 L15.3,19.5 C15,19.5 14.7,19.6 14.4,19.7 C14.1,19.8 13.9,19.9 13.7,20.1 C13.5,20.3 13.4,20.5 13.3,20.7 C13.2,20.9 13.1,21.2 13.1,21.4 C13.1,21.6 13.1,21.8 13.2,22 C13.3,22.2 13.4,22.4 13.5,22.6 C13.7,22.8 13.9,23 14.1,23.2 C14.3,23.4 14.6,23.6 14.9,23.8 C15.4,24.1 15.8,24.4 16.3,24.8 C16.8,25.2 17.2,25.6 17.5,26.1 C17.9,26.6 18.2,27.1 18.4,27.8 C18.6,28.4 18.7,29.1 18.7,29.9 C18.6,31.1 18.4,32.2 17.9,33.1 C17.5,34 16.8,34.7 16.1,35.2 C15.4,35.7 14.5,36 13.6,36.1 C12.7,36.2 11.7,36.2 10.8,35.9 C10.3,35.8 9.9,35.6 9.5,35.5 C9.1,35.3 8.7,35.1 8.3,34.9 C8,34.7 7.6,34.5 7.4,34.3 C7.1,34.1 6.9,33.9 6.7,33.6 L7.8,30 C8,30.2 8.2,30.3 8.5,30.5 C8.8,30.7 9.1,30.9 9.4,31 C9.7,31.2 10.1,31.3 10.4,31.5 C10.8,31.6 11.1,31.7 11.5,31.8 L12.3,31.8 C12.5,31.7 12.8,31.6 12.9,31.5 C13.1,31.4 13.2,31.2 13.3,31 C13.4,30.8 13.4,30.6 13.5,30.3 C13.5,30.1 13.5,29.8 13.4,29.6 C13.3,29.4 13.2,29.2 13.1,28.9 C13,28.7 12.8,28.5 12.5,28.2 C12.3,28 12,27.7 11.6,27.5 C11.2,27.2 10.8,26.9 10.4,26.5 C10.1,26.1 9.7,25.8 9.5,25.3 C9.3,24.9 9.1,24.4 8.9,23.9 C8.8,23.4 8.7,22.9 8.7,22.3 C8.7,21.3 8.9,20.5 9.3,19.7 C9.6,18.9 10.1,18.2 10.7,17.5 C11.3,16.9 12,16.3 12.9,15.9 C13.8,15.5 14.7,15.2 15.8,15 C16.3,14.9 16.8,14.9 17.2,14.9 C17.7,14.9 18.1,14.9 18.5,15 C18.9,15.1 19.3,15.1 19.6,15.2 C19.9,15.3 20.2,15.4 20.5,15.5 L18.9,20.3 Z M21.5,7.2 L21.5,6.7 C21.5,5.4 21.3,4.3 21,3.5 C21.3,3.5 21.6,3.6 21.9,3.8 C22.7,4.3 23.2,5.4 23.6,6.6 L21.5,7.2 Z"/>
<path fill="#999999" d="M45.3,29.6 C46.2,30.1 47.8,30.7 49.4,30.7 C50.8,30.7 51.6,29.9 51.6,29 C51.6,28.1 51.1,27.5 49.5,26.6 C47.6,25.5 46.2,24 46.2,22 C46.2,18.5 49.2,16 53.6,16 C55.5,16 57,16.4 57.8,16.8 L56.6,20.3 C55.9,20 54.8,19.6 53.5,19.6 C52.1,19.6 51.2,20.2 51.2,21.3 C51.2,22.1 51.9,22.7 53.1,23.3 C55.1,24.4 56.7,25.9 56.7,28 C56.7,32 53.5,34.2 49,34.1 C46.9,34.1 45,33.5 44.1,32.9 L45.3,29.6 Z M57.7,34.1 L62.6,8.9 L67.6,8.9 L65.7,18.7 L65.8,18.7 C67.1,17.1 68.9,16 71.1,16 C73.7,16 75.2,17.7 75.2,20.5 C75.2,21.4 75.1,22.7 74.8,23.8 L72.8,34.1 L67.8,34.1 L69.7,24.2 C69.8,23.5 69.9,22.7 69.9,22 C69.9,20.9 69.5,20.2 68.3,20.2 C66.7,20.2 65,22.2 64.3,25.5 L62.6,34.2 L57.7,34.2 L57.7,34.1 Z M93.3,23 C93.3,29.1 89.3,34.4 83.4,34.4 C78.9,34.4 76.5,31.3 76.5,27.5 C76.5,21.5 80.5,16.1 86.5,16.1 C91.2,16.1 93.3,19.4 93.3,23 Z M81.6,27.3 C81.6,29.1 82.3,30.5 84,30.5 C86.7,30.5 88.1,25.8 88.1,22.8 C88.1,21.3 87.5,19.8 85.7,19.8 C83.1,19.9 81.6,24.5 81.6,27.3 Z M92.1,41.1 L95.6,23 C96,21 96.4,18.3 96.6,16.4 L101,16.4 L100.7,19.2 L100.8,19.2 C102.1,17.3 104.1,16.2 106.1,16.2 C109.8,16.2 111.3,19.1 111.3,22.5 C111.3,28.5 107.4,34.6 101.6,34.6 C100.4,34.6 99.2,34.1 98.7,34.1 L98.6,34.1 L97.2,41.1 L92.1,41.1 Z M99.3,29.9 C99.8,30.3 100.5,30.6 101.4,30.6 C104.2,30.6 106.1,26 106.1,22.8 C106.1,21.5 105.6,20.1 104.1,20.1 C102.4,20.1 100.7,22.1 100.1,25.2 L99.3,29.9 Z M111.5,34.1 L114.9,16.4 L120,16.4 L116.6,34.1 L111.5,34.1 Z M118,14.5 C116.6,14.5 115.6,13.4 115.6,11.9 C115.6,10.3 116.9,9 118.5,9 C120,9 121,10.1 121,11.6 C121,13.4 119.6,14.5 118,14.5 Z M120.9,34.1 L123.6,20.1 L121.3,20.1 L122,16.4 L124.3,16.4 L124.4,15.6 C124.8,13.5 125.6,11.4 127.3,10 C128.6,8.9 130.4,8.4 132.2,8.4 C133.4,8.4 134.3,8.6 134.9,8.8 L133.9,12.7 C133.5,12.6 133,12.4 132.3,12.4 C130.6,12.4 129.6,13.9 129.3,15.6 L129.1,16.4 L132.6,16.4 L131.9,20.1 L128.4,20.1 L125.7,34.1 L120.9,34.1 L120.9,34.1 Z M138.9,16.4 L139.7,24.3 C139.9,26.1 140.1,27.6 140.1,28.5 L140.2,28.5 C140.6,27.6 141,26.2 141.7,24.3 L144.8,16.4 L150,16.4 L143.9,29.5 C141.7,34 139.6,37.2 137.3,39.4 C135.5,41.1 133.4,41.9 132.4,42.1 L131,37.9 C131.8,37.6 132.9,37.2 133.8,36.5 C135,35.7 135.9,34.6 136.5,33.5 C136.6,33.2 136.7,33 136.6,31.6 L133.6,16.4 L138.9,16.4 Z"/>
</svg>
Fold the code in the editor and delete it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Brooklyn theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translation file.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Brooklyn theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.”.
This is how the code looks inside the footer section of the theme:
<p>© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}<br>{{ powered_by_link }}</p>
In order to change it easily later without modifying directly the code we need to add a translation key to the code.
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you go to your shopʼs front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password.liquid” file:
Open the file and locate the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – this displays the current year and the format.
{{ routes.root_url }} – this is a Shopify object that will help you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!",
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Minimal
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
Once you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
The words that you see in the box with a light grey color are the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit the purple “Save” button on the top right corner:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Minimal theme and after on the “Edit Code”:
A new page will open that will list the Minimal theme files:
Let’s maximize the editor, so we can work in full screen mode and let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We need to remove this code:
{{ powered_by_link }}
Delete it and after hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password.liquid” file located in the folder “Layout”:
We need to remove the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
To save your settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button.
Now we need to remove the CSS code. Search for the “theme.scss.liquid” file:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type “password-page__footer”:
.password-page__footer {
display: table-row;
height: 1px;
@if $passwordPageUseBgImage{
color: inherit;
} @else {
color: $colorFooterText;
}
}
.password-page__footer_inner {
display: table-cell;
vertical-align: bottom;
padding: $gutter;
line-height: 1.5 * $baseFontSize;
font-size: 95%;
}
.shopify-link {
color: inherit;
&:hover {
color: inherit;
}
}
.shopify-logo-svg {
width: 1.5 * $baseFontSize * 120 / 35;
height: 1.5 * $baseFontSize;
display: inline-block;
line-height: 0;
vertical-align: top;
path {
fill: currentColor;
}
}
/* =========
Hiding the word 'Shopify' but not from screen readers.
========= */
.shopify-name {
@include visuallyHidden;
}
Fold the code to make it easier for selection and remove it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Let’s now remove the Shopify SVG icon from the theme files structure. Since you’ve removed the code it is no longer possible for you to see the icon on the websiteʼs front-end but this is how it looked before code deletion:
Search in the code editor for the “svg-definitions.liquid” file:
We need to remove the following code:
{% when 'shopify-logo' %}
<svg xmlns="http://www.w3.org/2000/svg" class="{{ icon }}-svg" viewBox="0 0 150 43" version="1.1" aria-hidden="true">
<title>Shopify logo</title>
<path fill="#999999" d="M33.3,8.9 C33.3,8.9 33.3,8.7 33.2,8.6 C33.1,8.5 33,8.5 33,8.5 L29.6,8.3 L27.5,6.2 C27.4,6.1 27.3,6.1 27.2,6.1 L25.4,42.2 L38,39.5 L33.3,8.9 Z M25.8,5.9 L24.9,6.2 C24.3,4.6 23.6,3.4 22.6,2.7 C21.9,2.2 21.1,2 20.3,2.1 C20.1,1.9 19.9,1.7 19.7,1.5 C18.8,0.8 17.6,0.6 16.1,1.2 C11.8,2.7 10,8.3 9.3,11 L5.5,12.1 C5.5,12.1 4.6,12.3 4.4,12.6 C4.2,12.9 4.1,13.6 4.1,13.6 L0.9,37.9 L24.5,42.3 L26.3,6 C26.1,5.8 25.9,5.9 25.8,5.9 Z M20.1,7.6 L16,8.9 C16.5,6.8 17.6,4.6 19.6,3.8 C20,4.8 20.1,6.3 20.1,7.6 Z M16.6,2.4 C17.5,2.1 18.2,2.1 18.7,2.4 C16,3.6 14.8,6.7 14.3,9.3 L11,10.3 C11.7,7.8 13.3,3.6 16.6,2.4 Z M18.9,20.3 C18.7,20.2 18.5,20.1 18.2,20 C17.9,19.9 17.7,19.8 17.4,19.7 C17.1,19.6 16.8,19.6 16.4,19.5 L15.3,19.5 C15,19.5 14.7,19.6 14.4,19.7 C14.1,19.8 13.9,19.9 13.7,20.1 C13.5,20.3 13.4,20.5 13.3,20.7 C13.2,20.9 13.1,21.2 13.1,21.4 C13.1,21.6 13.1,21.8 13.2,22 C13.3,22.2 13.4,22.4 13.5,22.6 C13.7,22.8 13.9,23 14.1,23.2 C14.3,23.4 14.6,23.6 14.9,23.8 C15.4,24.1 15.8,24.4 16.3,24.8 C16.8,25.2 17.2,25.6 17.5,26.1 C17.9,26.6 18.2,27.1 18.4,27.8 C18.6,28.4 18.7,29.1 18.7,29.9 C18.6,31.1 18.4,32.2 17.9,33.1 C17.5,34 16.8,34.7 16.1,35.2 C15.4,35.7 14.5,36 13.6,36.1 C12.7,36.2 11.7,36.2 10.8,35.9 C10.3,35.8 9.9,35.6 9.5,35.5 C9.1,35.3 8.7,35.1 8.3,34.9 C8,34.7 7.6,34.5 7.4,34.3 C7.1,34.1 6.9,33.9 6.7,33.6 L7.8,30 C8,30.2 8.2,30.3 8.5,30.5 C8.8,30.7 9.1,30.9 9.4,31 C9.7,31.2 10.1,31.3 10.4,31.5 C10.8,31.6 11.1,31.7 11.5,31.8 L12.3,31.8 C12.5,31.7 12.8,31.6 12.9,31.5 C13.1,31.4 13.2,31.2 13.3,31 C13.4,30.8 13.4,30.6 13.5,30.3 C13.5,30.1 13.5,29.8 13.4,29.6 C13.3,29.4 13.2,29.2 13.1,28.9 C13,28.7 12.8,28.5 12.5,28.2 C12.3,28 12,27.7 11.6,27.5 C11.2,27.2 10.8,26.9 10.4,26.5 C10.1,26.1 9.7,25.8 9.5,25.3 C9.3,24.9 9.1,24.4 8.9,23.9 C8.8,23.4 8.7,22.9 8.7,22.3 C8.7,21.3 8.9,20.5 9.3,19.7 C9.6,18.9 10.1,18.2 10.7,17.5 C11.3,16.9 12,16.3 12.9,15.9 C13.8,15.5 14.7,15.2 15.8,15 C16.3,14.9 16.8,14.9 17.2,14.9 C17.7,14.9 18.1,14.9 18.5,15 C18.9,15.1 19.3,15.1 19.6,15.2 C19.9,15.3 20.2,15.4 20.5,15.5 L18.9,20.3 Z M21.5,7.2 L21.5,6.7 C21.5,5.4 21.3,4.3 21,3.5 C21.3,3.5 21.6,3.6 21.9,3.8 C22.7,4.3 23.2,5.4 23.6,6.6 L21.5,7.2 Z"/>
<path fill="#999999" d="M45.3,29.6 C46.2,30.1 47.8,30.7 49.4,30.7 C50.8,30.7 51.6,29.9 51.6,29 C51.6,28.1 51.1,27.5 49.5,26.6 C47.6,25.5 46.2,24 46.2,22 C46.2,18.5 49.2,16 53.6,16 C55.5,16 57,16.4 57.8,16.8 L56.6,20.3 C55.9,20 54.8,19.6 53.5,19.6 C52.1,19.6 51.2,20.2 51.2,21.3 C51.2,22.1 51.9,22.7 53.1,23.3 C55.1,24.4 56.7,25.9 56.7,28 C56.7,32 53.5,34.2 49,34.1 C46.9,34.1 45,33.5 44.1,32.9 L45.3,29.6 Z M57.7,34.1 L62.6,8.9 L67.6,8.9 L65.7,18.7 L65.8,18.7 C67.1,17.1 68.9,16 71.1,16 C73.7,16 75.2,17.7 75.2,20.5 C75.2,21.4 75.1,22.7 74.8,23.8 L72.8,34.1 L67.8,34.1 L69.7,24.2 C69.8,23.5 69.9,22.7 69.9,22 C69.9,20.9 69.5,20.2 68.3,20.2 C66.7,20.2 65,22.2 64.3,25.5 L62.6,34.2 L57.7,34.2 L57.7,34.1 Z M93.3,23 C93.3,29.1 89.3,34.4 83.4,34.4 C78.9,34.4 76.5,31.3 76.5,27.5 C76.5,21.5 80.5,16.1 86.5,16.1 C91.2,16.1 93.3,19.4 93.3,23 Z M81.6,27.3 C81.6,29.1 82.3,30.5 84,30.5 C86.7,30.5 88.1,25.8 88.1,22.8 C88.1,21.3 87.5,19.8 85.7,19.8 C83.1,19.9 81.6,24.5 81.6,27.3 Z M92.1,41.1 L95.6,23 C96,21 96.4,18.3 96.6,16.4 L101,16.4 L100.7,19.2 L100.8,19.2 C102.1,17.3 104.1,16.2 106.1,16.2 C109.8,16.2 111.3,19.1 111.3,22.5 C111.3,28.5 107.4,34.6 101.6,34.6 C100.4,34.6 99.2,34.1 98.7,34.1 L98.6,34.1 L97.2,41.1 L92.1,41.1 Z M99.3,29.9 C99.8,30.3 100.5,30.6 101.4,30.6 C104.2,30.6 106.1,26 106.1,22.8 C106.1,21.5 105.6,20.1 104.1,20.1 C102.4,20.1 100.7,22.1 100.1,25.2 L99.3,29.9 Z M111.5,34.1 L114.9,16.4 L120,16.4 L116.6,34.1 L111.5,34.1 Z M118,14.5 C116.6,14.5 115.6,13.4 115.6,11.9 C115.6,10.3 116.9,9 118.5,9 C120,9 121,10.1 121,11.6 C121,13.4 119.6,14.5 118,14.5 Z M120.9,34.1 L123.6,20.1 L121.3,20.1 L122,16.4 L124.3,16.4 L124.4,15.6 C124.8,13.5 125.6,11.4 127.3,10 C128.6,8.9 130.4,8.4 132.2,8.4 C133.4,8.4 134.3,8.6 134.9,8.8 L133.9,12.7 C133.5,12.6 133,12.4 132.3,12.4 C130.6,12.4 129.6,13.9 129.3,15.6 L129.1,16.4 L132.6,16.4 L131.9,20.1 L128.4,20.1 L125.7,34.1 L120.9,34.1 L120.9,34.1 Z M138.9,16.4 L139.7,24.3 C139.9,26.1 140.1,27.6 140.1,28.5 L140.2,28.5 C140.6,27.6 141,26.2 141.7,24.3 L144.8,16.4 L150,16.4 L143.9,29.5 C141.7,34 139.6,37.2 137.3,39.4 C135.5,41.1 133.4,41.9 132.4,42.1 L131,37.9 C131.8,37.6 132.9,37.2 133.8,36.5 C135,35.7 135.9,34.6 136.5,33.5 C136.6,33.2 136.7,33 136.6,31.6 L133.6,16.4 L138.9,16.4 Z"/>
</svg>
Fold the code in the editor and delete it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Minimal theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Minimal theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}. {{ powered_by_link }}</p>
In order to change it easily later without modifying directly the code we need to add a translation key to the code.
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password.liquid” file:
Open the file and locate the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – this displays the current year and the format.
{{ routes.root_url }} – this is a Shopify object that will help you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!",
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Narrative
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shopʼs back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
Once you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete.
Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
The words that you see in the box with a light grey color are the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
For this section the theme has a setting from where you can turn off the copyright.
Go to “Themes” and click the “Customize” button for the Narrative theme:
Go on and select the “Password page”:
Select the “Footer” section:
On the settings panel uncheck “ Show ‘powered by Shopify’ ”:
Save your changes:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the theme and after on the “Edit Code”:
A new page will open that will list the theme files:
Let’s maximize the editor, to work in full screen mode and let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen mode:
Once the editor is maximized click the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for is to remove the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We need to remove this code:
<small class="site-footer__powered-by">{{ powered_by_link }}</small>
Delete it and after hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
As you can see the code has a CSS class “.site-footer__powered-by” and because we no longer use it we need to remove it.
Let’s close the “footer.liquid” file and search for the “theme.scss.liquid” file:
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “.site-footer__powered-by” CSS class inside:
Remove the code:
.site-footer__powered-by {
padding-top: 5px;
}
Once you’ve removed the code hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Search and open the “password.liquid” file located in the “Templates” folder:
In this case we’re going to remove the inclusion of the file and afterwards the entire file. There is no need in keeping a file that we’ll no longer use.
Remove the following code:
{% section 'password-footer' %}
To save your settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button.
Now search for the “password-footer.liquid” file located in the “Sections” folder:
Delete the file by selecting the “Delete file” button:
Now we need to remove the CSS code. Search for the “theme.scss.liquid” file:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type “.password-footer”:
.password-footer {
width: 100%;
padding: $gutter 0;
line-height: $gutter * 2;
@include media-query($medium-up) {
padding: ($gutter * 2) 0;
}
.icon-shopify-logo {
width: $gutter * 6;
height: $gutter * 2;
margin-left: $gutter / 3;
margin-top: -5px;
fill: $color-footer-text;
}
}
Fold the code to make it easier for selection and remove it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Let’s now remove the Shopify SVG icon from the theme files structure. Since you’ve removed the code it is no longer possible for you to see the icon on the websiteʼs front-end but this is how it looked before code deletion:
Search in the code editor for the “icon-shopify-logo.liquid” file and open it:
Delete the file by selecting the “Delete file” button:
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Narrative theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<small class="site-footer__powered-by">{{ powered_by_link }}</small>
We can modify all the code above as we see fit. I’ll replace the code above with span tags containing the text “All rights reserved.”.
In order to modify the code we need to replace the {{ powered_by_link }} variable with a translation key:
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “{{ powered_by_link }}” code:
Replace the code with the following:
{{ 'layout.footer.copyright_text' | t }}
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button.
Now search for the “en.default.json” language file:
Open the file and search for the “footer” line:
Below the “copyright”: “Copyright” line add the following code:
"copyright_text_html": "All rights reserved."
Don’t forget to add the “,” (comma) after the “copyright”: “Copyright” line or else you’ll get an error.
After you’re done hit the “Save” button to save your new changes.
Go to your shop front-end and check your new copyright:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password-footer.liquid” file:
Open the file and locate the following code:
This is the code that you need to remove:
<footer class="password-footer text-center" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="password-footer">
{% capture shopify %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
<span class="visually-hidden">Shopify</span>
{% include 'icon-shopify-logo' %}
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – displays the current year and the format.
{{ routes.root_url }} – is a Shopify object that will help you display dynamic URLs. We use it so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – is a language key that we’ll add later to the language files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – is a language key that we’ll add later to the languages files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password-footer.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!",
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Everything is completed and your new copyright should display in the front-end:
Simple
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
When you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete.
Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
The words that you see in the box with a light grey color are the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Simple theme and after on the “Edit Code”:
A new page will open that will list the Simple theme files:
Let’s maximize the editor, to work in full screen mode and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen mode:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We need to remove this code:
{{ powered_by_link }}
Delete it and after hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password.liquid” file located in the folder “Layout”:
We need to remove the following code:
This is the code that you need to remove:
<footer role="contentinfo">
{% capture shopify %}
<a class="password__shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'icon-shopify-logo' %}
<span class="icon__fallback-text">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
To save your new settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button.
Let’s now remove the Shopify SVG icon from the theme files structure. Since you’ve removed the code it is no longer possible for you to see the icon on the website front-end but this is how it looked before code deletion:
This icon is actually a liquid file located in the snippets folder. The file is included in the “password.liquid” file with the “include” tag. By the way “include” is obsolete, you should use “render” from now on.
Search in the code editor for the “icon-shopify-logo.liquid” file:
As you can see in the screenshot this file has 3 CSS classes: “icon icon–wide icon-shopify-logo”. We are going to remove the last one, because the other two are used across the theme.
Search for the “theme.scss.liquid” file and open it:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type the CSS class name “icon-shopify-logo”:
Fold the code and remove it:
Now hit⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
OK. Close the “theme.scss.liquid” file and delete the “icon-shopify-logo.liquid” file:
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Simple theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
Make sure you’ve removed the “,” comma on the previous line or else you’ll get an error. This is how your previous line should look without the ending comma:
"password_link": "Enter using password"
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Simple theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<small>{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}. {{ powered_by_link }}</small>
We can modify all the code above as we see fit. I’ll replace the code above with the text “All rights reserved.”
In order to change it easily later without modifying directly the code we need to add a translation key to the code.
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password.liquid” file:
Locate the following code:
This is the code that you need to remove:
<footer role="contentinfo">
{% capture shopify %}
<a class="password__shopify-link" href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'icon-shopify-logo' %}
<span class="icon__fallback-text">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – displays the current year and the format.
{{ routes.root_url }} -is a Shopify object that will help you display dynamic URLs. We use it so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – is a language key that we’ll add later to the language files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – This is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!"
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end, “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Supply
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
When you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will now filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
The words that you see in the box with a light grey color are the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button on the top right corner:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your website back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Supply theme and after on the “Edit Code”:
A new page will open that will list Supply theme files:
Let’s maximize the editor, to work in full screen mode and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen mode:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
Normally we need to remove this code:
{{ powered_by_link }}
But since the link is inside a list we need to modify the list code to adapt it to the new changes.
Remove this code:
<ul class="legal-links inline-list">
<li>
© {{ 'now' | date: '%Y' }} {{ shop.name | link_to: routes.root_url }}
</li>
<li>
{{ powered_by_link }}
</li>
</ul>
Replace it with this one:
<p>© {{ 'now' | date: '%Y' }} {{ shop.name | link_to: routes.root_url }}</p>
All we have added to the code above is the paragraph tag “<p></p>”. You can use the small tag as well if you want instead of the paragraph tag. We did that to remove the list, since it was no longer relevant because by removing one list item, we left only one in the list.
A list with one item is no longer a list, so it is better to change it to a paragraph to optimize the code base and make it more semantic.
We’ve kept the date, shop name and shop link.
To save your settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button in the code editor.
If you check the websiteʼs front-end you’ll see that the copyright is gone:
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password.liquid” file located in the folder “Layout”:
We need to remove the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify_link %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="icon-fallback-text">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify_link }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
To save your settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button.
Now let’s remove the Shopify SVG icon from the theme files structure. Since you’ve removed the code it is no longer possible for you to see the icon on the website front-end but this is how it looked before code deletion:
This icon is actually located in a file as a code snippet in the snippets folder and is included in the “password.liquid” file with the “include” tag.
Search in the code editor for the “svg-definitions.liquid” file:
We need to remove the following code:
{% when 'shopify-logo' %}
<svg xmlns="http://www.w3.org/2000/svg" class="{{ icon }}-svg" viewBox="0 0 150 43" version="1.1" aria-hidden="true">
<title>Shopify logo</title>
<path fill="#999999" d="M33.3,8.9 C33.3,8.9 33.3,8.7 33.2,8.6 C33.1,8.5 33,8.5 33,8.5 L29.6,8.3 L27.5,6.2 C27.4,6.1 27.3,6.1 27.2,6.1 L25.4,42.2 L38,39.5 L33.3,8.9 Z M25.8,5.9 L24.9,6.2 C24.3,4.6 23.6,3.4 22.6,2.7 C21.9,2.2 21.1,2 20.3,2.1 C20.1,1.9 19.9,1.7 19.7,1.5 C18.8,0.8 17.6,0.6 16.1,1.2 C11.8,2.7 10,8.3 9.3,11 L5.5,12.1 C5.5,12.1 4.6,12.3 4.4,12.6 C4.2,12.9 4.1,13.6 4.1,13.6 L0.9,37.9 L24.5,42.3 L26.3,6 C26.1,5.8 25.9,5.9 25.8,5.9 Z M20.1,7.6 L16,8.9 C16.5,6.8 17.6,4.6 19.6,3.8 C20,4.8 20.1,6.3 20.1,7.6 Z M16.6,2.4 C17.5,2.1 18.2,2.1 18.7,2.4 C16,3.6 14.8,6.7 14.3,9.3 L11,10.3 C11.7,7.8 13.3,3.6 16.6,2.4 Z M18.9,20.3 C18.7,20.2 18.5,20.1 18.2,20 C17.9,19.9 17.7,19.8 17.4,19.7 C17.1,19.6 16.8,19.6 16.4,19.5 L15.3,19.5 C15,19.5 14.7,19.6 14.4,19.7 C14.1,19.8 13.9,19.9 13.7,20.1 C13.5,20.3 13.4,20.5 13.3,20.7 C13.2,20.9 13.1,21.2 13.1,21.4 C13.1,21.6 13.1,21.8 13.2,22 C13.3,22.2 13.4,22.4 13.5,22.6 C13.7,22.8 13.9,23 14.1,23.2 C14.3,23.4 14.6,23.6 14.9,23.8 C15.4,24.1 15.8,24.4 16.3,24.8 C16.8,25.2 17.2,25.6 17.5,26.1 C17.9,26.6 18.2,27.1 18.4,27.8 C18.6,28.4 18.7,29.1 18.7,29.9 C18.6,31.1 18.4,32.2 17.9,33.1 C17.5,34 16.8,34.7 16.1,35.2 C15.4,35.7 14.5,36 13.6,36.1 C12.7,36.2 11.7,36.2 10.8,35.9 C10.3,35.8 9.9,35.6 9.5,35.5 C9.1,35.3 8.7,35.1 8.3,34.9 C8,34.7 7.6,34.5 7.4,34.3 C7.1,34.1 6.9,33.9 6.7,33.6 L7.8,30 C8,30.2 8.2,30.3 8.5,30.5 C8.8,30.7 9.1,30.9 9.4,31 C9.7,31.2 10.1,31.3 10.4,31.5 C10.8,31.6 11.1,31.7 11.5,31.8 L12.3,31.8 C12.5,31.7 12.8,31.6 12.9,31.5 C13.1,31.4 13.2,31.2 13.3,31 C13.4,30.8 13.4,30.6 13.5,30.3 C13.5,30.1 13.5,29.8 13.4,29.6 C13.3,29.4 13.2,29.2 13.1,28.9 C13,28.7 12.8,28.5 12.5,28.2 C12.3,28 12,27.7 11.6,27.5 C11.2,27.2 10.8,26.9 10.4,26.5 C10.1,26.1 9.7,25.8 9.5,25.3 C9.3,24.9 9.1,24.4 8.9,23.9 C8.8,23.4 8.7,22.9 8.7,22.3 C8.7,21.3 8.9,20.5 9.3,19.7 C9.6,18.9 10.1,18.2 10.7,17.5 C11.3,16.9 12,16.3 12.9,15.9 C13.8,15.5 14.7,15.2 15.8,15 C16.3,14.9 16.8,14.9 17.2,14.9 C17.7,14.9 18.1,14.9 18.5,15 C18.9,15.1 19.3,15.1 19.6,15.2 C19.9,15.3 20.2,15.4 20.5,15.5 L18.9,20.3 Z M21.5,7.2 L21.5,6.7 C21.5,5.4 21.3,4.3 21,3.5 C21.3,3.5 21.6,3.6 21.9,3.8 C22.7,4.3 23.2,5.4 23.6,6.6 L21.5,7.2 Z"/>
<path fill="#999999" d="M45.3,29.6 C46.2,30.1 47.8,30.7 49.4,30.7 C50.8,30.7 51.6,29.9 51.6,29 C51.6,28.1 51.1,27.5 49.5,26.6 C47.6,25.5 46.2,24 46.2,22 C46.2,18.5 49.2,16 53.6,16 C55.5,16 57,16.4 57.8,16.8 L56.6,20.3 C55.9,20 54.8,19.6 53.5,19.6 C52.1,19.6 51.2,20.2 51.2,21.3 C51.2,22.1 51.9,22.7 53.1,23.3 C55.1,24.4 56.7,25.9 56.7,28 C56.7,32 53.5,34.2 49,34.1 C46.9,34.1 45,33.5 44.1,32.9 L45.3,29.6 Z M57.7,34.1 L62.6,8.9 L67.6,8.9 L65.7,18.7 L65.8,18.7 C67.1,17.1 68.9,16 71.1,16 C73.7,16 75.2,17.7 75.2,20.5 C75.2,21.4 75.1,22.7 74.8,23.8 L72.8,34.1 L67.8,34.1 L69.7,24.2 C69.8,23.5 69.9,22.7 69.9,22 C69.9,20.9 69.5,20.2 68.3,20.2 C66.7,20.2 65,22.2 64.3,25.5 L62.6,34.2 L57.7,34.2 L57.7,34.1 Z M93.3,23 C93.3,29.1 89.3,34.4 83.4,34.4 C78.9,34.4 76.5,31.3 76.5,27.5 C76.5,21.5 80.5,16.1 86.5,16.1 C91.2,16.1 93.3,19.4 93.3,23 Z M81.6,27.3 C81.6,29.1 82.3,30.5 84,30.5 C86.7,30.5 88.1,25.8 88.1,22.8 C88.1,21.3 87.5,19.8 85.7,19.8 C83.1,19.9 81.6,24.5 81.6,27.3 Z M92.1,41.1 L95.6,23 C96,21 96.4,18.3 96.6,16.4 L101,16.4 L100.7,19.2 L100.8,19.2 C102.1,17.3 104.1,16.2 106.1,16.2 C109.8,16.2 111.3,19.1 111.3,22.5 C111.3,28.5 107.4,34.6 101.6,34.6 C100.4,34.6 99.2,34.1 98.7,34.1 L98.6,34.1 L97.2,41.1 L92.1,41.1 Z M99.3,29.9 C99.8,30.3 100.5,30.6 101.4,30.6 C104.2,30.6 106.1,26 106.1,22.8 C106.1,21.5 105.6,20.1 104.1,20.1 C102.4,20.1 100.7,22.1 100.1,25.2 L99.3,29.9 Z M111.5,34.1 L114.9,16.4 L120,16.4 L116.6,34.1 L111.5,34.1 Z M118,14.5 C116.6,14.5 115.6,13.4 115.6,11.9 C115.6,10.3 116.9,9 118.5,9 C120,9 121,10.1 121,11.6 C121,13.4 119.6,14.5 118,14.5 Z M120.9,34.1 L123.6,20.1 L121.3,20.1 L122,16.4 L124.3,16.4 L124.4,15.6 C124.8,13.5 125.6,11.4 127.3,10 C128.6,8.9 130.4,8.4 132.2,8.4 C133.4,8.4 134.3,8.6 134.9,8.8 L133.9,12.7 C133.5,12.6 133,12.4 132.3,12.4 C130.6,12.4 129.6,13.9 129.3,15.6 L129.1,16.4 L132.6,16.4 L131.9,20.1 L128.4,20.1 L125.7,34.1 L120.9,34.1 L120.9,34.1 Z M138.9,16.4 L139.7,24.3 C139.9,26.1 140.1,27.6 140.1,28.5 L140.2,28.5 C140.6,27.6 141,26.2 141.7,24.3 L144.8,16.4 L150,16.4 L143.9,29.5 C141.7,34 139.6,37.2 137.3,39.4 C135.5,41.1 133.4,41.9 132.4,42.1 L131,37.9 C131.8,37.6 132.9,37.2 133.8,36.5 C135,35.7 135.9,34.6 136.5,33.5 C136.6,33.2 136.7,33 136.6,31.6 L133.6,16.4 L138.9,16.4 Z"/>
</svg>
Fold the code in the editor and delete it:
After removal hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Supply theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translation file.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the text found on the “Offline page” in the front-end “This shop will be powered by”:
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
After removal hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Supply theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<li>{{ powered_by_link }}</li>
We can modify all the code above as we see fit. I’ll replace the code above with “li” tags containing the text “All rights reserved.”:
<li>All rights reserved.<li>
In order to change it easily later without modifying directly the code we need to add a translation key to the code:
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the “footer.liquid” file:
Search for “powered_by_link”:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the footer translations key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have is to go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and filter for the “password.liquid” file:
Locate the following code:
This is the code that you need to remove:
<footer class="password-page__footer" role="contentinfo">
<div class="password-page__footer_inner">
{% capture shopify_link %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'svg-definitions' with 'shopify-logo' %}
<span class="icon-fallback-text">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify_link }}
</div>
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – displays the current year and the format.
{{ routes.root_url }} – is a Shopify object that will help you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – is a language key that we’ll add later to the language files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – is a language key that we’ll add later to the languages files or locales. Doing this we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!"
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end, “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – This is the link title that we use for the website link.
This is how your language file will look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
The 2 translation keys can be changed in the “Language” panel if you need so. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
Venture
Removing text method
Global copyright
Login in the administration area (back-end) of your Shopify store. Once you are logged inside your shop back-end you should see this:
Click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
The “Online Store” drop-down menu will open and you can see multiple options to administer your shop channel and the “Themes” page:
Now click on the “Actions” button to list the drop-down menu and select “Edit Languages”:
Now you can see the “Edit Languages” page and as you can see I’m on the “English language” settings page:
Keep this tab open and open a website preview of your shop by using the small icon located on the right of the “Online Store” channel:
When you click the preview icon a new tab will open with a preview of your shop. Scroll at the bottom of the page and search for a “Powered by Shopify” text:
Copy the text as it is and go back to the previous tab that contains the “Language” page. Paste inside the “Filter” the text that you’ve copied “Powered by Shopify”.
You do not need to press enter or do anything after you’ve pasted the text. Just wait a bit, Shopify will filter the results.
To check if Shopify is working on filtering the results please look at the top for a blue progress line. When the progress bar will reach the end of the window from left to right your search is complete. Please be patient sometimes, very rarely, issues can occur and the bar will load a bit slowly:
Once Shopify finished filtering you’ll see the following results:
The words that you see in the box with a light grey color are the placeholder, the default text that you see in the websiteʼs front-end: “Powered by Shopify”.
To remove it entirely you need to replace the placeholder “Powered by Shopify” with a space because leaving it empty would just not work since it will always default to the placeholder.
Once you add a “space” your input box will look like this:
To save your new settings please hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button on the top right corner:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Offline page copyright
We removed the footer “Powered by Shopify” and now we need to remove the “This shop will be powered by Shopify” on the Offline page:
Copy the text “This shop will be powered by” and go back to the “Edit Languages” page and paste it inside the “Filter” box:
Under “General / Password page” replace the text “This shop will be powered by {{ shopify }}” with a space to remove it:
After you add the space it should look like this:
And this is how it will look on the front-end:
If you don’t want to replace the “Powered by Shopify” with a space you always have the option to add a different text.
Removing code method
For me this is the best, easiest and fastest method to remove the “Powered by Shopify” copyright text.
Please do not use this method if you do not know how to work with code or you are not a developer. You can delete by mistake code that should not be deleted and this could result in a broken website.
Since the changes are small, for all the examples used in this article I’ll use the Shopify Online code editor.
Usually I use my code editor for any code changes I make, especially since every change is tracked in Git, plus I have other development tools located in my working directory which is not possible to use with the Shopify online code editor.
Global copyright
First we are going to remove “Powered by Shopify” from the website footer:
Let’s access the Shopify code editor. To do that login in your websiteʼs back-end dashboard and click on the “Online Store” menu item located in the “Sales Channels” section on the left side of your dashboard:
By default the “Themes” page will open. Go on and click on the “Actions” button on the Venture theme and after on the “Edit Code”:
A new page will open that will list the Venture theme files:
Let’s maximize the editor, to work in full screen mode and also let’s use the Dark skin to make it easier on the eyes. Yes, the code editor has a Dark mode if you didn’t know.
Click on the “Maximize” icon to adjust the editor to work in full screen mode:
Once the editor is maximized click on the “Dark” button on the bottom right corner to make the editor use the dark skin:
Now your editor should look like this:
You can get out of full screen by hitting the ESC key on your keyboard. Please note that once you minimize the editor it will revert to light mode. In conclusion the “Dark mode” is working only when the editor is in full screen.
To save your settings after we make changes to the code you can use either your keyboard keys (⌘ + S on Mac or CTRL + S on Windows) or the “Save” button.
OK. Let’s start editing some code.
To change the “Powered by Shopify” copyright we need to look for the “footer.liquid” file. To do that type in the “Search files” input box the word “footer”:
The “footer.liquid” file is listed so let’s open it:
What we are looking for to remove is the variable “powered_by_link”.
The “powered_by_link” is a global system variable, which is the same for every shop hosted on the Shopify platform and because of that it’s definition can’t be found on the theme. You can assign a new value to the variable and I’ll show you how later.
Type ⌘ + F (MAC) or CTRL + F (Windows) on your keyboard to open the search box in the code editor and paste the “powered_by_link” variable inside.
Once you’ve pasted the “powered_by_link” variable the editor will display the first result. You do not have to hit enter, everything happens automatically.
We need to remove this code:
{{ powered_by_link }}
Delete it and after hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button to save your settings:
If you check the websiteʼs front-end you’ll see that the copyright is gone.
Offline page copyright
Next step, we need to remove the copyright from the offline page:
Close the “footer.liquid” file and open the “password-footer.liquid” file located in the folder “Sections”:
We need to remove the following code:
This is the code that you need to remove:
<footer class="password-footer" role="contentinfo">
{% capture shopify %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'icon-shopify-logo' %}
<span class="visually-hidden">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
To save your settings hit ⌘ + S (Mac) or CTRL + S (Windows) or click the “Save” button.
Now let’s remove the Shopify SVG icon from the theme files structure. Since you’ve removed the code it is no longer possible for you to see the icon on the website front-end but this is how it looked before code deletion:
This icon is actually a liquid file located in the snippets folder that is included in the “password-footer.liquid” file with the “include” tag.
Search in the code editor for the “icon-shopify-logo.liquid” file:
As you can see in the screenshot above this file has 3 CSS classes: “icon icon–wide icon-shopify-logo”. We are going to remove the last one, because the other two are used across the theme.
Search for the “theme.scss.liquid” file and open it:
Open the file and type ⌘ + F (MAC) or CTRL + F (Windows) to open the search inside the editor. In the search box type the CSS class name “icon-shopify-logo”:
Fold the code and remove it:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
OK. Close the “theme.scss.liquid” file and delete the “icon-shopify-logo.liquid” file:
Next step is to remove the translation keys. Since we are no longer going to use the copyright at all, it is recommended to also remove the JSON code from the translation files.
I’m going to show you how to remove the code from the “en.default.json” only. The Venture theme is supported at the time of writing this tutorial in multiple languages. I’m not going to go through all the translations since the process is the same for every language file.
Open the languages folder called “Locales”. Look for the “en.default.json” file and open it in the editor:
We are going to remove the translation for the “Offline page” only because the other link “Powered by Shopify” is a system link and it can’t be found in the translations file.
Remove the code:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
Make sure you’ve removed the “,” comma on the previous line or else you’ll get an error. This is how your previous line should look without the ending comma:
"password_link": "Enter using password"
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you go to the theme back-end you’ll no longer see the “Powered by shopify html” option, because we removed the associated JSON code that generates this.
That’s it. We’ve removed all the code related to “Powered by Shopify” copyright in the Venture theme.
Change code method
If you want to change only the copyright text and replace it with your own, this can be done simply from the “Language” panel in the theme back-end without altering the code.
But what if you want to change the entire code and add your own or just apply some customizations? How do you do that?
Well, this is not possible via the “Language” panel, instead you need to get your hands dirty inside the code editor.
Global copyright
Let’s start first with the footer copyright that is located on all pages:
Let’s say we want to change “Powered by Shopify” to “All rights reserved.” and remove the link.
This is how the code looks inside the footer section of the theme:
<small>© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}. {{ powered_by_link }}</small>
In order to change it easily later without modifying directly the code we need to add a translation key to the code:
Open the Shopify code editor in full screen and dark mode and search for the “footer.liquid” file located in the “Sections” folder:
Open the file:
Search for the “powered_by_link” variable:
Replace it with the following code:
{{ 'layout.footer.copyright_text' | t }}
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your settings.
If you check now in the front-end you’ll see something like this:
This is because we haven’t defined the translation key in the language file.
Let’s do that. Search for the “en.default.json” file:
Search for the “footer” translation key:
Add this line to the “footer” key:
"copyright_text": "All rights reserved."
Make sure you add a “,” (comma) on the previous line.
If you go to your shop front-end and you’ve done everything correctly you should see your new copyright:
In the future if you or your client require to change the new copyright all you have to do is to go in the “Language” administration panel and you can modify the text as you see fit.
Type in the “Filter” box “All rights reserved.” and the new translation key will be displayed.
The new text is under the “Layout / Footer” and is called “Copyright text”:
Offline page copyright
Now let’s change the offline page copyright:
I’ll replace the existing code with: “© 2019, How Commerce. All rights reserved.”
Let’s open the Shopify code editor and search for the “password-footer.liquid” file:
Locate the following code:
This is the code that you need to remove:
<footer class="password-footer" role="contentinfo">
{% capture shopify %}
<a href="//www.shopify.com" rel="nofollow" target="_blank" title="Create your own online store with Shopify">
{% include 'icon-shopify-logo' %}
<span class="visually-hidden">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</footer>
Fold the code by clicking on the little arrow on the editor and delete it:
Replace the code with the following one:
<footer class="password-footer" role="contentinfo">
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">
{{ shop.name }}
</a>
{% endcapture %}
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
</footer>
I’ll explain the code so you can understand what you are doing.
<footer class="password-footer" role="contentinfo"></footer>
First is the footer container which remains unchanged.
{% capture copyright_link %}
© {{ 'now' | date: '%Y' }},
<a class="copyright-link" href="{{ routes.root_url }}" title="{{ 'general.password_page.copyright_link_title'| t }}">{{ shop.name }}</a>
{% endcapture %}
In the code above we have created a new variable called “copyright_link” and assigned to it the code located between {% capture %} and {% endcapture %}. These 2 tags define the content of the variable.
{{ ‘now’ | date: ‘%Y’ }} – displays the current year and the format.
{{ routes.root_url }} – is a Shopify object that will help you display dynamic URLs. We use this so we don’t have to hardcode the actual link because if we change the URL address, the link will no longer work.
{{ ‘general.password_page.copyright_link_title’ | t }} – is a language key that we’ll add later to the languages files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
{{ shop.name }} – A Shopify global object that helps access your Shop name.
{{ 'general.password_page.copyright_text_html' | t: copyright: copyright_link }}
‘general.password_page.copyright_text_html’ – is a language key that we’ll add later to the languages files or locales. Doing so we’ll allow other developers or translators to translate the text. We can also modify the text if needed via Shopify back-end without touching the code.
t – is the Shopify translation filter. The translation filter retrieves the translated content from the locale file for the active language. When a translation key is passed in a template file, the “t” filter uses that key to access the locale file for the active language.
copyright: – is a new variable to which we assign the “copyright_link” variable so we can pass it to the translation key ‘general.password_page.copyright_text_html’.
OK. Let’s get back to the Shopify editor and paste the code to replace the deleted one:
Now hit ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
If you check the website in the front-end you’ll get an error like: “translation missing: en.general.password_page.copyright_text_html” because we didn’t create the language keys yet.
Close the “password-footer.liquid” file and open the “en.default.json” file located in the “Locales” folder:
Find this line and remove it:
"powered_by_shopify_html": "This shop will be powered by {{ shopify }}",
Add the following lines in the same place:
"copyright_text_html": "{{ copyright }}. All rights reserved.",
"copyright_link_title": "Learn how to build your online Shop the right way!"
“copyright_text_html”: “{{ copyright }}. All rights reserved.” – On the left side of the “:” we have the translation key “copyright_text_html” and on the right side the value that we want to display in the Offline page front-end, “{{ copyright }}. All rights reserved.” . As you can see we use interpolation on the key value. The interpolation helps us use the “copyright_link” variable value inside the language key via “{{ copyright }}” which is an argument for the “t” filter to which we’ve passed the “copyright_link” variable that we’ve created with all the copyright code in the “password.liquid” file.
“copyright_link_title”: “Learn how to build your online Shop the right way!” – is the link title that we use for the website link.
This is how your language file should look:
Now save your new changes by hitting ⌘ + S (Mac) or CTRL + S (Windows) or click the purple “Save” button to save your changes.
The 2 translation keys can be changed in the “Language” panel if you need them. You have to search for “Copyright text html” and for “Copyright link title”:
Everything is completed and your new copyright should display in the front-end:
