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 BigCommerce website.

‍

How to Add a Snippet to the Footer on BigCommerce

If you need to add custom code, scripts, or content to the footer of your BigCommerce store, here are the best methods based on your needs.

‍

1. Using BigCommerce’s Footer Scripts (Easiest Method)

If you need to add JavaScript, tracking pixels, or HTML snippets that load in the footer on all pages, use the built-in Script Manager.

Steps:

1. Log into BigCommerce Admin.

2. Go to Storefront → Script Manager.

3. Click “Create a Script”.

4. Fill out the details:

• Name: Custom Footer Script

• Location on Page: Footer

• Select Pages: All Pages (or choose specific ones)

• Script Category: Essential (for tracking) or Functional (for custom content)

• Script Type:

• Script (for JavaScript)

• HTML (for content like text, links, or buttons)

5. Paste your snippet, e.g.:

<script>

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

</script>

6. Click “Save”.

🔹 Best for analytics, tracking pixels, and JavaScript scripts.

‍

2. Editing the Footer in the Theme Files (Advanced Users)

If you need custom footer content (text, links, widgets), edit your footer template file.

Steps:

1. Go to Storefront → Themes → Click “Edit Theme Files”.

2. In the left sidebar, open:

• templates/components/common/footer.html (for general footer changes)

• templates/layout/theme.html (for global footer placement)

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

<div class="custom-footer">

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

</div>

<script>

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

</script>

4. Click “Save & Apply”.

🔹 Best for adding HTML and custom widgets to the footer.

‍

3. Adding Footer Content Using the Page Builder

If you’re using a BigCommerce Stencil theme, you can add footer content via the Page Builder.

Steps:

1. Go to Storefront → Customize Theme.

2. Click on the Footer section.

3. Add a Text Block or Custom HTML Block.

4. Paste your snippet, e.g.:

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

5. Save & Publish.

🔹 Best for users who prefer a no-code solution.

‍

4. Adding a Sticky Footer (CSS Fix)

If your footer isn’t sticking to the bottom, use this CSS fix:

Steps:

1. Go to Storefront → Theme Customization.

2. Open “Custom CSS” and add:

html, body {

   height: 100%;

}

.page-wrap {

   display: flex;

   flex-direction: column;

   min-height: 100vh;

}

.footer {

   margin-top: auto;

}

3. Save & Apply.

🔹 Best for ensuring the footer stays at the bottom.

‍

Which Method Should You Use?

✅ For scripts & tracking codes: Use Script Manager

✅ For adding text, links, or custom HTML: Edit footer.html

✅ For adding content visually: Use Page Builder

✅ For ensuring the footer sticks to the bottom: Use CSS

‍