How To Add HTML Code In Shopify
Last modified: March 25, 2026
Here is how to add HTML code in Shopify: 
Step 1 - Login
The first thing you need to do is to login to your Shopify store using your login credentials.
Step 2 - Themes
Next go to your ‘Online Store’ and then themes. You will need to find the theme that you’re using.
Step 3 - Edit Code
Then you need to go to the ‘Actions’ and then ‘Edit Code’ options. This will open up all the documents that create your website. You need to find the folder that is relevant to your code. For instance, if you want to add a Google verification code to the header of your site, you would need to find the theme.liquid option.
Step 4 - Add The Code
When in the file, add the code in the relevant position. In our example for the Google Verification code, you would need to add this piece of content inbetween theandtags. This determines the header area of your website.
Step 5 - Save
Before you exit the code editor, you will need to save the changes you’ve made. They should then be published to your site.
-
How to Add HTML Tag to Shopify?
Adding Shopify HTML codes is pretty simple and we lay out all the available options to do so on this page.
-
What are Shopify Custom HTML Codes?
Go through our guide and understand all about Shopify HTML tags in depth.
-
How do I ensure that the HTML code I add is mobile-responsive?
To ensure that the HTML code you add is mobile-responsive, use responsive web design practices. This often involves using flexible grid layouts, flexible images, and media queries.
-
What are the best practices for backing up my Shopify store before making HTML changes?
Before making HTML changes, it’s best to duplicate your theme for backup. You can do this from the Shopify admin by going to Online Store > Themes, then clicking ‘Actions’ and ‘Duplicate’ on your current theme.
-
Can HTML tags affect the loading speed of my Shopify store?
Improper HTML tag usage can slow down your store’s loading speed due to excessive complex scripts and large image files. To maintain a fast, efficient online store, it’s crucial to optimize both HTML code and media files.
-
Where can I add custom HTML code in my Shopify store?
You can add custom HTML code in several places on your Shopify store, including within the theme files (e.g.,
theme.liquid), custom HTML sections, pages, blog posts, and product descriptions. You can also use the rich text editor to insert HTML directly into content areas. -
How do I add HTML code to a specific page in Shopify?
To add HTML code to a specific page, navigate to the page editor in Shopify, switch to the “Show HTML” mode in the rich text editor, and paste your HTML code there. This allows you to customize the content of that page with HTML.
-
Can I add HTML code to my Shopify theme files?
Yes, you can add HTML code directly to your Shopify theme files by accessing the “Edit code” section under “Themes.” You can modify templates like
theme.liquid,header.liquid,footer.liquid, or create custom sections where you can insert your HTML. -
How do I add custom HTML to my Shopify homepage?
To add custom HTML to your homepage, you can either use a custom HTML section (if your theme supports it) or edit the
index.liquidtemplate file in your theme’s code. Alternatively, you can use the Shopify page builder or apps that allow you to insert HTML blocks. -
Can I use HTML in Shopify product descriptions?
Yes, you can use HTML in Shopify product descriptions. In the product editor, switch to the “Show HTML” mode in the rich text editor, where you can add and format HTML code for your product descriptions.
-
How do I embed third-party HTML code, like a widget or iframe, in Shopify?
To embed third-party HTML code, such as a widget or iframe, paste the HTML code into the appropriate section of your theme or content area. Make sure to place the code within the
iframeorembedtags as provided by the third-party service. -
Can I add HTML code to Shopify email templates?
Yes, you can customize Shopify email templates by editing the HTML in the “Notifications” section of your Shopify admin. Navigate to “Settings” > “Notifications,” select the email you want to customize, and edit the HTML code directly in the template editor.
-
How do I ensure my custom HTML code is mobile-responsive in Shopify?
To make your custom HTML code mobile-responsive, use responsive design techniques like flexible grids, media queries, and percentage-based widths. You can also test your HTML on various devices using Shopify’s theme preview or browser developer tools.
-
Is it possible to add custom HTML forms in Shopify?
Yes, you can add custom HTML forms in Shopify by embedding the form code directly into your theme’s HTML files or a specific page or section. Ensure that the form is styled and functions correctly by adding the necessary CSS and JavaScript.
-
How do I troubleshoot issues with custom HTML in Shopify?
If you encounter issues with custom HTML in Shopify, check for common errors like unclosed tags, incorrect syntax, or conflicts with existing CSS and JavaScript. Use browser developer tools to inspect the HTML and debug any issues. Additionally, reviewing Shopify’s documentation or seeking help from a developer can resolve more complex problems.
Knowing how to change HTML or add it to your site is a wise skill to learn. There are lots of training centers online that can help you learn HTML. Once you’ve learned the computer language, it will help you to build functions and appearance in your store. Then you can optimize your site’s design and performance. This can result in more conversions and better profits.
For instance, you might want to add HTML code in Shopify to help you build more functions (like adding gift wrapping to your cart page, or adding tabs and filters to your main page), enable push notifications, or make small changes to how your site appears. Or you might need to use HTML to add a Google code to the header section of your website for ownership verification, tracking, and more. You can also add schema to Shopify using HTML code to improve your site’s SEO.
Knowing the skills yourself can also save you lots of money as you won’t need to hire an expensive developer to complete basic tasks.
Conclusion: How To Add HTML Code In Shopify
Adding HTML code to your Shopify store isn’t challenging. The biggest problem you will have is making sure that your code won’t cause a crash of your site. There are some apps that can also help with adding code to your site. But it’s probably not the only Shopify customization and design you’ll want to include in your site.
One of the best code creators for Shopify stores is XO Insert Code, this app not only allows you to create code in a unique code editor, but you can enable and disable them when you need them. This can allow you to test the code before you apply them.
In addition, you can check that you code works by entering it into this free code validator.
Remember that not everything on Shopify can have the code changed. Main Shopify operations and some apps won’t allow for additional CSS, JavaScript or HTML to be added to them. Others might allow for some additional coding. You should always check with the developer first.
Additionally, if you want to offer a pickup in-store option or customize your store’s design and functionality, you may need to use HTML and/or liquid code in Shopify. While Shopify provides a drag-and-drop interface for creating your store, using HTML and liquid code can give you more control over the look and feel of your store, as well as add custom features such as a pickup in-store option.
