Custom HTML Buttons on Shopify Pages

Store Design
, ,

Topic summary

Custom HTML buttons on non-homepage Shopify pages stop working after link edits in the rich-text editor; Shopify sometimes injects “sanitized” into the HTML, and some buttons open duplicate tabs. The merchant only changes URLs, but small edits often break all buttons on a page.

Likely causes noted: Shopify’s rich-text editor isn’t a full HTML editor and lacks robust error checking. Malformed HTML in the page content or conflicts with theme markup may trigger server-side sanitization and break behavior.

Suggested approaches:

  • Move button data (links/labels) into metafields or metaobjects (structured fields) and render them in the theme, reducing risky in-editor HTML edits.
  • Validate the page’s HTML (use W3C Validator fragment mode) and review theme HTML for errors.
  • Follow Shopify’s guidance for adding HTML in the rich-text editor.
  • Check the browser developer console for JavaScript/console errors that correlate with breakage or duplicate tab opens.
  • Provide concrete context (store URL, theme, specific page) for debugging; a sample page with orange buttons was shared.

Status: No resolution yet. Another participant requested clearer error details to proceed with troubleshooting.

Summarized with AI on December 22. AI used: gpt-5.
1

My website uses multiple html buttons to open up documents, new links and downloads on my website. These buttons are on the pages of my site (not the Homepage). They have been causing many issues. Whenever I try to switch out the links on the buttons using the HTML builder, more often than not they “break” and cause all buttons on the page to stop working. The only thing that I edit are the web addresses that are linked. It is so sensitive and makes me nervous to make edits.

Does anyone have a solid more error-free solution to adding HTML buttons on your Shopify pages? Or have an explanation for why the buttons are always breaking? I noticed sometimes “sanitized” gets added to the HTML, and I’m not adding that. Lately some of the buttons are opening 2 duplicate tabs at once as well. Something is off.

Would love some guidance. The orange buttons when you scroll down on this page are examples of what is getting used throughout the website: https://orca3d.com/pages/version2

2

Hi @rdivingdog20 Generally when the layout doesn’t change, rewire the buttons to use metafields or metaobjects.

If your are using the admins pages richt-text-editor that is not a full fledge html editing environment nor does it have foolproof error checking.

Not sure about what todo about “sanitized” behaviors from shopify’s servers.

If the pages break easily when editing page content this can indicate there is already malformed html present in the rich-text for the page content-html or in the containing theme itself resulting in broken behavior for either just the content or in content+theme in tandem for a swiss-cheese type of failure.

Validate the rich-text html content , and the theme itself

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-content-with-the-rich-text-editor

https://validator.w3.org/ (use fragment mode for partial content like rich-text html)

And also check the websites developer console for errors (ctrl+shift+j chrome browser https://developer.chrome.com/docs/devtools/open#shortcuts )

Good Hunting.

If you need this debugged, or theme customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @rdivingdog20 ,

I don’t really understand the error you are getting, can you explain more about it? I will help you check it