My editor is showing changes properly implemented but my live site doesn't show them.

Shopify Discussion

Topic summary

A Shopify store owner is experiencing a discrepancy where buttons display correctly in the theme editor but are invisible on the live site at pearsonfarm.com. The buttons remain functional and clickable, but visually hidden. The user has already ruled out market-specific settings and attempted to remove white color from the code without success.

Troubleshooting suggestions provided:

  • Inspect for hidden CSS rules (display: none, visibility: hidden, opacity: 0) using browser developer tools and override with !important declarations if found
  • Review theme customization settings for visibility toggles affecting mobile/desktop display
  • Check for JavaScript errors or scripts that may delay button rendering
  • Consider rolling back to a previous theme version if recent updates caused the issue

Current status: The issue remains unresolved and awaits further investigation or theme-specific guidance.

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

Hello,

In my editor, I have buttons on our home page and they are showing up like they are supposed to. However, on the live site they aren’t showing up. I have checked to see if I am on the right market because i saw other posts about a similar issue but that didn’t reveal anything. Is there another reason this may be happening. My buttons are still active and you are able to click the link but you just cannot see them like they are in the editor. I have removed the white color in the code but that doesn’t revert them back to what they are supposed to be. (See pictures)URL: https://pearsonfarm.com

bcc9dd94-8226-4395-a8a7-8fd907ed056b.png
bcc9dd94-8226-4395-a8a7-8fd907ed056b.png400×173 42.9 KB

Buttons in editor.png
Buttons in editor.png400×230 49.4 KB

2

Hey @Peaches5575

If your buttons are visible in the editor but not on the live site, here are a few things to check:

  1. Check for Hidden CSS Rules
    Your theme might have custom CSS hiding the buttons on the live site. Use Inspect Element (Right-click > Inspect on Chrome) and check if the button has display: none;, visibility: hidden;, or opacity: 0;.

    Fix: If found, override it in your CSS:

    .button-class {

display: block !important;

visibility: visible !important;

opacity: 1 !important;

}

  2. Check Theme Settings
    Some Shopify themes have visibility settings where buttons may be disabled on mobile/desktop.

    Go to Online Store > Themes > Customize and check button settings.

  3. Verify If JavaScript Is Hiding the Buttons

    Some scripts delay rendering elements until a certain condition is met (like scrolling or interactions).

    In the Inspect Element Console, look for JavaScript errors that might affect visibility.

    Quick Test: Try adding this to your browser’s console (Developer Tools > Console) and press enter:

    document.querySelectorAll('.button-class').forEach(el => el.style.display = 'block');

  4. Check for Theme Updates or Conflicts

    If you recently updated your theme, some settings may have reset.

    Try rolling back your theme to a previous version (Online Store > Themes > Actions > Edit Code > Older Versions).

If none of these work, let me know what theme you’re using, and I can suggest a more specific fix!