More Articles

Add HTML Snippet to Shopify

Services like Autopilot Convert require adding HTML code to your website. The Convert HTML snippet is a single line of HTML with an image (<img>) element. This should typically be placed on all pages on a website. The easiest way to do this is by adding the snippet to the site-wide footer. (If you don't have a footer but do have a navigation menu, the snippet could also be placed in navigation or a site-wide header.)‍These instructions cover adding a snippet to the footer on a Wordpress website.

These instructions cover adding a snippet to the footer on a Shopify website.

How to Add a Snippet to the Footer on Shopify

If you need to add a custom snippet (HTML, JavaScript, or tracking code) to the footer of a Shopify site, here are the best methods based on your needs.

1. Using Shopify’s Theme Editor (Recommended)

If you need to add content to every page’s footer, edit your theme’s footer.liquid file.

Steps:

1. Log into Shopify Admin.

2. Go to Online Store → Themes.

3. Find your active theme and click “Edit Code”.

4. In the left sidebar, open Sections → footer.liquid.

5. Add your custom snippet before the closing </footer> tag:

<div class="custom-footer">

   <p>&copy; <span id="year"></span> YourShopifyStore.com - All Rights Reserved.</p>

</div>

<script>

   document.getElementById("year").textContent = new Date().getFullYear();

</script>

6. Click “Save” and check your store.

🔹 Best for adding text, links, or scripts inside the footer.

2. Using the Theme Customizer (No Code Option)

If your theme supports a footer block, you can add content via the Shopify Theme Editor.

Steps:

1. Go to Online Store → Customize (for your active theme).

2. Scroll down to Footer.

3. Click “Add Block” → Select “Custom Liquid”.

4. Paste your snippet, e.g.:

<p>Follow us on Instagram: <a href="https://instagram.com/yourstore">@yourstore</a></p>

5. Click “Save”.

🔹 Best for text-based or small HTML additions.

3. Adding JavaScript or Tracking Code via Theme Settings

If your snippet involves tracking scripts (Google Analytics, Facebook Pixel, etc.), Shopify provides a built-in Custom Code field.

Steps:

1. Go to Online Store → Themes → Click “Edit Code”.

2. Open layout/theme.liquid.

3. Find the </body> tag and add your script before it:

<script>

   console.log("Custom script loaded in Shopify footer.");

</script>

4. Save changes.

🔹 Best for analytics, tracking pixels, or custom JavaScript.

4. Using Shopify Apps for Advanced Footers

If you need an advanced or dynamic footer, try Shopify apps like:

“EZ Footer Editor” (Drag-and-drop footers)

“qikify Smart Menu” (Enhanced menus and footers)

“Custom CSS & JS Injector” (For inserting scripts easily)

🔹 Best for non-developers needing advanced layouts.

Which Method Should You Use?

For HTML content in the footer: Use footer.liquid

For adding text via the Shopify editor: Use Theme Customizer

For scripts & tracking codes: Use theme.liquid

For complex footer layouts: Use a Shopify App

More Articles