Embedding an iframe in London's theme homepage

Themes
1

Hi, I bet this is a simple question for the right people…

The London theme’s homepage leaves a big space for one sentence at the top. I want to add an iframe with a music player underneath the sentence since there is enough space for both.

I have the iframe working on the About page since it’s easy to insert the HTML there, but I don’t know where to add it for the iframe to appear in that location of the homepage. Any help is appreciated!

2

Hi! In London, that sentence on the homepage is your site description, rendered inside <header class="page-head"> in index.hbs. The easiest way to put your player right under it — without editing the theme, so it survives theme updates — is Code Injection:

Settings → Code injection → Site footer:

<script>
  (function () {
    var head = document.querySelector('.home-template .page-head');
    if (!head) return;
    var player = document.createElement('div');
    player.className = 'home-player';
    player.innerHTML = 'PASTE YOUR IFRAME CODE HERE';
    head.appendChild(player);
  })();
</script>

Site header (a bit of spacing and keep it responsive):

<style>
  .home-player { margin-top: 24px; }
  .home-player iframe { max-width: 100%; }
</style>

Paste your iframe between the quotes. If it contains single quotes, swap them for double quotes. It only shows on the homepage, and only when the site description is set — London hides that header when the description is empty.

If you’d rather edit the theme: download it in Settings → Design, add the iframe in index.hbs right after <h2 class="page-head-title">…</h2>, zip it and upload it again. Just remember a future London update would overwrite that change.

3

@Adrian_Papasergio Yes, your code solved this. Thank you very much!

4

Happy to read that! Good Sunday!