You can add custom code and scripts to your site using the Code Injection area in Advanced Settings.
Code Injection is a Premium feature available in Business and Commerce plans.
If you add code to Code Injection, we may ask you to disable it while editing your site. To learn more, visit Disabling scripts in preview.
We recommend adding CSS to the Custom CSS Editor instead of Code Injection. If you're adding it to Code Injection, surround the code with <style></style> tags.
Use Code Injection to add HTML and scripts that enhance specific parts of your site. These might include live chat services, domain verification for custom email services, or site analytics.
Code Injection isn't intended for adding content or styles. To add content to your site, visit Building a page. To add custom CSS for styles, use the Custom CSS Editor.
In the Home Menu, click Settings, click Advanced, and then click Code Injection.
Add valid HTML or scripts into the appropriate Code Injection fields for the header, footer, lock page, or order confirmation page.
Code added here is injected into the <head> tag on every page in your site.
Code added here is injected before the closing </body> tag on every page in your site.
Note: The footer area is defined by your template.
The lock screen appears when a page or site is hidden behind a site-wide or page password. Code injected here displays above the lock screen's password field.
Although you can add code to this field, we recommend you use the Lock Screen panel to design your lock page instead. That way, you can add a background image or slideshow, adjust font styles, incorporate your logo, and more.
Code added here is injected into the order confirmation page that appears after a customer checks out. This works well for adding third-party tracking and affiliate programs to your store.
After adding your code, click Save.
Open the page while in the Pages panel.
Hover over the content area.
Page Header Code Injection adds code to the <head> tag of that page. It won't display on Index landing pages.
In Blog Page Settings, Post Blog Item Code Injection adds code to every blog post.
Depending on your template, it will appear above or below the post content.
In templates with the Grid/stacked Blog Page, the code displays on the blog landing page and not on individual posts.
Note: Ajax loading may prevent CSS added to Code Injection from loading correctly. Add CSS to the CSS Editor instead.
Visit our recommended resources for learning code.