Hi,
Like the title says, can you add javascript in a blog post. I’m trying to build a calculator and implementing it into my post. Thanks
Topic summary
Main Topic:
Adding JavaScript code to Shopify blog posts using the Rich Text Editor (RTE).
Key Solution Provided:
- JavaScript can be incorporated into blog posts via Shopify’s Rich Text Editor
- Use the ‘<>’ button in the RTE to access the code editor
- Wrap JavaScript with
<script></script>tags and CSS with<style></style>tags - Avoid including HTML structural tags (
<html>,<head>,<body>) as the RTE already functions as the body - Recommended to finalize and test code using tools like JSFiddle before pasting, since RTE doesn’t show previews or error notifications
Current Issue:
A follow-up question asks whether it’s normal to see nothing displayed in the regular text editor window after adding JavaScript code through the code editor.
Status:
The original question was answered with detailed instructions, but a new technical concern about visibility in the editor remains unresolved.
Note: Much of the conversation text appears reversed/mirrored, suggesting potential encoding or display issues in the original thread.
Hi, @badhairdude !
This is May from Shopify, and welcome to our Shopify Community!
To answer your question, yes, you can add JavaScript in a blog post! You can take advantage of our Rich Text Editor (RTE) in order to add JavaScript. Before copy/pasting your code to the RTE, I highly suggest that your code is finalized, since the RTE will not notify you if you made any mistakes or will it show an output preview of your code. If you want to see a preview your code before adding it to your blogpost, I highly recommend using a third party compiler such as JSFiddle.
When adding your code to the RTE, you’ll want to make sure that you click on the ‘<>’ button
and paste you code there. You will also want to make sure that you are wrapping your JavaScript code with a <script> tag and closing it with </script>. If you have any CSS code for styling, you’ll also need to wrap it with a <style> </style> tag. It is important to note that since the RTE is already the <body> of the web page, please do not include opening tags such as <html>, <head>, <meta>, <title> and <body> inside your RTE. If you include these tags, the RTE will recognize the entire content as a string, and it will not compile your code properly.
Here’s an example of what your code should look in your RTE:
<script>
[Your JavaScript code here]
</script>
<style>
[Your CSS code here]
</style>
[Your body content here]
After you save your changes, depending on the code, you might need to adjust your theme code or settings, since it might interfere/overlap with your current theme code. For future reference, if you are seeing issues or unexpected results from your changes, I highly recommend reaching out to a Shopify Expert.
Let me know if this helps! If you have any followup questions, feel free to reply back to this thread!
Cheers!
Is it normal to do this and see nothing in the text editor where you write your blog? I use the code editor in blogs all the time. I can usually see what I added in the normal window after I do. Is it normal for nothing to show up in the normal window when I add Javascript? Here’s the code I’m trying to add: