How to add banner here?

[lisbotech]

Hi, how can I put a banner there that stays the same when i scroll down?

thank you

[Dan-From-Ryviu]

Hi @lisbotech 

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code after </body> and save file. Custom value in top: 130px to fit with your store 

{% if template.name == 'collection' %}
<div class="left-banner">
    <img scr="your left banner image link goes here" alt="left banner">
</div>
<div class="right-banner">
    <img scr="your right banner image link goes here" alt="right banner">
</div>
<style>
.left-banner,
.right-banner {
position: fixed;
top: 130px;
}
.left-banner {
left: 0px;
}
.right-banner {
right: 0px;
}
</style>
{% endif %}

[lisbotech]

Hi, thank you for the answer but,

the imgs arent loading, dont know why.

[Dan-From-Ryviu]

You must add your banner images link in the SRC element in my code

[lisbotech]

I know, but it doesnt appear.

[Dan-From-Ryviu]

Could you drop your page link here to check?

[lisbotech]

Placas Gráficas – LISBOTECH

password: yangan

[Dan-From-Ryviu]

Dont know why but you can try to upload image to your store admin > Contents > Files and use this link instead and then check again

[lisbotech]

ok, ill try

[lisbotech]

still nothing 

[Dan-From-Ryviu · Accepted solution]

It was my mistake. Its spelling is scr instead of src I'm img element. Please correct it and check again

[lisbotech]

yea, it worked, ty very much

[Dan-From-Ryviu]

You are very welcome

[PageFly-Theodor]

Hi @lisbotech ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the How To Add Banner Here?, let’s try this solution:

{% if template.name == 'collection' %}
<div class="left-banner">
    <img scr="url image" alt="left banner">
</div>
<div class="right-banner">
    <img scr="url image" alt="right banner">
</div>
<style>
.left-banner,
.right-banner {
position: fixed;
top: 130px;
}
.left-banner {
left: 0px;
}
.right-banner {
right: 0px;
}
</style>
{% endif %}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly