Why are buttons not rendering in policy pages?

Solved

Why are buttons not rendering in policy pages?

ccet3322
Shopify Partner
5 0 0

Hi,

 

I am using the built-in Policy pages located in the "Settings > Policies" section of the site. These policies allow you to enter Rich Text or HTML. I have been entering HTML and successfully render <h1> elements, <p> elements, <a> elements etc.  

 

I have been unable to implement or render any type of "button" or similar for the user to click on where I will send them to a Returns Form page I have created.

 

Does anyone know why it is not allowed?  In the GUI text editor found on the Policies page, the button shows as intended. When I view the page live, however, the button is gone and only the text from the button remains.

 

I have tried various version with both <button> and <form> elements and both produce the desired visuals in the EDITOR but disappear when I view the page LIVE.  

 

Any help would be appreciated

 

<form action="https://google.com" style="text-align: center;">
  <input type="submit" value="Submit" style="background-color: #7db0c0; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; border-radius: 8px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)" />
</form>

ccet3322_0-1685557170543.png

And the live version

ccet3322_1-1685557189791.png

 

Accepted Solution (1)

NomtechSolution
Astronaut
1245 113 159

This is an accepted solution.

To create a button or a link in your policy pages, you can use HTML anchor tags (<a>) and style them to resemble buttons using CSS. Here's an example:

 

<a href="https://google.com" style="background-color: #7db0c0; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; border-radius: 8px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
  Submit
</a>

 

View solution in original post

Replies 2 (2)

NomtechSolution
Astronaut
1245 113 159

This is an accepted solution.

To create a button or a link in your policy pages, you can use HTML anchor tags (<a>) and style them to resemble buttons using CSS. Here's an example:

 

<a href="https://google.com" style="background-color: #7db0c0; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; border-radius: 8px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
  Submit
</a>

 

ccet3322
Shopify Partner
5 0 0

Thank you,

 

This solution does work and I will be using it.

 

Any chance you have any other info to offer as to why <button> or <form> elements would not render?  My next attempt for a solution would be to make custom pages for these policies, completely circumventing Shopify's default pages but I would assume this is bad practice.

 

Again, thank you for the response and solution.  If you had any other information to contribute as to the "why" it could help me better understand the inner workings of Shopify.

 

Cheers,