You can add HTML code to your Shopify store in four ways: via the Theme Editor's code section, through the page and blog post editor in rich text mode, directly in product descriptions, or by creating a custom HTML section. Which method you use depends on where you want the code to appear and whether the change needs to be permanent or page-specific.
Where Can You Add HTML Code in Shopify?
Shopify gives you several places to insert HTML, each suited to different needs:
- Theme Editor (Edit Code): For structural changes that affect your entire store or specific layouts, headers, footers, product templates.
- Page and Blog Post Editor: Switch from the visual editor to HTML view to add code to a specific page without touching theme files.
- Product Descriptions: Insert HTML directly into product descriptions for styled formatting, embedded videos, or custom tables.
- Custom HTML Sections: Add a reusable HTML block to any page via the Theme Customizer, no code editing required.
For most non-developers, the Custom HTML section approach (covered in full below) is the safest and most flexible starting point.
How Do You Add a Custom HTML Section Through the Theme Editor?
This method creates a reusable HTML section you can place on any page from the Shopify Customizer. It does not alter your core theme files, making it safe to edit and remove.
Step 1: Access Shopify's Theme Editor
- Log in to your Shopify admin.
- Navigate to Online Store > Themes.
- Locate your active theme and click the Actions dropdown menu.
- Select Edit code to open the theme file editor.
Step 2: Create a New Section File
- In the left panel, locate the Sections folder.
- Click Add a new section.
- Name the file (for example: custom-html.liquid) and press Done.
- Shopify will create the file and open it for editing.
Step 3: Add and Save Your HTML Code
- Delete any placeholder code in the new file.
- Paste your HTML code into the file. Keep it clean and free of syntax errors, even a missing closing tag can break your layout.
- Click Save. If Shopify reports an error, check for unclosed tags or mismatched quotes.
Step 4: Add the Section to a Page
- Return to Online Store > Themes and click Customize.
- Navigate to the specific page where you want the HTML section to appear.
- Click Add section in the left sidebar.
- Select Custom HTML (or the name you gave your section) from the list.
- Your HTML will now render on that page. Save your changes in the Customizer.
How Do You Add HTML Directly to a Shopify Page Without Editing Theme Files?
If you just need to add a snippet of HTML to one specific page, a form embed, a table, or some styled text, you do not need to touch the theme at all. Use the page editor's HTML view instead:
- Go to Online Store > Pages and open the page you want to edit.
- In the content editor, click the <> (Show HTML) icon in the toolbar.
- The editor switches to raw HTML view. Paste or type your HTML code here.
- Click Save. Preview the page to verify it renders correctly.
The same approach works in blog posts and product descriptions, look for the same <> toggle in the editor toolbar.
What Are the Most Common Uses for Custom HTML in Shopify?
Once you know how to add HTML, here are the most practical applications:
- Embedding third-party widgets: Live chat, review widgets, social media feeds, and countdown timers all use HTML embed codes you paste directly into a section or page.
- Custom announcement banners: A simple styled <div> with inline CSS creates a persistent banner above your header without needing an app.
- Formatted product tables: HTML tables in product descriptions let you display comparison charts or specification tables cleanly.
- Tracking and analytics pixels: Google Tag Manager, Meta Pixel, and TikTok Pixel all require you to paste HTML/script code into your theme's <head> section.
- Custom size guides or instructional content: Embed a styled HTML section with sizing charts or care instructions on relevant product pages.
What Should You Do Before Adding HTML Code to Your Shopify Theme?
Before making any changes to theme files, always duplicate your active theme first. Go to Online Store > Themes, click the Actions dropdown on your active theme, and select Duplicate. This creates a backup you can restore instantly if something breaks. For changes to .liquid section files (not the core theme), the risk is lower, but a backup is always worth 30 seconds of effort.
What HTML Cannot Do in Shopify
Understanding the limits of HTML in Shopify saves you time troubleshooting. Several things that work in standard HTML are restricted or behave differently inside Shopify:
- Server-side scripts: Shopify runs on Liquid (its own templating language). You cannot embed PHP, Python, or other server-side languages via HTML. Client-side JavaScript works, but anything requiring server processing needs to go through a Shopify app or the Storefront API.
- iframes in page editors: Shopify's built-in page editor strips certain HTML tags including iframes for security reasons. If you need to embed an iframe (for a video, map, or booking form), use a Custom HTML section via the Theme Editor instead.
- Direct database access: You cannot write HTML that reads from or writes to Shopify's database. Any data operations must go through the Shopify API.
- External scripts from untrusted domains: Shopify applies Content Security Policy headers that may block scripts loaded from unknown external domains. Use only trusted CDN links or host your scripts on Shopify's CDN via theme assets.
Conclusion: How to Add HTML Code to Your Shopify Store
The safest starting point is the Custom HTML section approach, which requires no direct editing of core theme files and works on any page. If you need broader structural changes, the Theme Editor gives you full control. Always test HTML additions in a duplicated theme first, and use the page editor's HTML toggle for quick, page-specific changes that do not need to be reused across your store.
* read the rest of the post and open up an offer
