Help deleting unwanted text

Store Design

Topic summary

Issue: Unwanted CSS code was displaying as visible text at the bottom of every page on a Shopify store, left behind after someone created a custom hover effect.

Root Cause: The CSS for the hover-circle effect was pasted directly into a template file without being wrapped in <style> tags, causing browsers to render it as plain text instead of styling.

Solution Steps:

  • Use Edit code and search (Ctrl/Cmd + Shift + F) for unique CSS snippets like pointer-events: none; or z-index: 9999
  • Locate the code in files like theme.liquid, footer.liquid, or custom liquid blocks
  • Either move the CSS to assets/base.css or wrap it properly in <style> tags
  • Alternatively, use Theme settings → Custom CSS if available

Outcome: The original poster resolved the issue independently within seconds after understanding the problem. Multiple community members offered detailed troubleshooting steps, though the issue was already fixed by the time some checked.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

image
image1920×166 14.1 KB

Hi guys, i hope yall are having a fine day.
Some guy in the shopify community (which helped me a lot)
left this while creating a hover effect on my website, cant seem to find the men’s name.
Store link: breshofficial . com
Pass: hugegyat
its on the bottom of every page.
Is there anyway i can spot whats causing this text to appear and have it removed?

2 Likes
2

@Bresh_store it’s some CSS near the “hover-circle” that’s either not wrapped properly in a style tag or attribute , or some malformed HTML is happening.

If you want this fixed reach out to me with details by DM or other options found by clicking my profile pic on the forum.

1 Like
3

Managed to do it alone, took me 5 seconds to see the problem, and you wanted 10$ for this
Its not that im looking for free stuff, its you that are looking for free money. Be fair and the money will get to you.

4

Hey @Bresh_store :waving_hand:

That code snippet showing at the bottom of every page is almost certainly some CSS you (or a helper) pasted without a <style> tag (or inside a “Custom liquid/HTML” block). Browsers then render the CSS text on the page.

Quick fix (2–3 mins)

  1. Find it fast

    • Online Store → Themes → … → Edit code.

    • Press Ctrl/Cmd + Shift + F and search a unique bit from the text, e.g.
      pointer-events: none; or transform: translate(-50%, -50%) or z-index: 9999.

    • You’ll likely see it in theme.liquid, footer.liquid, a section called custom-liquid, or an app block.

  2. Move it to your CSS file

    • Cut that whole CSS block (it probably looks like the “custom cursor” styles: position: fixed; width:100px; height:100px; border-radius:50%; …).

    • Open assets/base.css (or your main stylesheet) and paste it there.

    • If you must keep it inline, wrap it properly:

      <style>
  /* your custom cursor styles here */
</style>

    • Remove any leftover text from the liquid/HTML section so nothing prints on the page.

  3. If you used Customize → Sections

    • Check for a “Custom liquid / Custom HTML” block where you pasted raw CSS. Either:

      • Move those rules to Theme settings → Custom CSS (if your theme has it), or

      • Keep the block but wrap the rules in <style>…</style>.

  4. Double-check with Inspect

    • Right-click the visible text → Inspect.

    • In the Elements panel, look at the right-hand Styles pane to see the filename responsible (helps you confirm the exact file to edit).

Tip: if the goal was a hover/cursor circle, the text you’re seeing is just the CSS for that effect. Once it lives in base.css (or inside a <style> tag), the stray text disappears and the effect works.

If you share a preview link/theme name, I can point to the exact file/line to edit.

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

5

Time is valuable, and you didn’t need my time you just had to do the work yourself.
Burning your own time doing development instead of working on the business.
Good Luck.

6
  • In Shopify admin, go to Online Store > Themes.
  • On your duplicate theme, click Actions > Edit code.
  • Under Assets (left sidebar), search for CSS files like:
  • theme.scss.liquid or theme.css.liquid (most common global stylesheet).
  • styles.css.liquid or base.css.
  • Open the file containing the wrong code (based on your DevTools notes).
  • Search (Ctrl+F / Cmd+F) for the problematic rule (e.g., the class name or property causing the issue).
  • Simply remove the lines.
7

Hi @Bresh_store

I just checked, but it’s still not visible below the footer.

image
image1270×488 27.5 KB

8

I did not see this issue when checking on my end. Is it resolved already or not? Please help update. Thank you!

image
image1815×829 65.2 KB

9

Solved, managed to it by myself thank yall

10

You can mark your own replies of how it was solved as a solution, to minimize new replies in the future.