How can I keep a banner static while scrolling?

Solved

How can I keep a banner static while scrolling?

lisbotech
Excursionist
12 0 3

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

thank you

lisbotech_0-1700400752285.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

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

DanFromRyviu_0-1700578277314.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 13 (13)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

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 %}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

lisbotech
Excursionist
12 0 3

Hi, thank you for the answer but,

lisbotech_0-1700508700933.png

 

the imgs arent loading, dont know why.

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

lisbotech
Excursionist
12 0 3

I know, but it doesnt appear.

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Could you drop your page link here to check?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

lisbotech
Excursionist
12 0 3
Dan-From-Ryviu
Shopify Partner
8382 1650 1662

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

lisbotech
Excursionist
12 0 3

ok, ill try

lisbotech
Excursionist
12 0 3

still nothing 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

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

DanFromRyviu_0-1700578277314.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

lisbotech
Excursionist
12 0 3

yea, it worked, ty very much

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

You are very welcome

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Theodor
Shopify Partner
691 86 98

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.