Change your logo to another image on a single page

This is a perfect line of code if you are looking to up-sell a course, product or membership. The code I’m sharing below will switch out your current logo with a different image.


step 1 | Add the image file you want to replace

You will need to upload the image you’re looking to replace your current logo with. In order to do this, you will need to navigate to DESIGN > CUSTOM CSS > MANAGE CUSTOM FILES from your main dashboard. Upload your new image.

step 2 | Get the link of your image

If you already have lines of code within your css section, you’ll want to press enter a few times so you can get access to the link of the image you’ve just uploaded. Don’t worry, you will be able to delete this link it provides.

From your managed files, click on the image you’ve just uploaded. It will add a link to your custom CSS section. Copy that link, delete it from your custom css area and move on to the next step.

step 3 | Paste the link and code

You’ll want to navigate to the page you’re looking to replace your current logo. Within the settings tab of that page, you’ll want to click on the ADVANCED tab at the top. Scroll down a little and you will see the CODE INJECTIONS of that specific page.

Paste your link and skip a few lines.

Now you’ll want to add the lines of code to replace your logo. Copy the code below in your page code injection section.

 <script>
   window.onload = function() {
     document.getElementsByClassName('Header-branding-logo')[0].src = 'URL_TO_IMAGE';  
   };
 </script>

Step 4 | Replace the URL image link

Next copy the image link and replace the line that says URL_TO_IMAGE.

step 5 | Apply your changes

BrineMelanie CraftComment