Insert HTML code into Shopify Footer

Topic summary

Goal: add a “Book Now” HTML widget so it appears on all pages by placing it in the Showcase theme footer.

Recommended method:

  • In Shopify Admin: Online Store > Themes > Actions > Edit code.
  • Open Sections > footer.liquid.
  • Insert the HTML at the desired location within the footer template.

Placement/styling: Optionally wrap the widget’s HTML in a dedicated div with classes, then style via CSS to control layout and appearance.

Quality/safety: Test thoroughly after embedding, as third‑party widgets or scripts can conflict with native Shopify functionality.

Outcome: Provides a clear, step‑by‑step approach; no code snippets or images were shared. No disagreements or alternate methods were raised, and there’s no explicit confirmation of resolution from the original poster.

Summarized with AI on January 27. AI used: gpt-5.

Hi,

I have a string of HTML code that I need to embed in my Shopify Footer Theme (Showcase Theme).

This is a book now widget button and the client has asked it be present on all web pages, therefore the footer is the obvious and preferred choice.

Can anyone advise how I can properly insert this piece of HTML into the Footer, even by using the liquid code?

To embed HTML code in your Shopify Footer Theme using liquid code, you will need to follow these steps:

  1. Open the Shopify Admin panel and go to Online Store > Themes.
  2. Click on the Actions dropdown for your Showcase Theme and select Edit code.
  3. In the left-hand side panel, click on the Sections folder and then click on footer.liquid.
  4. Scroll down to the point where you want to add the HTML code.

If you want to add the Book Now widget in a specific location in the footer, you can wrap the HTML code in a div and add classes to that div, and then style it with CSS.

Also, keep in mind that some widgets or scripts may conflict with Shopify’s native functionality, so it’s always a good idea to test your changes thoroughly to make sure they don’t cause any issues.