Liquid, JavaScript, themes, sales channels
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>
And the live version
Solved! Go to the solution
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>
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>
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,
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023