Remove powered by Shopify in footer on Focal theme

Shopify Discussion
1

I just bought Focal theme on shopify and I need help to remove the powered by Shopify in the footer. I also want to remove the small grey square. And I want another text. Anyone who can tell me what coe to insert in the footer liquid?

Thank you:-)

2

Solved this by this video How to Remove Powered by Shopify from Footer

.. but still need help to remove small grey square and center the text on the site

3

Hello @Katt11 ,

Edit section, section → footer.liquid

Here search for class footer__copyright
Inside this element you can find the existing dynamic copyright content.
And you need to delete this html

to remove the square.

If problem solved don’t forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

1 Like
4

HI @Katt11

Here is the solution

span.footer__copyright.text--xsmall.text--subdued {
    display: none;
}

add this css on footer.css or theme.css at the very bottom of the file

if the solution is really work for you please mark it as acceptable solution

Thanks and regards

5

Hi, @Katt11

  1. Go to your Shopify admin panel.

  2. Navigate to Online Store > Themes > Customize > Edit Code.

  3. Locate the footer.liquid file or the equivalent file (sometimes it’s within sections or snippets).
    Use Ctrl+F (Windows) or Cmd+F (Mac) to search for “Powered by Shopify.”

  4. Delete the line or comment it out by wrapping it in {% comment %} … {% endcomment %}.

  5. To replace it, add your custom text within the relevant

    tag.

    Removing the Small Grey Square1. Locate the CSS or HTML generating the grey square:

      - Look for a div or span in the footer section that may represent the square.
  - If it's styled in the footer.liquid or an associated CSS file, delete or modify it.

    1. Add Custom CSS to Hide It (if unsure):

      • Go to the theme.css or base.css file.
      • Add this code:
.footer-class-name {
    display: none;
}

Replace .footer-class-name with the appropriate class or ID identified via your browser’s developer tools.

6

  1. Locate the CSS or HTML generating the grey square:

    • Look for a div or span in the footer section that may represent the square.
    • If it’s styled in the footer.liquid or an associated CSS file, delete or modify it.

  2. Add Custom CSS to Hide It (if unsure):

    • Go to the theme.css or base.css file.
    • Add this code:
.footer-class-name {
    display: none;
}​
  • Replace .footer-class-name with the appropriate class or ID identified via your browser’s developer tools.
  • If you need my help to identify the actual class name plase share your store url