How to create a floating/sticky/overlaid banner on my page with a hypertexted button in it?

Solved
New Member
3 0 0

Hi creative professionals!

 

I want to create a banner (a wide and short image) at the bottom of my Shopify home page and some other pages. 

 

The banner should be floating on the top layer and be fixed or sticky. By "fixed/sticky", I mean it does not move when page visitors are scrolling up and down through the page. It stays right at the bottom of the pages. 

 

And I want to add a button with hyperlink URL, or simply the whole banner is linked to the URL.

 

I know I'll have to edit the code in order to implement that, but I don't know where and how to start. The theme I currently use is Debut.

 

I hope that you guys could drop me some tips on this.

 

Massively appreciated,

Mike Friar

0 Likes

Success.

Shopify Expert
2490 417 525

Hi @Cgaga 

Follow this:

1. Open Layout->theme.liquid and paste bellow code  just before </body>

<div class="stick_img"><a href="your_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/service-i-3_981fc4da-86e2-496d-a4ad-269be40c2408_small.png?v=1569821692"></a></div>

 

2. Now add this css in Asset->theme.scss file at bottom:

.stick_img{position: fixed; bottom: 0; right: 0; z-index: 111;}

Note: You can change image url and 'your_url' to url where you want to redirect. 

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like